### 获取元素样式
有如下代码：
~~~
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onclick = function(){
alert(this.style.width);
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
~~~
会发现得不到我们想要的宽度样式，这种方式只能得到行间的样式
***
### getComputedStyle
~~~
alert(getComputedStyle(oDiv).width);
~~~
### 封装getStyle函数
~~~
function getStyle(obj,attr){
return getComputedStyle(obj)[attr];
}
~~~
***
### 定时器
~~~
<script>
/*定时器*/
for(var i = 0;i < 10;i++){
document.title = i;
}//瞬间完成，没有时间概念，与电脑性能有关
</script>
~~~
#### 定时器1：setInterval
~~~
<script>
var i = 0;
function fn1() {
document.title = i;
i++;
}
// fn1();//1.直接调用
// document.onclick = fn1;//2.事件调用
setInterval(fn1,1000);//3.定时器调用，fn1千万不要加括号,时间不要太小，14以上
</script>
~~~
#### 终止定时器：clearInterval
~~~
<script type="text/javascript">
var i = 0;
function fn1() {
document.title = i;//停止时是9，想10停，把i++写上去，或11停
i++;
if(i === 10){
clearInterval(timer);
}
}
var timer = setInterval(fn1,1000);//3.定时器调用，fn1千万不要加括号,时间 //不要太小
</script>
~~~
课堂练习-1：定时切换桌面背景图片
~~~
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var aBtn = document.getElementsByTagName('input');
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var num = 0;
var timer = null;
var oBody = document.body;
aBtn[0].onclick = function () {
clearInterval(timer);
timer = setInterval(move,500);
}
aBtn[1].onclick = function () {
clearInterval(timer);
}
function move() {
oBody.style.background = 'url('+arrUrl[num]+')';
num++;
num%=arrUrl.length;
}
}
</script>
</head>
<body>
<input type="button" value="替换">
<input type="button" value="停">
</body>
</html>
~~~
***
### 定时器2：setTimeout与cleartTimeout
与setInterval区别是它只执行一次
课堂练习-2：模拟弹出的广告
~~~
<script>
window.onload = function () {
var oImg = document.getElementsByTagName('img')[0];
setTimeout(function(){
oImg.style.display = 'inline-block';
setTimeout(function () {
oImg.style.display = 'none';
},5000);
},1000);
}
</script>
~~~
课堂练习-3：定时切换图片
课堂练习-4：模拟延时消失的窗口
***
拓展练习-1：自动轮换选项卡
拓展练习-2：控制商品图上下滚动
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin: 0;}
ul,li{list-style: none;}
#box{
width:200px;
height:500px;
border:10px solid #202329;
margin:20px auto;
position: relative;
overflow: hidden;
}
#p1,#p2{
width:200px;
line-height: 30px;
background: #1A66B3;
text-align: center;
position: absolute;
cursor: pointer;
z-index: 10;
opacity: 0.2;
}
#p1:hover,#p2:hover{
opacity: 0.9;
}
#p1{
top:0;
border-bottom: 1px solid #000;
}
#p2{
bottom:0;
border-top: 1px solid #000;
}
ul{
width:200px;
position: absolute;
top:0;
}
li{
height: 100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var oP1 = document.getElementById('p1');
var oP2 = document.getElementById('p2');
var oUl = oBox.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var aColor = ['red','yellow','blue'];
for(var i = 0;i < aLi.length;i++){
aLi[i].style.background = aColor[i%aColor.length];
}
var timer = null;
oP1.onmousedown = function(){
clearInterval(timer);
timer = setInterval(function(){
var oTop = parseInt(getStyle(oUl,'top'));
oTop -= 5;
if(oTop <= -500){
oTop = -500;
}
oUl.style.top = oTop + 'px';
},30);
oP1.onmouseup = function(){
clearInterval(timer);
}
}
oP2.onmousedown = function(){
clearInterval(timer);
timer = setInterval(function(){
var oTop = parseInt(getStyle(oUl,'top'));
oTop += 5;
if(oTop >= 0){
oTop = 0;
}
oUl.style.top = oTop + 'px';
},30);
oP2.onmouseup = function(){
clearInterval(timer);
}
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr];
}
}
</script>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
<p id="p1">↑</p>
<p id="p2">↓</p>
</div>
</body>
</html>
~~~
***
[图片素材下载](https://pan.baidu.com/s/11Luvx0SiX71Zk01lpSUS_g)
