js 实现周末倒计时

js 实现周末倒计时

思路: 要计算距离周末时间, 需要知道距离周末剩余多少毫秒, 可以获取周末到该天的整天毫秒数, 减去今天过去的毫秒数, 就是剩余的毫秒

  1. 获取 dom

    1
    let $ = selector => document.getElementsByClassName(selector)[0]; // class选择器

  2. 获取距离周末还剩多少毫秒

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function getLastTimes() {
        let now = +new Date;  // 获取当前时间戳
        let date = new Date();
        let nowDay = date.getDay(); // 获取当前是一周的第几天
        if (nowDay >= 6 || nowDay === 0) {   // 周末
            return render(["00", "00", "00", "00"]);
        }
        let lastTimes = (6 - nowDay) * 24 *3600 * 1000; // 剩余的 整天 毫秒数
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0); // 设置当天 0 点, 获取毫秒值
        let oneDaySpendTimes = now - date.getTime(); // 当天的过去了多少毫秒值
        let last = lastTimes - oneDaySpendTimes;  // 这周距离周末还剩多少毫秒值
        return last;
    }

  1. 根据剩余毫秒数转换时间

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function startComputed() {
        let last = getLastTimes();
        if (!last) return;
        let day = Math.floor(last / (1000 * 3600 * 24)); // 获取天数
        let lastDay = last - day * 1000 * 3600 * 24;
        let hours = Math.floor(lastDay / (1000 * 3600));  // 获取小时
        let lastHours = lastDay - hours * 1000 * 3600;
        let minutes = Math.floor(lastHours / (1000 * 60)); // 获取分钟
        let lastMinutes = lastHours - minutes * 1000 * 60;
        let seconds = Math.floor(lastMinutes / 1000);  // 获取秒
        render([fix(day), fix(hours), fix(minutes), fix(seconds)]);
    }

  1. 按需渲染 dom, 优化

    1
    2
    3
    4
    5
    6
    7
    8
    function render(timeArr) {
        const keys = Object.keys(timeChange);
        keys.forEach((v, i) => {
            // timeChange 赋值 timeArr 当变化后修改 timeChange 原先的值为当前时间并进行 innerHTMl
            (timeChange[v] !== timeArr[i]) && (timeChange[v] = timeArr[i]) && ($date[i].innerHTML = timeArr[i]);
        })
        return false;   // 返回 false 终结函数执行
    }