whatshot[网页插件] 给首页添加一个显示一年的时间进度条

@Ta 2019-07-02 88点击

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

2019/06/24 19:40 更新

2019/06/24 16:00 更新

代码

<!-- Today 插件开始 -->
<!-- Today css代码 -->
<style>
    .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;
    }
</style>
 
<!-- hu60 内部的JQ -->
<script src="/tpl/jhin/js/jquery-3.1.1.min.js"></script>
 
<!-- Today js代码 -->
<script>
    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
        }
    }
 
$(document).ready(function () {
    if (location.pathname == "/q.php/index.index.html") {
        $('.container').prepend('<div class="today" style="margin: 10px 0"></div>')
        Today.init('.today')
    }
})
</script>
 
<!-- Today 插件结束 -->
回复列表(0)
帖子没有回复
添加新回复
回复需要登录
[聊天-微语]胖罗:小富由俭,大富由天-●●位招租 - Hu…