原生js 当前时间 倒计时代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js 当前时间 倒计时代码相关的知识,希望对你有一定的参考价值。

源:https://www.oschina.net/code/snippet_2318153_54763

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>原生js 当前时间 倒计时代码</title>
    <style>
    *{margin:0;padding:0;}
    body{text-align:center;}
    .text{margin-top:150px;font-size:14px;}
    </style>
    <script>
        window.onload=function(){           
           getMyTime();  
           getMyTime1();    
        }
        //1.前面补0
        function p(n){
            return n<10?‘0‘+n:n;
        }
        //2.倒计时
        function getMyTime(){           
            var startDate=new Date();
            var endDate=new Date(‘2017/4/17 11:15:00‘);
            var countDown=(endDate.getTime()-startDate.getTime())/1000;
            var day=parseInt(countDown/(24*60*60));
            var h=parseInt(countDown/(60*60)%24);
            var m=parseInt(countDown/60%60);
            var s=parseInt(countDown%60);                
            document.getElementById(‘time‘).innerHTML=day+‘天‘+p(h)+‘时‘+p(m)+‘分‘+p(s)+‘秒‘;
            setTimeout(‘getMyTime()‘,500);
            if(countDown<=0){
              document.getElementById(‘time‘).innerHTML=‘活动结束‘; 
            }              
        }
        //3.当前时间
        function getMyTime1(){
            var myDate=new Date();
            var year=myDate.getFullYear();
            var month=myDate.getMonth()+1;
            var day=myDate.getDate();
            var week=myDate.getDay();
            var array=[‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘,];
            var hour=myDate.getHours();
            var minute=myDate.getMinutes();
            var second=myDate.getSeconds();
            document.getElementById(‘time1‘).innerHTML=year+‘年‘+month+‘月‘+day+‘日‘+‘&nbsp;‘+array[week]+‘&nbsp;‘+p(hour)+‘:‘+p(minute)+‘:‘+p(second);
            setTimeout(‘getMyTime1()‘,500);
        }
    </script>
</head>
<body>
    <div class="text">
       <p>倒计时间:<span id="time"></span></p>
       <p>当前时间:<span id="time1"></span></p> 
    </div>
</body>
</html>

 

以上是关于原生js 当前时间 倒计时代码的主要内容,如果未能解决你的问题,请参考以下文章

如何实现React原生倒计时圈

原生js实现倒计时

js实现拍简单倒计时功能

js倒计时代码还剩多少天

原生js倒计时

原生js处理倒计时小实例