JavaScript基礎視頻教程總結（131-140章）

所有基礎課程鏈接： 1.JavaScript基礎視頻教程總結（001-010章） 2.JavaScript基礎視頻教程總結（011-020章） 3. JavaScript基礎視頻教程總結（021-030章） 4. JavaScript基礎視頻教程總結（031-040章） 5. JavaScript基 ...
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>131-140章總結</title>
</head>
<body>
    
<pre>
131. 定時器的應用1
</pre>
<style type="text/css">
#box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
}
</style>
<button id="btn01">點擊按鈕以後box1向右移動</button>
<div class="" style="position: relative;height: 200px;">
    <div id="box1"></div>
</div>

<script type="text/javascript">
    console.log("第131");
    var box1 = document.getElementById("box1");
    var btn01 = document.getElementById("btn01");
    var timer1;
    btn01.onclick = function(){
        clearInterval(timer1);
        timer1 = setInterval(function(){
            var oldValue = parseInt(getStyle(box1,"left"));
            var newValue = oldValue + 10;
            if(newValue > 800){
                newValue = 800;
            }
            box1.style.left = newValue + "px";
            if(newValue == 800){
                clearInterval(timer1);
            }
        },30);
    };
    
    /*
     * 定義一個函數，用來獲取指定元素的當前的樣式
     * 參數：
     *      obj 要獲取樣式的元素
     *      name 要獲取的樣式名
     */
    
    function getStyle(obj , name) {
        if(window.getComputedStyle){
            //正常瀏覽器的方式，具有 getComputedStyle()方法
            return getComputedStyle(obj , null)[name];
        } else {
            //IE8的方式，沒有getComputedStyle()方法
            return obj.currentStyle[name];
        }
    }
</script>

<pre>
132. 定時器的應用2
</pre>
<div class="" style="position: relative;height: 200px;">
    <button id="btn21">點擊按鈕以後box1向右移動</button>
    <button id="btn22">點擊按鈕以後box1向左移動</button>
    <br /><br />
    <div id="box21" style="width: 100px;height: 100px;background-color: #ddd;position: absolute;"></div>
</div>
<script type="text/javascript">
    console.log("第132");
    var box21 = document.getElementById("box21");
    var btn21 = document.getElementById("btn21");
    var btn22 = document.getElementById("btn22");
    //點擊按鈕以後，使box1向右移動（left值增大）
    btn21.onclick = function(){
        move(box21 , 800 , 10);
    };
    //點擊按鈕以後，使box1向左移動（left值減小）
    btn22.onclick = function(){
        move(box21 , 0 , 10);
    };
    //定義一個變數，用來保存定時器的標識
    var timer2;
    //嘗試創建一個可以執行簡單動畫的函數
    /*
     * 參數：
     *  obj:要執行動畫的對象
     *  target:執行動畫的目標位置
     *  speed:移動的速度(正數向右移動，負數向左移動)
     */
    function move(obj , target ,speed){
        // 關閉上一個定時器
        clearInterval(timer2);
        // 獲取元素目前的位置
        var current = parseInt(getStyle(obj,"left"));
        //判斷速度的正負值
        //如果從0 向 800移動，則speed為正
        //如果從800向0移動，則speed為負
        if(current > target){
            //此時速度應為負值
            speed = -speed;
        }
        //開啟一個定時器，用來執行動畫效果
        timer2 = setInterval(function(){
            //獲取obj的原來的left值
            var oldValue = parseInt(getStyle(obj,"left"));
            //在舊值的基礎上增加
            var newValue = oldValue + speed;
            //判斷newValue是否大於800
            //從800 向 0移動
            //向左移動時，需要判斷newValue是否小於target
            //向右移動時，需要判斷newValue是否大於target
            if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
                newValue = target;
            }
            obj.style.left = newValue + "px";
            //當元素移動到0px時，使其停止執行動畫
            if(newValue == target){
                //達到目標，關閉定時器
                clearInterval(timer2);
            }
        },30);
    }
</script>

<pre>
133. 定時器的應用3
</pre>
<div class="" style="position: relative;height: 300px;">
    <div><button id="btn31">點擊多次變化</button></div><br />
    <div id="box31" style="position: absolute;width: 100px;height: 100px;background-color: #5197ff;"></div>
</div>
<script type="text/javascript">
    console.log("第133");
    //嘗試創建一個可以執行簡單動畫的函數
    /*
     * 參數：
     *  obj:要執行動畫的對象
     *  attr:要執行動畫的樣式，比如：left top width height
     *  target:執行動畫的目標位置
     *  speed:移動的速度(正數向右移動，負數向左移動)
     *  callback:回調函數，這個函數將會在動畫執行完畢以後執行
     */
    function moveAni(obj, attr, target, speed, callback) {
        //關閉上一個定時器
        clearInterval(obj.timer);
        //獲取元素目前的位置
        var current = parseInt(getStyle(obj, attr));
        //判斷速度的正負值
        //如果從0 向 800移動，則speed為正
        //如果從800向0移動，則speed為負
        if(current > target) {
            //此時速度應為負值
            speed = -speed;
        }
        //開啟一個定時器，用來執行動畫效果
        //向執行動畫的對象中添加一個timer屬性，用來保存它自己的定時器的標識
        obj.timer = setInterval(function() {
            //獲取box1的原來的left值
            var oldValue = parseInt(getStyle(obj, attr));
            //在舊值的基礎上增加
            var newValue = oldValue + speed;
            //判斷newValue是否大於800
            //從800 向 0移動
            //向左移動時，需要判斷newValue是否小於target
            //向右移動時，需要判斷newValue是否大於target
            if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                newValue = target;
            }
            //將新值設置給box1
            obj.style[attr] = newValue + "px";
            //當元素移動到0px時，使其停止執行動畫
            if(newValue == target) {
                //達到目標，關閉定時器
                clearInterval(obj.timer);
                //動畫執行完畢，調用回調函數
                callback && callback();
            }
        }, 30);
    }
    
    var btn31 = document.getElementById("btn31")
    btn31.onclick = function(){
        moveAni(box31,"width",200,10,function(){
            moveAni(box31,"height",200,10,function(){
                moveAni(box31,"left",50,10,function(){
            
                })
            })
        })
    }
</script>

<pre>
134. 完成輪播圖界面
</pre>
<pre>
135. 完成點擊按鈕切換圖片
</pre>
<pre>
136. 完成輪播圖
</pre>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#outer{
    width: 520px;
    height: 333px;
    margin: 20px;
    background-color: greenyellow;
    padding: 10px 0;
    position: relative;
    overflow: hidden;
}
#imgList{
    list-style: none;
    position: absolute;
    left: 0px;
}
#imgList li{
    float: left;
    margin: 0 10px;
}
#navDiv{
    position: absolute;
    bottom: 15px;
}
#navDiv a{
    float: left;
    width: 15px;
    height: 15px;
    background-color: red;
    margin: 0 5px;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
#navDiv a:hover{
    background-color: black;
}
</style>
<!-- 創建一個外部的div，來作為大的容器 -->
<div id="outer">
    <!-- 創建一個ul，用於放置圖片 -->
    <ul id="imgList">
        <li><img src="images/1.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/4.jpg"/></li>
        <li><img src="images/5.jpg"/></li>
    </ul>
    <!--創建導航按鈕-->
    <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>
<script type="text/javascript">
    console.log("第134,135,136");
    var imgList = document.getElementById("imgList");
    var imgArr = document.getElementsByTagName("img");
    imgList.style.width = 520*imgArr.length+"px";
    var navDiv = document.getElementById("navDiv");
    var outer = document.getElementById("outer");
    navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
    var index = 0;
    var allA = document.getElementsByTagName("a");
    allA[index].style.backgroundColor = "black";
    for(var i=0; i<allA.length ; i++){
        allA[i].num = i;
        allA[i].onclick = function(){
            index = this.num;
            setA();
            moveAni(imgList , "left" , -520*index , 20 , function(){
                autoChange();
            });
        };
    }
    //開啟自動切換圖片
    autoChange();
    //創建一個方法用來設置選中的a
    function setA(){
        //判斷當前索引是否是最後一張圖片
        if(index >= imgArr.length - 1){
            //則將index設置為0
            index = 0;
            //此時顯示的最後一張圖片，而最後一張圖片和第一張是一摸一樣
            //通過CSS將最後一張切換成第一張
            imgList.style.left = 0;
        }
        for(var i=0 ; i<allA.length ; i++){
            allA[i].style.backgroundColor = "";
        }
        allA[index].style.backgroundColor = "black";
    };
    //定義一個自動切換的定時器的標識