2021-06-25 使用时间函数实现倒计时效果

最新推荐文章于 2022-02-08 18:14:10 发布

原创

最新推荐文章于 2022-02-08 18:14:10 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #时间函数 #JS #javascript #html

本文介绍了如何利用JavaScript实现两种倒计时效果：一是设置固定时长的倒计时，通过设置一个秒数变量并每秒递减来显示剩余时间；二是设置一个未来日期，计算与当前日期的时间差，动态更新天、时、分、秒显示。详细代码包括HTML、CSS和JS部分。

1.设置一个时长的倒计时

思路

设置一个数字变量,单位是秒,变量取余得到剩余的分和秒,定时器中此变量每秒自减

代码

html

<div class="box">
    <div class="clock"></div>
</div>

css

.box {
   
   
    width: 600px;
    height: 300px;
    background: #000;
    margin: 0 auto;
}

.clock {
   
   
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 300px;
    font-size: 35px;
    font-weight: 900;
}

js

var box = document.querySelector(".box");
var clock = document.querySelector(".clock");

var setT = 0 * 60 + 5; //设置一个时间长度
var minute, second;
var timer = '';
clearInterval(timer)