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

最新推荐文章于 2022-03-20 20:27:12 发布

潜力股wjk

最新推荐文章于 2022-03-20 20:27:12 发布

阅读量1.4k

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_36413887/article/details/77816333

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

话不多说，直接贴代码

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

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

潜力股wjk

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javascript实现一个简单的页面倒计时功能

话不多说，直接贴代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <style type="text/css"> body { color:red; text-align: center; } .one{
复制链接

扫一扫