码迷,mamicode.com
首页 > 其他好文 > 详细

秒杀倒计时功能实现

时间:2018-03-02 23:57:16      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:round   [1]   fun   col   搜索   blog   滚动   off   interval   

 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 }

 

秒杀倒计时功能实现

标签:round   [1]   fun   col   搜索   blog   滚动   off   interval   

原文地址:https://www.cnblogs.com/yangguoe/p/8495359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!