js案例——倒计时

最新推荐文章于 2023-09-08 11:48:28 发布

masichen22

最新推荐文章于 2023-09-08 11:48:28 发布

阅读量499

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/masichen22/article/details/128045632

版权

本文介绍了如何使用JavaScript实现倒计时效果，通过设置定时器更新显示，利用innerHTML修改DOM元素内容，结合CSS进行样式设置。同时指出首次执行时可能存在的空白问题，建议采用封装函数的解决方案。

摘要由CSDN通过智能技术生成

效果：

（实际为动态）

代码思路：

1.倒计时是不断变化的，因此用定时器 ( setInterval )；
2.span存放数据和单位，nth-of-type(even)选择父元素下的偶数个子元素；
3.利用innerHTML在span中存放数据；
4.第一次执行也是间隔毫秒数，因此刷新页面会有空白；
5.最好采取封装函数的方法。

html:

<div>
        <h4>距离2023年还有</h4>
        <span class="day"></span>
        <span>天</span>
        <span class="hour"></span>
        <span>时</span>
        <span class="minute"></span>
        <span>分</span>
        <span class="second"></span>
        <span>秒</span>
    </div>

css: