2021-07-30

2024-03-20 22:42:40

倒计时的实现

倒计时是web开发中常见的组件，请完成second和render两个函数，完成倒计时的显示部分
1、 second函数的输入为整数，返回 { day: Int, hour: Int, min: Int, second: Int }
2、 render函数的输入为second函数的输出，将数据在页面对应的DOM元素上显示出来，格式如html所示
3、如果day为0，隐藏对应的DOM元素，否则显示（请直接使用已经实现的css代码）
4、数值不足两位，前面补充0

<!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>倒计时实现</title>
</head>
<body>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <script>
        function second(second) { //second是毫秒数
            return { 
                //结果返回一个包含天，时，分，秒的对象
                day: Math.floor(second / 24 / 60 / 60 / 1000),
                hour: Math.floor(second / 60 / 1000 % 24),
                min: Math.floor(second / 60 / 1000 % 60),
                second: Math.floor(second / 1000 % 60)
            }
        }

        function render(data) { //data是second函数的输出结果作为参数传给render函数的
            // console.log(data);
            let spanList = document.getElementsByTagName("span");
            // 这里作判断：大于一天和不足一天的情况
            if (data.day > 0) { // 天
                spanList[0].innerText = (data.day < 9 ? "0" + data.day : data.day) + "天";
            } else {
                spanList[0].classList.add("hide");
            }
            // 注意，这里使用slice方法截取字符串(从倒数第二位开始截取,截两位)，不然时、分、秒会出现如"012"这样的，显然不是我们要的!
            spanList[1].innerText = ("0" + data.hour).slice(-2) + ":"; // 时
            spanList[2].innerText = ("0" + data.min).slice(-2) + ":"; // 分
            spanList[3].innerText = ("0" + data.second).slice(-2); // 秒
        }

        // 测试一下
        setInterval(() => {
            let date = new Date();
            let dateData = date.getTime(); //1970年至今的毫秒数

            let date2 = new Date();
            date2.setFullYear(2021, 11, 31); //设置年月日
            date2.setHours(23, 59, 59); //设置时分秒
            let date2Data = date2.getTime(); //1970年至2021年的毫秒数

            let resultData = date2Data - dateData; //差值就是倒计时的时间
            // 判断倒计时是否结束
            if (resultData == 0) { 
                return;
            } else {
                render(second(resultData));
            }
        }, 1000);
    </script>
</body>
</html>

码农公寓

倒计时的实现

相关文章