倒计时网页代码 网页倒计时计时器)
大家好,小宜来为大家讲解下。倒计时网页代码,网页倒计时计时器)这个很多人还不知道,现在让我们一起来看看吧!
一、倒计时的原理
1、倒计时是指在指定的时间(比如设置的一段时间或某一特定的日期或时间点)之前之后,网页上显示文字或图片,可以用来做活动开始倒计时,或活动进行倒计时,也可以用来显示未来某一时间点的倒计时。
2、倒计时的实现:通过JavaScript把当前日期的毫秒数减去用户设定的毫秒数,从而得到剩余的毫秒数。然后利用这个当前毫秒数来计算出剩余的天数,小时数,分钟数和秒数,最后将当前的日期的秒数与用户设置的秒数相减,以及显示用户设置的秒数之前的时间,就像赛跑中的倒计时一样。
二、实现倒计时网页代码
1、首先获取页面显示时间所需要用到的时间段,比如可以用js获取当前时间(如下代码):
var now = new Date(); // 获取当前时间
2、然后设置未来日期,然后计算出两个时间段之间的时间差:
var endTime = new Date(\"2020/07/23 10:00:00\");
var diff = endTime.getTime() - now.getTime(); // 获得两个时间段的时间差
3、然后将时间差进行单位换算:
/*得到的时间差,要进行ms -> s的转换,再进行整数部分和小数部分的分离*/
var intDiff = parseInt(diff / 1000); // 将毫秒数换算成秒数
var day=0, hour=0, minute=0, second=0; // 声明值
if(intDiff > 0){
// 大于0的话可以获取天数和小时
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
4、最后将倒计时显示到页面上,可以使用HTML和CSS,也可以使用JavaScript:
//显示时间的DIV
var showTime=document.querySelector(\"#time\");
//显示倒计时的JS
function countDown(){
if (second <= 0) {
second = 59;
minute = minute - 1;
if (minute <= 0) {
minute = 59;
hour = hour - 1;
if (hour <= 0) {
hour = 59;
day = day - 1;
}
}
}
else {
second = second - 1;
}
showTime.innerHTML=day+\"天 \"+hour+\"小时 \"+minute+\"分 \"+second+\"秒\";
}
setInterval(countDown,1000);
5、定时执行倒计时函数:
setInterval(countDown,1000); // 每隔1000毫秒执行一次
六、结语
倒计时网页代码主要通过JavaScript取得当前日期的毫秒数,算出距离指定日期剩余的毫秒数,再把它转化成 天数,小时,分钟,秒 并显示在页面上,最后通过定时器定时执行倒计时函数就可以实现倒计时的功能了。
1.引入需要的javaScript组件:
首先需要引入需要的javascript组件来创建倒计时网页,例如jQuery、setTimeout()、clearTimeout()函数等, 以此来保证网页的顺利运行。
2.定义倒计时函数:
定义倒计时函数,该函数会接受倒计时总时长、当前时间(即网页首次加载时event.timeStamp),以及倒计时dom对象,然后通过设置setTimeout函数周期性的更新倒计时dom对象来实现倒计时显示效果。
3.绑定倒计时触发事件:
当需要更新倒计时dom对象时,可以绑定onload事件,这样可以省去使用多一个变量来记录当前网页加载的时间,也减少了对其他页面依赖。在页面开始倒计时之前,可以先做一些预处理,比如把倒计时dom对象中的时间信息做计算处理,获取最新的时间信息等。
4.更新倒计时dom对象信息:
最后,在倒计时函数中,计算离倒计时结束的剩余时间,并更新倒计时dom对象信息(可以根据实际需求使用不同的时间表示形式,如时分秒等)。
5.清除倒计时函数:
倒计时功能完成之后,为了保持页面的运行效率,可以使用clearTimeout函数停止倒计时函数,以此来取消定时器行为,避免资源的浪费。
本文倒计时网页代码,网页倒计时计时器)到此分享完毕,希望对大家有所帮助。