JS倒计时两种实现方式代码实例

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

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

代码如下:

<html>

<head>

<meta charset="UTF-8">

<title>简单时长倒计时</title>

<SCRIPT type="text/javascript">

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);

</SCRIPT>

</head>

<body>

<div id="timer" style="color:red"></div>

<div id="warring" style="color:red"></div>

</body>

</html>

运行结果:

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

代码如下:

<html>

<head>

<meta charset="UTF-8">

<title>js简单时分秒倒计时</title>

<script type="text/javascript">

function countTime() {

//获取当前时间

var date = new Date();

var now = date.getTime();

//设置截止时间

var str="2017/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);

}

</script>

</head >

<body onload="countTime()" >

<div>

<span id="_d">00</span>

<span id="_h">00</span>

<span id="_m">00</span>

<span id="_s">00</span>

</div>

</body>

</html>

运行结果:

以上是 JS倒计时两种实现方式代码实例 的全部内容, 来源链接: utcz.com/z/341656.html

回到顶部