商城專案timer特效js程式碼
阿新 • • 發佈:2018-12-23
用於商城搶購頁面的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); } });