• Web前端开发——新年倒计实时刷新

    大数据H5前端开发——新年倒计实时刷新

    H5（HTML5）前端开发是指使用HTML5、CSS3和JavaScript等技术进行网页和移动应用的开发。HTML5是最新的HTML标准，提供了丰富的语义化标签和功能，使得网页可以更加优雅和多样化。CSS3是用于样式表的升级版本，提供了更多的样式效果和布局控制能力。JavaScript是一种脚本语言，用于实现网页的交互和动态效果。

    H5前端开发常涉及的技术和工具包括：

    1. HTML5：使用语义化标签和新特性构建网页结构，如
      、
    2. CSS3：应用各种样式效果和布局技巧，如渐变、阴影、过渡、动画等。
    3. JavaScript：编写交互逻辑和动态效果，调用浏览器API实现动态操作和数据交互。
    4. 响应式设计：根据不同设备的屏幕大小和分辨率，适配并优化页面布局和显示。
    5. 移动端开发：利用HTML5开发移动应用，使用框架或库如React Native、Ionic等。
    6. 前端框架：使用流行的前端框架如React、Vue.js、Angular等提高开发效率和组件化开发。
    7. CSS预处理器：如Sass、Less等，增强CSS的编写和管理能力。
    8. 构建工具：使用构建工具如Webpack、Gulp等自动化构建、压缩、合并代码等。
    9. 前端调试工具：使用浏览器开发者工具进行代码调试和性能优化。
    10. 版本管理工具：使用Git等进行代码版本管理和团队协作。
      在H5前端开发中，需要做好网页的结构、样式和交互设计，并与后端开发人员配合完成数据交互和功能实现。同时也要保持对新技术的学习和更新，以应对不断变化的前端开发需求和趋势。

    我们实现一个新年倒计实时刷新，它会实时更新并显示距离下一年新年还有多少时间。
    实现效果截图：
    在这里插入图片描述

    以下是代码的详细解析：

    1.HTML 结构

    <div id="countdown"></div>

    • 1

    我们用一个 div 元素来存放倒计时的显示内容，这个 div 元素的 id 值为 countdown。

    2.JavaScript

    window.onload = function() {
    var dd = document.getElementById('countdown');

    function countDown() {
        // 获取当前时间
        var nowTime = new Date();
        // 获取下一年的年份
        var nextYear = nowTime.getFullYear() + 1;
        // 设置目标时间（下一年的 1 月 1 日 0 点 0 分）
        var inputTime = new Date(nextYear + "-1-1 0:0");
        // 计算距离目标时间的时间差，单位为秒
        var times = (inputTime - nowTime) / 1000;
        // 计算剩余天数
        var d = parseInt(times / (24 * 60 * 60));
        // 计算剩余小时数
        var h = parseInt(times / (60 * 60) % 24);
        // 计算剩余分钟数
        var m = parseInt(times / 60 % 60);
        // 计算剩余秒数
        var s = parseInt(times % 60);

        // 判断少于两位数的前面补 0
        d = d < 10 ? "0" + d : d;
        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;

        // 将计算结果显示在页面上
        dd.innerHTML = "距离" + nextYear + "年还剩" + d + "天" + h + "小时" + m + "分钟" + s + "秒";

        // 判断倒计时是否结束
        if (times <= 0) {
            clearTimeout(timer);
            dd.innerHTML = "倒计时结束";
        } else {
            setTimeout(countDown, 1000); // 每秒调用一次 countDown 函数
        }
    }

    countDown();
};


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    我们首先通过 window.onload 函数绑定页面加载完成后执行的事件，确保页面元素全部加载完毕后再执行 JavaScript 代码。

    在 countDown 函数中，首先获取当前时间和下一年的年份。然后，设置目标时间为下一年的 1 月 1 日 0 点 0 分，通过计算当前时间与目标时间之间的时间差，可以得到时间差的秒数，即 times 变量。

    接下来，通过计算 times 变量得出剩余天数、小时数、分钟数和秒数，并将不足两位数的数值前面补充一个 0，以确保每个时间单位都以两位数的方式显示

    最后，将计算出来的结果拼接成一段字符串，显示在页面上，并判断倒计时是否结束。如果倒计时结束，清除计时器并在页面上显示倒计时结束的信息。如果倒计时没有结束，每秒调用一次 countDown 函数，保证倒计时的实时更新。

    完整html代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="countdown"></div>

    <script>
        window.onload = function() {
            var dd = document.getElementById('countdown');

            function countDown() {
                var nowTime = new Date();
                var nextYear = nowTime.getFullYear() + 1;
                var inputTime = new Date(nextYear + "-1-1 0:0");
                var times = (inputTime - nowTime) / 1000; // 换算为秒数
                var d = parseInt(times / (24 * 60 * 60)); // 计算剩余天数
                var h = parseInt(times / (60 * 60) % 24); // 计算剩余小时
                var m = parseInt(times / 60 % 60); // 计算剩余分钟
                var s = parseInt(times % 60); // 计算剩余秒数

                d = d < 10 ? "0" + d : d;
                h = h < 10 ? "0" + h : h;
                m = m < 10 ? "0" + m : m;
                s = s < 10 ? "0" + s : s;

                dd.innerHTML = "距离" + nextYear + "年还剩" + d + "天" + h + "小时" + m + "分钟" + s + "秒";

                // 判断倒计时是否结束
                if (times <= 0) {
                    clearTimeout(timer);
                    dd.innerHTML = "倒计时结束";
                } else {
                    setTimeout(countDown, 1000); // 每秒调用一次countDown函数
                }
            }

            countDown();
        };
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    在这里插入图片描述

    function countDown() { … }: 定义countDown函数，负责计算和显示倒计时。
    var nowTime = new Date();: 获取当前日期和时间。
    var nextYear = nowTime.getFullYear() + 1;: 计算下一年的年份。
    var inputTime = new Date(nextYear + “-1-1 0:0”);: 创建一个新的日期对象，表示下一年的1月1日。
    计算当前时间与下一年1月1日之间的时间差。
    countDown();: 当窗口加载完成时调用countDown函数，以启动倒计时。
    总结：

    倒计时以以下格式显示：“距离[下一年]年还剩[天]天[小时]小时[分钟]分钟[秒]秒”。
    日期对象：

    new Date(): 用于创建日期对象，获取当前日期和时间。
    对日期对象的操作，例如获取年份、月份、小时等。

    总体而言，这个小项目主要集中在前端开发，使用了基本的网页开发技术，通过JavaScript实现了倒计时功能。这种类型的倒计时器通常用于网页上的交互元素，为用户提供一种有趣的方式来了解剩余的时间。

  • 相关阅读:
    linux：需要注意docker和aws的rds的mysql默认是UTC而不是中国时区
    shell快速启动tomcat集群
    HackTheBox-Starting Point--Tier 2---Archetype
    Mac快速配置ADB环境变量
    Hello Playwright：(2)简化部署方式
    Java | 排序内容大总结
    【C语言】栈的实现
    【Nginx】nginx 解决504超时问题
    逻辑回归(Logistic Regression)
    海藻酸-磷脂微囊复合水凝胶/具有细胞膜仿生温敏性水凝胶的相关内容
  • 原文地址：https://blog.csdn.net/Myx74270512/article/details/133944263