zoukankan      html  css  js  c++  java
  • jquery倒计时插件可自定义多个倒计时间

    jquery倒计时插件设置多个自定义倒计时时间,任意设置天、小时、分钟、秒倒计时间功能。

    查看演示>>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery倒计时插件可自定义多个倒计时间展示</title>
    <meta name="description" content="jquery倒计时插件设置多个自定义倒计时时间,任意设置天、小时、分钟、秒倒计时间功能。jQuery下载。" />
    <script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    	countDown("2014/8/10 23:59:59","#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second");
    	countDown("2014/8/10 22:59:59",null,"#demo02 .hour","#demo02 .minute","#demo02 .second");
    });
    
    function countDown(time,day_elem,hour_elem,minute_elem,second_elem){
    	//if(typeof end_time == "string")
    	var end_time = new Date(time).getTime(),//月份是实际月份-1
    	//current_time = new Date().getTime(),
    	sys_second = (end_time-new Date().getTime())/1000;
    	var timer = setInterval(function(){
    		if (sys_second > 0) {
    			sys_second -= 1;
    			var day = Math.floor((sys_second / 3600) / 24);
    			var hour = Math.floor((sys_second / 3600) % 24);
    			var minute = Math.floor((sys_second / 60) % 60);
    			var second = Math.floor(sys_second % 60);
    			day_elem && $(day_elem).text(day);//计算天
    			$(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
    			$(minute_elem).text(minute<10?"0"+minute:minute);//计算分
    			$(second_elem).text(second<10?"0"+second:second);// 计算秒
    		} else { 
    			clearInterval(timer);
    		}
    	}, 1000);
    }
    </script>
    </head>
    
    <body>
    
    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
    /* colockbox */
    .colockbox{283px;height:76px;margin:20px auto;background:url(images/colockbg.png) no-repeat;}
    .colockbox span{float:left;display:block;58px;height:48px;line-height:48px;font-size:26px;text-align:center;color:#ffffff;margin:0 17px 0 0;}
    .colockbox span.second{margin:0;}
    #demo02{208px;background-position:-75px 0;}
    </style>
    
    <div class="colockbox" id="demo01">
    	<span class="day">-</span>
    	<span class="hour">-</span>
    	<span class="minute">-</span>
    	<span class="second">-</span>
    </div>
    
    <div class="colockbox" id="demo02">
    	<span class="hour">-</span>
    	<span class="minute">-</span>
    	<span class="second">-</span>
    </div>
    
    </body>
    </html>
    
  • 相关阅读:
    LeetCode对撞指针汇总
    167. Two Sum II
    215. Kth Largest Element in an Array
    2018Action Recognition from Skeleton Data via Analogical Generalization over Qualitative Representations
    题解 Educational Codeforces Round 84 (Rated for Div. 2) (CF1327)
    题解 JZPKIL
    题解 八省联考2018 / 九省联考2018
    题解 六省联考2017
    题解 Codeforces Round #621 (Div. 1 + Div. 2) (CF1307)
    题解Codeforces Round #620 (Div. 2)
  • 原文地址:https://www.cnblogs.com/jsfoot/p/2601021.html
Copyright © 2011-2022 走看看