快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → HTML+CSS+JS实现一个计划完成进度百分比电池标识

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

时间:2022-10-06 18:21:34人气:作者:快盘下载我要评论

一、实现步骤

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

二、具体流程

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

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

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

效果;

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

 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>;
}

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

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。