zoukankan      html  css  js  c++  java
  • js倒计时,距离某个时间的倒计时。

    说到倒计时,是不是也就只会写获取验证码60s倒计时,在往上是不是脑力感觉不够用,身体好像被掏空了。直接看代码,让你好代码也好。

    1、

    <!Doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>倒计时</title>
    <script type="text/javascript">
       function GetRTime(){
           var EndTime= new Date('2017/08/12 16:00:00'); //截止时间 
           var NowTime = new Date();
           var t =EndTime.getTime() - NowTime.getTime();
           var d=Math.floor(t/1000/60/60/24);
           var h=Math.floor(t/1000/60/60%24);
           var m=Math.floor(t/1000/60%60);
           var s=Math.floor(t/1000%60);
           document.getElementById("t_d").innerHTML = d + "天";
           document.getElementById("t_h").innerHTML = h + "时";
           document.getElementById("t_m").innerHTML = m + "分";
           document.getElementById("t_s").innerHTML = s + "秒";
       }
       setInterval(GetRTime,1000);
    </script>
    </head>
    <body>
        <div id="CountMsg" class=HotDate>
            <span id="t_d"></span>
            <span id="t_h"></span>
            <span id="t_m"></span>
            <span id="t_s"></span>
        </div>
     
    </body>
    </html>
    

      简单点的倒计时出来了

    2

     来写一个这样的

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>倒计时</title>
    <style type="text/css">
    *{
    	font-style: normal;
    }
     .time{
    	display: inline-block;
    	margin-left: 20px;
    	/*padding-top: 6px;*/
    }
    .time i{
    	background-color: #333;
    	display: inline-block;
    	 20px;
    	height: 20px;
    	margin-left: 3px;
    	color: #fff;
    	border-radius: 2px;
    	text-align: center;
    	line-height: 20px;
    }
    </style>
    </head>
    <body>
        <div class="time" ectype="time">
    		<span>本场还剩   </span>
    		<span class="hours"></span>
    		<em>:</em>
    		<span class="minutes"></span>
    		<em>:</em>
    		<span class="seconds"></span>
    	</div> 
     
    </body>
    <script src="http://huo1.wordhuo.com/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	timeFun();
    	
    	function timeFun(){
    		var data="";
    		var TIMER;
    			data=2017;
    			reflash();
    		
    		 function reflash(){
    			data--;
    			var d=parseInt(data/60/60/24);
    	       var h=parseInt(data/60/60%24);
    	       var m=parseInt(data/60%60);
    	       var s=parseInt(data%60);
    						
    			$(".time").find(".days").html(nol(d));
    			$(".time").find(".hours").html(nol(h));
    			$(".time").find(".minutes").html(nol(m));
    			$(".time").find(".seconds").html(nol(s));
    		};
    		TIMER = setInterval( reflash,1000 );
    		 function nol(h){
    			if(h<0){
    				h='<i>0</i>'+'<i>0</i>';
    			}else if(h<10){
    				h='<i>0</i>'+'<i>'+h+'</i>';
    			}else{
    				var sty=h.toString()
    				h='<i>'+sty.charAt(0)+'</i>'+'<i>'+sty.charAt(1)+'</i>'
    			}
    			return h;
    		}
    	}
    </script>
    </html>
    

      

  • 相关阅读:
    在dubbo的一端,看Netty处理数据包,揭网络传输原理
    解惑:什么叫模型?
    拜托!不要再问我是否了解多线程了好吗
    微软职位内部推荐-Senior SW Engineer for Application Ecosystem
    微软职位内部推荐-Senior Software Engineer
    微软职位内部推荐-Senior Software Engineer_Azure
    微软职位内部推荐-Software Engineer II
    微软职位内部推荐-Senior Software Engineer
    微软职位内部推荐-Software Engineer II
    微软职位内部推荐-Senior Software Engineer
  • 原文地址:https://www.cnblogs.com/zshno1/p/6913903.html
Copyright © 2011-2022 走看看