javascript实现简单页面倒计时

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

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

话不多说，直接贴代码

									<!DOCTYPE html>

									<html>

									<head>

									 <meta charset="utf-8">

									 <style type="text/css">

									  body

									  {

									   color:red;

									   text-align: center;

									  }

									  .one{

									   color:black;

									   text-align:center;

									  }

									 </style>

									</head>

									<body>

									<p>

									 日期倒计时<br>

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

									</p>

									<form name="form1">

									 <input type="text" id="a" size=1 name="a">年

									 <input type="text" id="b" size=1 name="b">月

									 <input type="text" id="c" size=1 name="c">日

									 <input type="text" id="d" size=1 name="d">时

									 <input type="text" id="e" size=1 name="e">分

									 <input type="text" id="f" size=1 name="f">秒

									 <br>

									 <div id="time" value="时间"></div> 

									 <script>

									  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.onload=function(){  

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

									  }

									 </script>

									 <input type="button" value="倒计时" onclick="leftTime()">:

									 距离目标日期还有：

									 <input type="text" id="cha" >

									 <script> 

									 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;

									 }

									 } 

									 </script>

									</form> 

									</body>

									</html>