Blogger Information
Blog 34
fans 0
comment 0
visits 39109
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jq清明倒计时——五期线上培训——2019-4-1
黄健的博客
Original
567 people have browsed it

实例

<!DOCTYPE html>
<html>
<head>
	<title>倒计时</title>
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
	<!-- <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script> -->
	<style type="text/css">
	*{margin: 0;padding: 0;}
       div{
       	font-size: 36px;
       	width: 1300px;
       	height: 180px;
       	margin: 100px auto;
       	background: #82d743;
       	line-height: 180px;
       	text-align: center;
       	color: #fff;
       }
	</style>		
</head>
<body>
	<div>
		<p>2019年清明节倒计时 :<span id="span"> </span></p>
    </div>
    </body>
    </html>
    <script>

        
            function Ro(){
               var  d=Date.parse("Apr 05,2019"); //时间戳 毫秒数
               var date=new Date()//获得当前时间
     	        var dd=date.getTime()//getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数

                // 1秒等于1000毫秒,1分钟等于60秒,一小时=60分钟等于3600秒,一天24小时=86400秒
                 var rd=Math.floor((d-dd)/1000)//得到总的秒数;
     	        var days=Math.floor(rd/86400)//得到天数

                 var hours=Math.floor(rd%86400/3600)//取余以后就是不到一天的秒数, 再除以3600就是小时数
                    var minus=Math.floor(rd%3600/60)//拿到分钟
                    var secos=Math.floor(rd%60)//拿到秒钟

                    document.querySelector("#span").innerText=days+"天"+hours+"小时"+minus+"分钟"+secos+"秒";
                    // $('span').text(days+"天"+hours+"小时"+minus+"分钟"+secos+"秒")
               console.log(rd);
            }
            
            setInterval(Ro,1000);
        
    </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

    获取清明节的时间毫秒数,再获取当前时间的毫秒数。两个相减除以1000,获取相差总毫秒数,再取模86400

    得到天数,取模86400在除以3600得到小时数;

    %3600/60 分钟数

    %60 秒数


最后再使用定时器调用函数,就ok


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post