• Javascript:倒计时


       实现效果:

       在线演示地址:http://codepen.io/anon/pen/VLzgYO

       DEMO:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>倒计时:By @me-kevin</title>
    	<style type="text/css">
        *{margin: 0;padding: 0;}
        ul,li{list-style: none;}
        .goodsList{
        	 984px;
        	margin: 15px auto;
        }
        .unit{
        	display: inline-block;
        	float: left;
        	 220px;
        	padding: 10px;
            margin: 0 2px;
            border: 1px solid #e7e7e7;
        }
    
        .timer {
    	  height: 100px;
    	   100%;
    	  text-align: center;
    	  line-height: 100px;
    	  background-color: #9d55b8;
    	  color: #fff;
    	  font-size: 22px;
    	}
    
    
        .btn{
        	border: 0;
        	outline:0;
        	 100%;
        	margin: 5px 0;
        	height: 36px;
        	cursor: pointer;
        	line-height: 36px;
        	border-radius: 3px;
        	text-shadow:0 0 1px rgba(0,0,0,.3);
        	background-color: #56abe4;
        	color: #fff;
        }
    
    
    	</style>
    </head>
    <body>
    
    <div class="goodsList">
    	
    	<ul class="unit">
    		<li>June 17,2015 20:15:0</li>
    		<li><button class="btn">开始</button></li>
    		<li class="timer">剩余:00天01时00分00妙</li>
    	</ul>
    
    	<ul class="unit">
    		<li>June 17,2015 17:53:0</li>
    		<li><button class="btn">开始</button></li>
    		<li class="timer">剩余:00天01时00分00妙</li>
    	</ul>
    
    	<ul class="unit">
    		<li>June 17,2015 20:3:0</li>
    		<li><button class="btn">开始</button></li>
    		<li class="timer">剩余:00天01时00分00妙</li>
    	</ul>
    
    	<ul class="unit">
    		<li>June 17,2015 19:3:0</li>
    		<li><button class="btn">开始</button></li>
    		<li class="timer">剩余:00天01时00分00妙</li>
    	</ul>
    
    </div>
    
    
    <script type="text/javascript">
    	
    
    var ulArr=document.getElementsByTagName('ul');
    
    
    for(var i=0;i<ulArr.length;i++){
        ulArr[i].index=i;
    	counter(ulArr[i]);
    
    }
    
    function counter(aUl){
    
    	var aLi=aUl.getElementsByTagName('li');
        var timer=null; 
    
        aLi[1].onclick=function(){
    
        clearInterval( timer );
    
    	timer=setInterval(function(){
        var startTime=new Date();//开始时间
    	var endTime=new Date(aLi[0].innerHTML);//结束时间
    	var t = Math.floor((endTime - startTime)/1000);// 毫秒 -> 秒
    	
    	var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
    
    	// 天:Math.floor(t/86400)
    	// 时:Math.floor(t%86400/3600)
    	// 分:Math.floor(t%86400%3600/60)
    	// 秒:t%60
    
    	// 数字形式:new Date( 2013,4,1,9,48,12 );
    	// 字符串形式:new Date('June 10,2013 12:12:12');
    
    	// January、February、March、April、May、June、
    	// July、August、September、October、November、December
        
        if(t>=0){
           	aLi[2].innerHTML=str;	
           }else{
           	clearInterval( timer );//到达指定时间时,停止计数器
           	alert('计时已结束');
           }
       	
       },1000)
        
       }
    
    }
    
    </script>
    	
    </body>
    </html>
    

      

  • 相关阅读:
    Go语言学习之方法和接口
    Go语言学习之for循环
    Go语言学习之结构体
    Go语言学习之Map
    Go语言学习之值传递和引用传递解释And Go语言指针
    GO语言学习之切片(slice)
    GO语言学习之多维数组
    GO语言学习之数组
    GO语言学习之常用内置函数
    Oracle ORA28040报错解决
  • 原文地址:https://www.cnblogs.com/kevinCoder/p/4584037.html
Copyright © 2020-2023  润新知