main

分支 (5)

管理

管理

main

v2.0.1

v2.0

v1.3

v1.2

notion
/
progress.html

<!--
 * @Author: httishere
 * @Date: 2021-08-13 09:37:29
 * @LastEditTime: 2021-12-24 11:30:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /mobile-frontend-lanqb/Users/httishere/workspace/httishere/notion/progress.html
-->
<!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: 100vh; 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: 28px;}
        .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 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="week"><div></div></li>
            </div>
        </div>
    </ul>
</body>
<script>
    let now_date = new Date();
    let _time = now_date.getTime();
    // 周
    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 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>