NotionWidgets/ProgressTimeCount.html at main · lymlin/NotionWidgets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!--  ref: https://github.com/httIsHere/notion-widget/blob/main/progress.html -->
<!--
 * @Author: httishere
 * @Date: 2021-08-13 09:37:29
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html {background-color:#ffffff; padding: 0;margin: 0;}
        .progress-group {width: 500px; margin: 0 auto; font-family: Verdana; height: 80vh; background: #ffffff;padding: 0;}
        #left {width: 100px;}

        #right {width: 100%;}
        li {list-style: none; width: 450px; height: 20px;border-radius: 20px; background: #f3f3f3; color: #ffffff;line-height:20px; overflow: hidden;}
        li div {background: #333333;height: 100%; width: 0;border-radius: 20px;font-size:12px;text-align:right; line-height: 20px;}
        li div span {padding-right: 10px; line-height: 20px;width: 100%;display: inline-block; box-sizing: border-box; text-align: right;}
        h2 {margin: 0; line-height: 30px;}
        .countdown {display: flex; justify-content: center; align-items: center;margin-bottom: 20px;}
        .countdown span {width: 50px; border-radius: 10px; border: 2px solid #333333; text-align:center; height: 50px;line-height: 50px; display: inline-block; margin: 0 20px; font-size: 24px;}
        .top {display: flex;}
        .progress-item {display: flex; align-items: center;margin-bottom: 10px;}
        .progress-item>span {font-size:12px;}
    </style>
</head>
<body>
    <ul class="progress-group">
        <div id="right">
            <div class="top">
                <div id="left">
                    <h2></h2>
                    <h2></h2>
                </div>
                <div id = "DM"></div>
                <div class="countdown">
                    <span id="hour"></span>:<span id="minute"></span>:<span id="second"></span>
                </div>
            </div>
            <div class="progress-item">
                <span>今年：</span>
                <li id="year"><div></div></li>
            </div>
            <div class="progress-item">
                <span>本月：</span>
                <li id="month"><div></div></li>
            </div>

            <div class="progress-item">
                <span>本周：</span>
                <li id="week"><div></div></li>
            </div>

        </div>
    </ul>
</body>
<script>
    let now_date = new Date();
    let _time = now_date.getTime();

    var weekday = new Array(7);
    weekday[0] = "Sun";
    weekday[1] = "Mon";
    weekday[2] = "Tue";
    weekday[3] = "Wed";
    weekday[4] = "Thu";
    weekday[5] = "Fri";
    weekday[6] = "Sat";

    // 周
    var today = new Date();
    var dayOfWeek = weekday[today.getDay()];
    document.getElementById('DM').innerHTML =
        `<h1 id = "dayOfWeek"> ${dayOfWeek}</h>`;
    let _day = now_date.getDay();
    _day = _day ? _day : 7;
    let _week = document.getElementById('week');
    _week.children[0].innerHTML = `<span>${_day} / 7</span>`;
    _week.children[0].style.width = `${_day*100 / 7}%`;

    // 月
    let todaymonth = Date.now()
    let now_month = now_date.getMonth();
    document.getElementById('left').children[0].innerHTML = now_month;
    let startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth()).getTime();
    let endOfMonth= new Date(new Date().getFullYear(), new Date().getMonth()+1, 0,23,59,59).getTime()
    let endOfMonthPerc = Math.round(( (todaymonth-startOfMonth)/(endOfMonth-startOfMonth)) *100);
    let _month = document.getElementById('month');

    _month.children[0].innerHTML = `<span> ${Math.ceil((todaymonth-startOfMonth)/86400000)} /${Math.ceil((endOfMonth-startOfMonth)/86400000)}</span>`;
    _month.children[0].style.width = `${endOfMonthPerc}%`;
    document.getElementById('left').children[1].innerHTML = `Month: ${endOfMonthPerc} %`;
    // 年
    let now_year = now_date.getFullYear();
    document.getElementById('left').children[0].innerHTML = now_year;
    let year_start = new Date(`${now_year}/1/1`).getTime();
    let _du = _time - year_start;
    let days = Math.ceil(_du / (24 * 60 * 60 * 1000));
    let total = now_year % 4 === 0 && now_year % 100 !== 0 ? 366 : 365;
    let _year = document.getElementById('year');
    let year_rate = days*100 / total;
    let year_text = year_rate <= 15 ? days : year_rate <= 30 ? `${days} / ${total}` : `${days} / ${total} (${(year_rate).toFixed(0)}%)`;
    _year.children[0].innerHTML = `<span>${year_text}</span>`;
    _year.children[0].style.width = `${days*100 / total}%`;
    document.getElementById('left').children[1].innerHTML = `${now_date.getMonth()+1}/${now_date.getDate()}`;


    // 倒计时
    setTime();
    setInterval(setTime, 1000);
    function setTime() {
        let _now = new Date();
        let hour = _now.getHours();
        let minutes = _now.getMinutes();
        let seconds = _now.getSeconds();
        document.getElementById('hour').innerHTML = hour < 10 ? `0${hour}` : hour;
        document.getElementById('minute').innerHTML = minutes < 10 ? `0${minutes}` : minutes;
        document.getElementById('second').innerHTML = seconds < 10 ? `0${seconds}` : seconds;
    }
</script>
</html>