js使用时间日期函数做简单的页面时钟显示和倒计时

js使用时间日期函数做简单的页面时钟显示和倒计时

在开发中或是日常小项目中，时间函数及定时器的使用还是比较广泛的，这里写个小案例结合setInterval()定时器和new Date()时间日期函数，主要使用js进行案例的实现

1.日期时间函数的声明

let date = new Date(); // 可获得当前的时间 
console.log(date);  // Fri Dec 18 2020 23:49:04 GMT+0800 (中国标准时间)

date.getTime(); //从1970年1月1日00:00:00开始计算的毫秒数

2.日期时间函数常用的方法

date.getDate()     //获取日（1-31） 
date.getDay()     // 获取星期（0-6） 注意：从零开始 获取显示记得加1
date.getMonth()    // 获取月（0-11） 注意：从零开始 获取显示记得加1
date.getFullYear()  //获取完整年份  例如：2020
date.getHours()     //获取小时（0-23）注意：从零开始
date.getMinutes()    //获取分钟（0-59）注意：从零开始
date.getSeconds()    //获取秒（0-59）注意：从零开始
date.getMilliseconds() //获取毫秒（当前）
date.getTime()       //返回累计毫秒数

3.时钟及倒计时案例

（1）HTML

<div class="box">
   <ul id="clock">
     <li class="time">0</li>
     <li class="time">0</li>
     <li class="dot">:</li>
     <li class="time">0</li>
     <li class="time">0</li>
     <li class="dot">:</li>
     <li class="time">0</li>
     <li class="time">0</li>
   </ul>
   <div class="tip">
       <div>距离2021年还有</div>
       <div class="tipDay"></div>
   </div>
</div>

（2）css

        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 100%;
            height: auto;
            background-image: linear-gradient(to bottom, red, yellow);
        }
        #clock {
            padding: 20px;
            margin: auto;
            list-style: none;
            display: flex;
            width: 500px;
        }
        #clock li {
            margin: 5px;
            text-align: center;
            line-height: 80px;
        }

        #clock .time {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans- serif;
            width: 50px;
            height: 80px;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            border: 3px solid rgba(201, 194, 194, 0.3);
            color: blanchedalmond;
        }

        .tip {
            width: 100%;
            height: auto;
            padding: 20px 60px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
        }

        .tipDay {
            margin-right: 200px;
        }

（3）js

        // 数字补 ‘0’函数  
        // number为传入的数字 
        // 判断数字是否为两位：非两位拼接字符串 "0",两位拼接字符串 "",函数返回的类型为字符串
        function addZero(number) {
            return (number < 10 ? "0" : "") + number
        }
        function fn() {
            let clockArr = document.querySelectorAll("#clock li:not(.dot)"); // 获取节点数组
            let countDown = document.querySelector(".tipDay");
            let nowDay = new Date();//当前时间
            let targetDay = new Date("2021-1-1 00:00:00");// 自定义设置目标时间 例如"2022-2-2 00:00:00"
            let time = targetDay - nowDay;
            let d = parseInt(time / 1000 / 60 / 60 / 24); //倒计时天
            let h = parseInt(time / 1000 / 60 / 60 % 24);//倒计时小时 取天数的余为剩余小时
            let m = parseInt(time / 1000 / 60 % 60); //倒计时分钟凭 取小时的余为剩余分钟
            let s = parseInt(time / 1000 % 60); //倒计时秒  取分钟的余为剩余秒
            let clockH = addZero(nowDay.getHours()); //使用时间日期函数的方法直接取得当前时间的小时值
            let clockM = addZero(nowDay.getMinutes());//使用时间日期函数的方法直接取得当前时间的分钟值
            let clockS = addZero(nowDay.getSeconds());//使用时间日期函数的方法直接取得当前时间的秒数值
            let clockStr = clockH + clockM + clockS; //拼接的当前时间字符串
            // 补 ‘0’操作
            d = addZero(d);//d:Number -> String 非两位补零，数字类型转换为字符串类型
            h = addZero(h);//h:Number -> String 非两位补零，数字类型转换为字符串类型
            m = addZero(m);//m:Number -> String 非两位补零，数字类型转换为字符串类型
            s = addZero(s);//s:Number -> String 非两位补零，数字类型转换为字符串类型
            // 时钟显示--对当前时间字符串进行循环 取得字符串每一位对应赋值给节点数组的每一位
            for (let i = 0; i < clockStr.length; i++) {
                clockArr[i].innerHTML = clockStr[i]
            }
            //倒计时显示 
            countDown.innerHTML = `<b>${d}</b> 天 <b>${h}</b> 小时 <b>${m}</b> 分钟 <b>${s}</b> 秒`
        }
        // 执行
        fn(); //进入页面或刷新页面先执行fn（）函数 
        setInterval(fn, 1000);//定时器 时间间隔为 1000 ms = 1 s  每隔1s调用一次fn()函数，进行DOM赋值操作