1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > html倒计时代码执行操作 JS倒计时两种实现方式代码实例

html倒计时代码执行操作 JS倒计时两种实现方式代码实例

时间:2022-07-31 12:02:54

相关推荐

html倒计时代码执行操作 JS倒计时两种实现方式代码实例

最近做浏览器界面倒计时,用js就实现,两种方式:

一:设置时长,进行倒计时。比如考试时间等等

代码如下:

简单时长倒计时

var maxtime = 60 * 60; //一个小时,按秒计算,自己调整!

function CountDown() {

if (maxtime >= 0) {

minutes = Math.floor(maxtime / 60);

seconds = Math.floor(maxtime % 60);

msg = "距离结束还有" + minutes + "分" + seconds + "秒";

document.all["timer"].innerHTML = msg;

if (maxtime == 5 * 60)alert("还剩5分钟");

--maxtime;

} else{

clearInterval(timer);

alert("时间到,结束!");

}

}

timer = setInterval("CountDown()", 1000);

运行结果:

二:设置时间戳,进行倒计时。比如距离活动结束时间等等

代码如下:

js简单时分秒倒计时

function countTime() {

//获取当前时间

var date = new Date();

var now = date.getTime();

//设置截止时间

var str="/5/17 00:00:00";

var endDate = new Date(str);

var end = endDate.getTime();

//时间差

var leftTime = end-now;

//定义变量 d,h,m,s保存倒计时的时间

var d,h,m,s;

if (leftTime>=0) {

d = Math.floor(leftTime/1000/60/60/24);

h = Math.floor(leftTime/1000/60/60%24);

m = Math.floor(leftTime/1000/60%60);

s = Math.floor(leftTime/1000%60);

}

//将倒计时赋值到div中

document.getElementById("_d").innerHTML = d+"天";

document.getElementById("_h").innerHTML = h+"时";

document.getElementById("_m").innerHTML = m+"分";

document.getElementById("_s").innerHTML = s+"秒";

//递归每秒调用countTime方法,显示动态时间效果

setTimeout(countTime,1000);

}

00

00

00

00

运行结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。