js实现滚动时间倒计时

尘王爷

已于 2022-10-20 21:18:02 修改

阅读量663

点赞数

分类专栏：前端代码笔记文章标签： javascript css html

于 2022-10-20 21:16:49 首次发布

本文链接：https://blog.csdn.net/weixin_43420420/article/details/127434442

版权

本文通过JavaScript实现了一个滚动时间倒计时的功能。首先搭建基本的HTML和CSS框架，然后利用JavaScript获取当前时间作为起点，设定终点时间，计算两者之间的差值，将差值转换为天、时、分、秒并进行滚动展示。通过封装函数和延时调用来实现倒计时效果。

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

实现效果：

老样子，先搭建图形框架，第一个盒子里就是直接获取显示的时间，没做任何更改，第二个盒子里装的才是倒计时功能

    <div id="box1">
        <p></p>
    </div>

    <div id="box2">
        <p id="text">距离雯雯下次生日还有:</p>
        <div id="dayk"></div>
        <div id="hourk"></div>
        <div id="minutek"></div>
        <div id="secondk"></div>
    </div>

用css美化布局一下，这里用的flex实现居中

    html,
    body {
        margin: 0;
        padding: 0;
        /* 盒子内文字居中 */
        text-align: center;
        /* display 属性规定元素应该生成的框的类型。 */
        display: flex;
        /* 整个大盒子垂直居中 */
        justify-co