jQuery中倒計時效果

倒計時jQuery效果.javascript

<span style="font-size:14px;"><script type="text/javascript">
//遍歷的數據(Yii框架中的遍歷方法)
<?php foreach ($articleInfo as $val): ?>
$(function(){
	var id = "#colockbox"+<?php echo $val->news_id;?>;
	var endTime = '<?php echo date("Y/m/d H:i:s",$val->end_time);?>';
	countDown(endTime,id);
});
<?php endforeach;?>
//方法
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></span>
相關文章
相關標籤/搜索