Javascript实现一个简单的页面倒计时功能

话不多说,直接贴代码


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

第一次写完测试的时候,发现时间到了之后页面一直不断弹出提示框,后面百度了下发现每调用一次setInterval周期性调用函数就要设置一次clearInterval来关闭,于是通过设置flag来实现;最终代码如上所示。运行结果如下:
Javascript实现一个简单的页面倒计时功能_第1张图片
时间到:
Javascript实现一个简单的页面倒计时功能_第2张图片

你可能感兴趣的:(Javascript)