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

最新推荐文章于 2024-11-23 12:00:00 发布

原创最新推荐文章于 2024-11-23 12:00:00 发布 · 392 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

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

项目与应用专栏收录该内容

67 篇文章

订阅专栏

本文介绍了如何利用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);
timer = setInterval(djs, 1000);

function djs() {
    setT--; //每秒自减1
    minute = parseInt(setT / 60); //计算分钟数
    second = setT % 60; //计算秒数
    // console.log(minute, second);
    if (setT >= 60) { //时间多于一分钟
        clock.innerHTML = "剩余时间:" + minute + "分钟" + second + "秒";
        clock.style.color = "green";
    } else { //少于一分钟
        clock.innerHTML = "时间已不足" + minute + "分钟" + second + "秒!!!";
        clock.style.color = "red";
    }
    if (minute == 0 && second == 0) { //时间为0时清除定时器
        clock.innerHTML = "时间到!!!";
        clock.style.color = "white";
        clearInterval(timer);
    }
}

效果

在这里插入图片描述

2.设置一个时间差的倒计时

思路

1.设置一个未来的日期,得到这个目标日期与当前日期的差即时长(毫秒)
2.对时长取余得到天,时,分,秒
3.定时器中赋给标签的文本内容

代码

html

<div class="box">
    <div class="cont">距离结束时间还剩:</div>
    <div class="time">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>

css

* {margin: 0;padding: 0;}
.box {width: 600px;height: 300px;background: #000;margin: 0 auto;text-align: center;font-size: 35px;font-weight: 900;color: green;}
.cont,.time {width: 100%;height: 50%;line-height: 150px;}
.time {display: flex;}
p{width: 25%;height: 100%;}

js

var p = document.querySelectorAll("p");
setInterval(() => {
    var nowDate = new Date();//当前日期
    var now = nowDate.getTime();//当前日期距1970的毫秒数
    var str = "2021/7/1 00:00:00";//设置目标日期
    var endDate = new Date(str);//目标日期字符串变量转化为日期格式
    var end = endDate.getTime();//目标日期距1970的毫秒数
    var leftTime = parseInt((end - now) / 1000); //时间差(秒)
    var arrTime = [leftTime / 60 / 60 / 24, leftTime / 60 / 60 % 24, leftTime / 60 % 60, leftTime % 60];
    var strTime = ["天", "时", "分", "秒"];
    var arrBG = ["#7e3c3c", "#b84949", "#dc9393", "#fcb2b2"]
    for (var i = 0; i < p.length; i++) {
        p[i].innerHTML = parseInt(arrTime[i]) + strTime[i];
        p[i].style.backgroundColor = arrBG[i];
        p[i].style.color = "white";
    }
}, 1000);