秒杀倒计时功能实现

 1 window.onload = function(){
 2     search();
 3     secondKill();
 4 };
 5 /*头部搜索*/
 6 var search = function(){
 7     /*搜索框对象*/
 8     var search = document.getElementsByClassName('jd_header_box')[0];
 9     /*banner对象*/
10     var banner = document.getElementsByClassName('jd_banner')[0];
11     /*高度*/
12     var height = banner.offsetHeight;
13 
14     window.onscroll = function(){
15         var top = document.body.scrollTop;
16         /*当滚动高度大于banner的高度时候颜色不变*/
17         if(top > height){
18             search.style.background  = "rgba(201,21,35,0.85)";
19         }else{
20             var op = top/height * 0.85;
21             search.style.background  = "rgba(201,21,35,"+op+")";
22         }
23     };
24 };
25 /*秒杀倒计时*/
26 var secondKill = function(){
27     /*复盒子*/
28     var parentTime = document.getElementsByClassName('sk_time')[0];
29     /*span时间*/
30     var timeList = parentTime.getElementsByClassName('num');
31 
32     console.log(timeList.length);
33 
34     var times = 7   * 60 * 60;
35     var timer;
36     timer = setInterval(function(){
37         times  -- ;
38 
39         var h = Math.floor(times/(60*60));
40         var m = Math.floor(times/60%60);
41         var s = times%60;
42 
43         console.log(h+'-'+m+"-"+s);
44 
45         timeList[0].innerHTML = h>10?Math.floor(h/10):0;
46         timeList[1].innerHTML = h%10;
47 
48         timeList[2].innerHTML = m>10?Math.floor(m/10):0;
49         timeList[3].innerHTML = m%10;
50 
51         timeList[4].innerHTML = s>10?Math.floor(s/10):0;
52         timeList[5].innerHTML = s%10;
53         if(times <= 0){
54            clearInterval(timer);
55         }
56     },1000);
57 
58 }

 

posted @ 2018-03-02 22:51  前端极客  阅读(872)  评论(0编辑  收藏  举报