1. 程式人生 > >商城專案timer特效js程式碼

商城專案timer特效js程式碼

用於商城搶購頁面的timer特效   

	<script type="text/javascript">
		var count = 1;//此變數用於時間段判定的計數
		var countn = 0;//此變數用於左右移動btn的計數
		var left = 0;
		var c = count + 1;
		var tt = [];
		var timerbox = document.getElementsByClassName("timer-box");
		var num = timerbox.length;
		var h = $('.timer-box:nth-child(' + count + ')' + ' ' + '.timer-h').text();//因為使用的是css選擇器 jq選擇器 需要字元拼接
		var m = $(".timer-box:nth-child(" + count + ")" + " " + ".timer-m").text();
		m = Number(m);
		h = Number(h);
		var txt = '已結束';
		$(".today-timer ul").css("width", num * 300 + 'px');//動態修改timer div長度
		// 	網頁重新整理初始方法 
		function first() {
			for(;;) {
				var x = Number($(".timer-box:nth-child(" + count + ")" + " " + ".timer-h").text());
				var y = Number($(".timer-box:nth-child(" + count + ")" + " " + ".timer-m").text());
				var tc = (new Date() - new Date(2016, 10, 21, x, y, 0)); //此處需要修改時間 修改為活動當天日期
				tc = Number(tc) / 1000;
				if(tc <= 7200) {
					h = Number($(".timer-box:nth-child(" + count + ")" + " " + ".timer-h").text());//從div內提取時間段
					m = Number($(".timer-box:nth-child(" + count + ")" + " " + ".timer-m").text());
					updataTimer();
					changeDiv();
					break;
				} else {
					changeoldDiv();
					divMove();
					count++;
					countn++;
				}
			}
		}
		//	時間獲取 更新
		function updataTimer() {
			var hx = h+2
			var tc = (new Date(2016, 10, 21, hx, m, 0) - new Date()); //此處需要修改時間
			var h1 = tc % (24 * 3600 * 1000)
			var hh = Math.floor(h1 / (3600 * 1000))
			var m1 = h1 % (3600 * 1000)
			var mm = Math.floor(m1 / (60 * 1000))
			var s1 = m1 % (60 * 1000)
			var ss = Math.round(s1 / 1000)
			tt[0] = hh;
			tt[1] = mm;
			tt[2] = ss;
		}
		//已結束div移動
		function divMove() {
			var ml = $(".today-timer ul").css('margin-left')
			ml = ml.replace("px", "");
			if(ml > -2700) {
				left = count * -300;
				$(".today-timer ul").animate({
					marginLeft: left
				}, 300);
			}
		}
		//修改div樣式 ————進行中
		function changeDiv2() {
			$(".timer-box:nth-child(" + count + ")").addClass("addtimerlast");
			$(".timer-box:nth-child(" + count + ")" + " " + ".timer-small span").text("已結束");
			count++;
			$(".timer-box:nth-child(" + count + ")").addClass("addtimernow");
			var t0 = tt[0];
			var t1 = tt[1];
			var t2 = tt[2];
			if(tt[0] < 10) {
				var t0 = '0' + tt[0];
			}
			if(tt[1] < 10) {
				var t1 = '0' + tt[1];
			}
			if(tt[2] < 10) {
				var t2 = '0' + tt[2];
			}
			$(".timer-box:nth-child(" + count + ")" + " " + ".timer-small span").text(t0 + ":" + t1 + ":" + t2);
		}
		
		function changeDiv() {
			updataTimer();
			if((tt[2]+tt[0]+tt[1]) <= 0) {
				changeDiv2()
			} else {
				$(".timer-box:nth-child(" + count + ")").addClass("addtimernow");
				var t0 = tt[0];
				var t1 = tt[1];
				var t2 = tt[2];
				if(tt[0] < 10) {
					var t0 = '0' + tt[0];
				}
				if(tt[1] < 10) {
					var t1 = '0' + tt[1];
				}
				if(tt[2] < 10) {
					var t2 = '0' + tt[2];
				}
				$(".timer-box:nth-child(" + count + ")" + " " + ".timer-small span").text(t0 + ":" + t1 + ":" + t2);
			}
		}
		//修改div樣式————已結束
		function changeoldDiv() {
			divMove();
			$(".timer-box:nth-child(" + count + ")").addClass("addtimerlast");
			$(".timer-box:nth-child(" + count + ")" + " " + ".timer-small span").text("已結束");
		}
		first();
		setInterval(function() {
			h = Number($(".timer-box:nth-child(" + count + ")" + " " + ".timer-h").text());
			m = Number($(".timer-box:nth-child(" + count + ")" + " " + ".timer-h").text());
			changeDiv()
		}, 100);
$(".moveleft").click(function() {//timer左右有移動的btn 用於檢視已結束的時間段 和將開始的時間段
if(countn < 8) {
countn++;
var n = countn * -300
$(".today-timer ul").animate({
marginLeft: n
}, 300);
}
});
$(".moveright").click(function() {
if(countn > 0) {
countn--;
var n = countn * -300
$(".today-timer ul").animate({
marginLeft: n
}, 300);
}
});