欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

简易实现的jQuery时间倒数计时器

最编程 2024-02-23 15:42:35
...

输入图片说明<div class="colockbox1" id="colockbox4"> <div class="colockbox4"><span class="day">00</span><i>天</i></div> <div><span class="hour">00</span><i>时</i></div> <div><span class="minute">00</span><i>分</i></div> <div><span class="second">00</span><i>秒</i></div> </div>

<script type="text/javascript">
	$(document).ready(function ($) {
		jQuery(shijian());
		/*倒计时*/
		function shijian(){countDown("2016-8-8 14:40","#colockbox4");
		};
		function countDown(time,id){
			var day_elem = $(id).find('.day');
			var hour_elem = $(id).find('.hour');
			var minute_elem = $(id).find('.minute');
			var second_elem = $(id).find('.second');
			var end_time = new Date(time).getTime(),//月份是实际月份-1
					sys_second = (end_time-new Date().getTime())/1000;
			var timer = setInterval(function(){
				if (sys_second > 1) {
					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>