【练习】京东案例js(标题栏透明度，倒计时，轮播图自动播放)

1.sublime字体放大：command++

 

2.引入js文件，在引入css文件link下面script引入js文件

http://emmet.evget.com/   查找emmet快捷键的网页   script:src

3.scroll有兼容性问题，必须才可以使用（真的醉，查错N久）

4.选择多个元素要用querySelectorAll（今天一直犯这种错误。。）

 

window.οnlοad=function(){
headScroll();
cutDownTime();
banner();
}
function headScroll(){
//获取元素  header(透明度要改变的元素),nav（透明度的改变程度是屏幕卷到nav最底下时完全变为1）
var header = document.querySelector(".header");
var nav = document.querySelector(".nav");
//offsetTop是nav距顶部的距离，offsetHeight是nav本身的高度
var height = nav.offsetTop+nav.offsetHeight;

// 绑定屏幕滚动事件
window.οnscrοll=function(){
//获取屏幕卷起的高度
var scrollHeight = window.document.body.scrollTop;
// 计算百分数，因为透明度是一点点变化的
var percent = scrollHeight/height;
if(percent>1){
percent=1;
}
//用rgba来设置透明度，因为如果用opacity设置，会影响子盒子的透明度
header.style.backgroundColor="rgba(201,21,35,"+percent+")";
}
}
function cutDownTime(){
//获取元素 .main:nth-child(1) .main_top ul li
var lisArr = document.querySelectorAll(".main:nth-child(1) .main_top li");
//定义总的时间
var totalHour = 3;
var totalSecond = totalHour*60*60;
//开启定时器
var timeId = setInterval(function(){
//判断总时间如果小于等于0 ，就清空定时器，并跳出定时器
if(totalSecond<=0){
clearInterval(timeId);
return;
}
totalSecond--;
var hour = Math.floor(totalSecond/3600);
var minute = Math.floor(totalSecond%3600/60);
var second = totalSecond%60;
for(var i=0;i lisArr[0].innerHTML=Math.floor(hour/10);
lisArr[1].innerHTML=hour%10;
lisArr[3].innerHTML=Math.floor(minute/10);
lisArr[4].innerHTML=minute%10;
lisArr[6].innerHTML=Math.floor(second/10);
lisArr[7].innerHTML=second%10;
}
},1000);

}

function banner(){
//获取元素 banner_img（装了十张图片）banner_index li(每一个index的li)   选一个元素时用all还是能选到，但选多个元素时不用all，一个都选不上
var imgs = document.querySelector(".banner_img");
var indexArr = document.querySelectorAll(".banner_index li");
//获取屏幕宽度
var width = document.body.offsetWidth;
//把ul往左边移，因为第一张图片其实是最后一张  transform: translateX(-10%);  所以索引值从1开始不是从0
var index = 1;    
//开启定时器
var timeId = setInterval(function(){
//当index不超过9时，让它一直增加，判断放在下面的过渡结束事件中
index++;
imgs.style.transform="translateX("+index*width*(-1)+"px)";
imgs.style.transition="all .3s";
},1000);  
//给加了过渡效果的元素绑定过渡结束事件。定时器用来让ul移动，过渡结束事件用来让li变化
imgs.addEventListener("webkitTransitionEnd",function(){
//把判断加在这里，因为一共只有8个li
if(index>8){
//跳到1是因为索引为0的图片不是真正的第一张，但是li的索引还是0，所以后面会index-1 
index=1;
// 因为这里index只有8，后面最后一张图片还没有到就被弄回之前的，会出现很大跳动，这时应该把transition去掉，
// 这也是为什么定时器中才开transtion,其实应该在定时器外面开transtion，可以避免一些资源浪费
imgs.style.transition="";
//过渡关掉以后，还要让ul迅速跳到第一张图片
imgs.style.transform = 'translateX('+index*width*-1+'px)';
}
for(var i=0;i //先把所有的current类清掉
indexArr[i].className="fl";
}
indexArr[index-1].className="fl current";
})
}

虽然今天的代码少，但是写了超级久，主要是因为一点小错误检查半天查不出来。