### 獲取元素樣式
有如下代碼：
~~~
<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)
