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

2019/06/24 19:40 更新

• 创意来自于 app store 的 365dots App
• github 项目地址(内有演示代码): https://github.com/wzblog/365dots

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 插件结束 -->

白日梦还是要做的, 万一实现了呢?

建议楼主自己把代码合并好。在手机上进行大段文本插入是不太方便的。@老虎会仰泳

@老虎会游泳，好滴, 拿电脑写没考虑到这点, 现在合并了.
白日梦还是要做的, 万一实现了呢?

有趣
来自 Redmi Note5

@风起无花，没有开发者账号, 只能使用解压的方式使用插件, 后期的开发计划可能会加入 ToDoList. 有兴趣可以聊聊, 代码在github上.
白日梦还是要做的, 万一实现了呢?

@没落的情绪，目前已知登录时, 使用防掉线功能时会显示不出来, 原因是因为sessid在url导致无法判断出是否是首页, 检查一下你的url是不是存在sessid, 如果不存在复制url发来看看. 贴一下手机类型 安卓 or 苹果, 我好找对应平台的浏览器测试.
白日梦还是要做的, 万一实现了呢?