简易新年倒计时的js部分

最新推荐文章于 2024-01-04 11:19:27 发布

cjjjg123

最新推荐文章于 2024-01-04 11:19:27 发布

阅读量700

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/cjjjg123/article/details/128179383

博主分享了在学习JavaScript过程中制作的简易新年倒计时的JS代码，尽管成品简单，仅实现动态显示距新年时间。未来计划复习HTML和CSS以优化此功能。JS学习笔记将整理后于次日上传至优快云社区。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为前面HTML和CSS学的不扎实，在学习JS的过程中前面的一些知识点已经有所遗忘了，所以这里是我参考GitHub中所给代码完成的简易新年倒计时的js部分。代码如下：

<!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>
</head>
<body>
    <script>
    window.onload = function () {//加载
    var child = document.querySelector(".child");//用选择器获取函数
    var date = new Date("2023-01-21");//新年时间
    var futureTime = date.getTime();//获取新年时间的毫秒数
    var xin = setInterval(function () {//定时器
        var today = new Date();//当前时间
        var todayTime = today.getTime();
        var cha = futureTime - todayTime;//时间差
        var sec = parseInt(cha / 1000 % 60);
        var min = parseInt(cha / 1000 / 60 % 60);
        var hour = parseInt(cha / 1000 / 60 / 60 % 24);
        var day = parseInt(cha / 1000 / 60 / 60 / 24);//一天24小时，一小时60分钟，一分钟60秒，一秒1000毫秒
        child.innerHTML = `距离新年还有${day}天${hour}小时${min}分钟${sec}秒`;//用` `符号，不是' ';

    }, 1000);
}
    </script>
    <!--1. 新年倒计时-->
    <div class="box">
    <h1>新年倒计时</h1>
    <div class="child"></div>
</div>
</body>
</html>

代码比较简陋，所以最后的成果也比较简陋，只是实现了能让其实时显示距离新年时间的功能。成果图如下：