商城项目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);
			}
		});