HTML+CSS+JS实现一个计划完成进度百分比电池标识

一、实现步骤

1. 画一个电池
2. 计算计划完成的百分比，这里参与百分计算的有三个重要元素：计划开始时间、计划预计完成时间和计划实际完成时间
3. 根据百分比对电池进行颜色填充即可

二、具体流程

1、如何画一个电池？其实很简单，我们使用一个 button 作为电池的中间部分，用一个黑色方块作为电池的正极，负极可以忽略；

.battery {
    background: greenyellow;
    border: solid 2px blue;
    border-radius: 2px;
}

.battery :after {
    content:"▊";
    position: absolute;
    margin-left: 7px;
    color: blue;
}

效果：

 2、如何计算计划完成的百分比？

     1）先枚举出每个月的实际天数，年有平闰之分，平年为 28 天，闰年为 29 天。计算闰年的算法是使用当前年份取模 100，模的尽且模 400 仍然模的尽即为闰年，或者年份模100 模不尽但模 4 模的尽也是闰年。

    2）在判断计划是否开始。这里有如下几种情况：计划未开始、计划进行中、计划结束时间早于预计结束时间以及计划在预计结束时间结束。

   3) 计算出计划时间的总天数以及当前时间的距离计划开始时间的总天数，后者的差值除以前者的差值在乘以 100，即可得到百分比的值。

具体代码实现：

progressMark = function (deadline, overTime, beginTime) {
    const cur = new Date();
    const begin = new Date(beginTime);
    const overMill = overTime ? new Date(overTime).getTime() : null;
    const deadlineTime = new Date(deadline);
    if (cur.getTime() >= deadlineTime.getTime() || (overMill && cur.getTime() >= overMill)) {
        return "<button style='background: greenyellow' class='finish-mark'>完成</button>"
    }
    let background;
    if (begin.getTime() > cur.getTime()) {
        background = "white";
    } else {
        const daysOfMonth = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        const curYear = cur.getFullYear();
        if ((curYear % 100 === 0 && curYear % 400 === 0) || (curYear % 100 !== 0 && curYear % 4 === 0)) {
            daysOfMonth[2] = 29;
        }
        const monthDif = deadlineTime.getMonth() - begin.getMonth();
        const beginDay = begin.getDate(), deadDay = deadlineTime.getDate();
        let total, percent;
        if (monthDif === 0) {
            total = deadlineTime.getDate() - begin.getDate();
            percent = ((cur.getDate() - begin.getDate()) / total) * 100;
        } else {
            total = daysOfMonth[begin.getMonth()] - beginDay + deadDay;
            for (let i = begin.getMonth() + 1; i <= deadlineTime.getMonth() - 1; ++i) {
                total += daysOfMonth[i];
            }
            if (cur.getMonth() === begin.getMonth()) {
                percent = (cur.getDate() - beginDay) / total * 100;
            } else {
                let progress = daysOfMonth[begin.getMonth()] - beginDay + cur.getDate();
                for (let i = begin.getMonth() + 1; i <= cur.getMonth() - 1; ++i) {
                    progress += daysOfMonth[i];
                }
                percent = progress / total * 100;
            }
        }
        background = "linear-gradient(to right, greenyellow "+ percent +"%, white 0)";
    }
    return "<button style='background: "+ background +"' class='in-progress-mark'>进行中</button>"
}

三、设计完成，有不对之处或者有疑问的伙伴们可以评论区留言或私信。谢谢大家的阅读！