一个小工具: 显示一年的时间进度条

寄语

没事看看今年过了多少了, 鼓励自己赶紧学习.

演示图

进度条会占父级标签 100% 的宽度

代码

Today.css

.container_today {
    margin: 0 auto;
    background: #2f3640;
    padding: 5px;
    border-radius: 0 0 5px 5px;
}

/* 头部 */
.header_today {
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    position: relative;
}
.header_today .year_today {
    color: white;
    position: absolute;
    left: 5px;
}
.header_today .per_today {
    color: #E03255;
    font-weight: 900;
}
.header_today .detail_today {
    color: #BCF745;
    position: absolute;
    right: 5px;
    top: 0px;
}

/* 天数 */
.dots_today .dot_today {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #34645D;
    margin: 0 2px;
}
.dots_today .active_today {
    background: #14F7CD;
}

/* 动画 */

/* chrome */
@-webkit-keyframes stars{
    0% {
        background: #34645D;
    }
    25% {
        background: #14F7CD;
    }
    50% {
        background: #34645D;
    }
    75% {
        background: #14F7CD;
    }
    100% {
        background: #34645D;
    }
}

/* firefox */
@-moz-keyframes stars{
    0% {
        background: #34645D;
    }
    25% {
        background: #14F7CD;
    }
    50% {
        background: #34645D;
    }
    75% {
        background: #14F7CD;
    }
    100% {
        background: #34645D;
    }
}

.lamp_today {
    -webkit-animation: stars 3s ease 0s infinite;
    -moz-animation: stars 3s ease 0s infinite;
}

Today.js

Today = {
    data: {
        year: new Date().getFullYear(),
        month: new Date().getMonth(),
        day: new Date().getDate(),
        year_sum: 0,
        today_sum: 0,
        per: 0
    },
    init: function (ele) {
        this.data.year_sum = this.getYearDayNum()
        this.data.today_sum = this.getToDay()
        this.data.per = Math.floor(this.data.today_sum / this.data.year_sum * 100) + '%'

        this.createLayout(ele)

        console.log("%c wzblog(惜梦) %c http://github.com/wzblog and https://blog.wz52.cn/project.html", "color: #fff; background-image: linear-gradient(90deg, rgb(47, 172, 178) 0%, rgb(45, 190, 96) 100%); padding:5px 1px;", "background-image: linear-gradient(90deg, rgb(45, 190, 96) 0%, rgb(255, 255, 255) 100%); padding:5px 0;");
    },
    createLayout: function (ele) {
        // 创建容器
        var container = $('<div></div>').addClass('container_today')

        // 创建头部
        var header = $('<div></div>').addClass('header_today')

        // 创建年份
        var year = $('<div></div>').addClass('year_today')

        // 创建进度
        var per = $('<div></div>').addClass('per_today')

        // 创建天数详情
        var detail = $('<div></div>').addClass('detail_today')

        // 创建天数盒子
        var dots = $('<div></div>').addClass('dots_today')


        // 组合布局
        // 插入头部
        year.html(this.data.year)
        header.append(year)

        per.html(this.data.per)
        header.append(per)

        detail.html(this.data.today_sum + '/' + this.data.year_sum)
        header.append(detail)

        container.append(header)

        // 插入点
        
        for (var i = 0; i < this.data.year_sum; i++) {
            var dot

            if (i < this.data.today_sum) {
                dot = this.createDot(true)
                if (i == this.data.today_sum - 1) {
                    dot.addClass('lamp_today')
                }
            } else {
                dot = this.createDot()
            }

            dots.append(dot)
        }

        container.append(dots)

        // 插入容器
        $(ele).append(container)
    },
    // 创建点
    createDot: function (mark) {
        var dot = $('<a></a>').addClass('dot_today')

        if (mark === true) {
            dot.addClass('active_today')
        }

        return dot
    },
    // 获取全年天数
    getYearDayNum: function () {
        var days = 0
        for (var i = 1; i < 13; i++) {
            var d = new Date(this.data.year, i, 0)
            days += d.getDate()
        }
        return days
    },
    // 获取从本年1月1日到现在的天数
    getToDay: function () {
        var days = 0
        for (var i = 1; i <= this.data.month; i++) {
            var d = new Date(this.data.year, i, 0)
            days += d.getDate()
        }
        days += this.data.day
        return days
    }
}

使用方式

1.在你需要显示的位置写上一个 div 标签用于限制 Today 的大小

class 的名称可以自己随便写, 只要是符合 class 属性的规则即可.
可以在 div 标签中添加 style 属性来设置 width (宽度)限制大小, 或者使用其他方式来设置样式都可以.

<div class="wzblog_today"></div>

2.引入 Today.js 和 Today.css 以及 jQuery.js

可以使用 内联 或 外联 方式
Today.js 和 Today.css 为进度条核心文件, jQuery.js 为工具组件为核心代码提供工具支持

外联方式
<link rel="stylesheet" href="./Today.css"> <!-- 写在 head 中 -->

<script src="./jQuery.js"></script> <!-- 写在 <\\body> 上一行 -->
<script src="./Today.js"></script> <!-- 写在 <\\body> 上一行, 该文件必须在 jQuery.js 文件后引入 -->

内联方式
<style>
    // 将 Today.css 文件中的代码复制到此
</style>

<script src="./jQuery.js"></script> <!-- 写在 <\\body> 上一行 -->
<script>
    // 将 Today.js 文件中的代码复制到此
</script>

3.初始化 Today 显示在网页

.wzblog_today 为 JQ选择器 可以自行修改只要符合 JQ选择器规则 便可以使用

<script>
    Today.init('.wzblog_today') // 初始化, 写在 Today.js 文件之后
</script>

代码下载

全球最大的同性交友网站