js实现html页面倒计30秒,javascript实现简单页面倒计时

这篇文章主要为大家详细介绍了javascript实现简单页面倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了javascript实现简单页面倒计时的具体代码，供大家参考，具体内容如下

话不多说，直接贴代码

body

{

color:red;

text-align: center;

}

.one{

color:black;

text-align:center;

}

日期倒计时

请输入目标日期并点击按钮，实现目标日期的倒计时！

年

月

日

时

分

秒

function getdate(clock){

var now=new Date();

var y=now.getFullYear()

var m=now.getMonth()

var d=now.getDate()

var day=now.getDay()

var h=now.getHours()

var minu=now.getMinutes()

var s=now.getSeconds()

m+=1;

var array=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")

var nowtime=y+"年"+m+"月"+d+"日 "+array[day]+" "+h+"时"+minu+"分"+s+"秒";

clock.innerHTML="当前时间："+nowtime;

}

window.οnlοad=function(){

window.setInterval("getdate(time)",1000)

}

:

距离目标日期还有：

var flag=1;var t;

function leftTime(){

if(flag==0){flag=1;}

year=document.getElementById("a").value;

month=document.getElementById("b").value;

day=document.getElementById("c").value;

hour=document.getElementById("d").value;

minute=document.getElementById("e").value;

second=document.getElementById("f").value;

var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date());

//计算剩余的毫秒数

if(leftTime>0){

var days = parseInt(leftTime/1000/60/60/24,10); //计算剩余的天数

var hours = parseInt(leftTime/1000/60/60%24,10); //计算剩余的小时

var minutes = parseInt(leftTime/1000/60%60,10);//计算剩余的分钟

var seconds = parseInt(leftTime/1000%60,10);//计算剩余的秒数

document.getElementById("cha").value=days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";

}

else{

document.getElementById("cha").value="0天0小时0分0秒";

alert("主人，时间到啦！")

flag=0;clearInterval(t);

}

if(flag==1){

t=setInterval("leftTime()",1000);

flag=2;

}

}

第一次写完测试的时候，发现时间到了之后页面一直不断弹出提示框，后面百度了下发现每调用一次setInterval周期性调用函数就要设置一次clearInterval来关闭，于是通过设置flag来实现；最终代码如上所示。运行结果如下：

时间到：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持炫H5(xyhtml5.com)。