原生js实现移动站点头部搜索栏背景色透明度变化，倒计时，轮播图

window.onload = function() {
    searchRgba();
    secondKill();
    bannerAutoPlay();
}
 
 //封装首页头部搜索栏在页面向下滚动时，背景颜色从透明，慢慢变深的效果，在超过轮播图时，背景透明度为0.85不变。
 function searchRgba() {
     var topSearch = document.getElementById("header_top_search");
     var banner = document.getElementById("firstBanner")
     var bannerHeight = banner.offsetHeight;
     // console.log(bannerHeight);
     // 事件发生在页面滚动的时候，所以事件时页面滚动事件
     window.onscroll = function() {
         // var top = document.body.scrollTop;//针对IE使用
         var top = document.documentElement.scrollTop;//针对Firefox，chrome浏览器
         // console.log(top);
         // 当页面滚动的高度大于轮播图的高度时，背景颜色的透明度为0.85不变
         // 小于时，背景颜色的透明度从0到0.85逐渐变大；
         if (top > bannerHeight) {
             topSearch.style.background = "rgba(201,21,35,0.85)";
         }else {
             var  scale = top/bannerHeight*0.85;
             topSearch.style.background = "rgba(201,21,35,"+ scale+")";
         }
     }
 }

 //实现首页页面的倒计时功能
 var secondKill = function() {

     var parentTimerBox = document.getElementsByClassName("jd_sk_stopWatch")[0];
     var timerList = document.getElementsByClassName("num");
     // console.log(timerList);

     var stopTime = 0.005*60*60;//将倒计时的时间转化为秒；
     var timer = null; //定义一个定时器

     timer = setInterval(function() {
         stopTime--;

         // 一定要停止定时器，会影响效率
         if (stopTime <= 0) {
             clearInterval(timer);
             timerList[0].innerHTML = 0;
             timerList[1].innerHTML = 0;
             timerList[2].innerHTML = 0;
             timerList[3].innerHTML = 0;
             timerList[4].innerHTML = 0;
             timerList[5].innerHTML = 0;
         }

         // 然后将自减后的时间（秒数）转为为时分秒的形式
         var hour = Math.floor(stopTime/ (60 * 60));
         var minutes = Math.floor(stopTime/60%60);
         var second = stopTime % 60;
         
         console.log(hour + "/" + minutes + "/" + second);
         timerList[0].innerHTML = hour > 10 ? Math.floor(hour/10) : 0;
         timerList[1].innerHTML = hour % 10;
         timerList[2].innerHTML = minutes > 10 ? Math.floor(minutes/10) : 0;
         timerList[3].innerHTML = minutes % 10;
         timerList[4].innerHTML = second > 10 ? Math.floor(second/10) : 0;
         timerList[5].innerHTML = second % 10;
     }, 1000);
 }

 // banner实现自己滚动的效果
 var bannerAutoPlay = function() {
     var bannerBox = document.getElementsByClassName("banner_box")[0];
     var bannerList = bannerBox.children;//找到ul下的所有li
     // console.log(bannerList.length);
     // 要让第二个ul中的li随着第一个ul中的里的变化而变化
     var banner = document.getElementsByClassName("jd_banner");
     // 为什么这里会报错，说children后面的1是读取不到的
     // var orderUl = banner.children[1];
     // var orderList = orderUl.children;
     // 找到下面小圆点
     var orderUl = bannerBox.parentNode.children[1];
     var orderList = orderUl.children;
     // console.log(orderList.length);
     var i = 0;
     var len = bannerList.length;
     var timer = null;
     timer = setInterval(function() {
         //1、第一步就得先把下面小圆点ul中所有的li的类名清除
         for(var j=0; j<len; j++) {
             orderUl.children[i].className = "";
         }
         // 2、然后判断i的值是否大于或等于7，等于7的时候说明正在展示第8张图片了。
         if (i >= len-1) {
             //这里得让ul回到第一张图的位置，一开始第一个li是ul中的12.5%的位置。
             bannerBox.style.transform = "translate(12.5%)";
             i = -1;//i要从-1开始，因为下面会执行自加1，变成0，一开始第一秒，第一张图的i的值就是0；
             // console.log(pec);
         }
         //3、图片开始轮播
        i++;
        // console.log(i);
        var pec = i*0.125;
        pec = pec*100;
        // console.log(pec);
        bannerBox.style.transform = "translate(-"+pec+"%)";
        //4、小圆点随着轮播图的变化而变化
        orderList[i].className = "now";
     }, 2000);

     //banner 还要实现手动左滑右滑的效果

 }