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

時間 2019-12-05
原文原文鏈接
<!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";
    };
    //定義一個自動切換的定時器的標識
    var timer4;
    //建立一個函數，用來開啓自動切換圖片
    function autoChange(){
        //開啓一個定時器，用來定時去切換圖片
        timer4 = setInterval(function(){
            //使索引自增
            index++;
            //判斷index的值
            index %= imgArr.length;
            //執行動畫，切換圖片
            moveAni(imgList , "left" , -520*index , 20 , function(){
                //修改導航按鈕
                setA();
            });
            
        },1500);
    }
    
</script>

<pre> 137. 類(class)的操做 </pre>
<style type="text/css">
.b1{
    width: 100px;
    height: 100px;
    background-color: red;
}
.b2{
    height: 300px;
    background-color: yellow;
}
</style>
<div class="">
    <button id="btn71">點擊按鈕之後修改box的樣式</button>
    <br /><br />
    <div id="box71" class="b1"></div>
</div>
<script type="text/javascript">
    console.log("第137");
    var btn71 = document.getElementById("btn71")
    var box71 = document.getElementById("box71")
    btn71.onclick = function(){
        //addClass(box71,"b2")
        toggleClass(box71,"b2")
    }
    // 定義一個函數，用來向一個元素中添加指定的class屬性值
    // 參數: obj 要添加class屬性的元素,cn 要添加的class值
    function addClass(obj , cn){
        //檢查obj中是否含有cn
        if(!hasClass(obj , cn)){
            obj.className += " "+cn;
        }
    }
    // 判斷一個元素中是否含有指定的class屬性值
    function hasClass(obj , cn){
        //判斷obj中有沒有cn class
        //建立一個正則表達式
        //var reg = /\bb2\b/;
        var reg = new RegExp("\\b"+cn+"\\b");
        return reg.test(obj.className);
    }
    // 刪除一個元素中的指定的class屬性
    function removeClass(obj , cn){
        //建立一個正則表達式
        var reg = new RegExp("\\b"+cn+"\\b");
        //刪除class
        obj.className = obj.className.replace(reg , "");
    }
    // toggleClass能夠用來切換一個類
    function toggleClass(obj , cn){
        //判斷obj中是否含有cn
        if(hasClass(obj , cn)){
            //有，則刪除
            removeClass(obj , cn);
        }else{
            //沒有，則添加
            addClass(obj , cn);
        }
    }
    
</script>

<pre> 138. 二級菜單完成基本功能 </pre>
<pre> 139. 二級菜單過渡效果 </pre>
<style type="text/css">
div.sdmenu {
    width: 150px;
    margin: 20px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding-bottom: 10px;
    background: #eee;
    color: #fff;
}
div.sdmenu div {
    background: #bbb;
    overflow: hidden;
}
div.sdmenu div.collapsed {
    height: 25px;
}
div.sdmenu div span {
    display: block;
    position: relative;
    height: 15px;
    line-height: 15px;
    overflow: hidden;
    padding: 5px 25px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}
div.sdmenu div span:before {
    content: '';
    position: absolute;
    top: 7px;
    left: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px;
    border-color:#333 transparent  transparent transparent;
}
div.sdmenu div.collapsed span:before {
    border-color: transparent  transparent transparent #333;
}

div.sdmenu div a {
    padding: 5px 10px;
    background: #eee;
    display: block;
    border-bottom: 1px solid #ddd;
    color: #066;
}

div.sdmenu div a.current {
    background: #ccc;
}

div.sdmenu div a:hover {
    background: #066 ;
    color: #fff;
    text-decoration: none;
}
</style>
<div id="my_menu" class="sdmenu">
    <div>
        <span class="menuSpan">在線工具</span>
        <a href="javascript:;">圖像優化</a>
        <a href="javascript:;">收藏夾圖標生成器</a>
        <a href="javascript:;">郵件</a>
        <a href="javascript:;">htaccess密碼</a>
        <a href="javascript:;">梯度圖像</a>
        <a href="javascript:;">按鈕生成器</a>
    </div>
    <div class="collapsed">
        <span class="menuSpan">支持咱們</span>
        <a href="javascript:;">推薦咱們</a>
        <a href="javascript:;">連接咱們</a>
        <a href="javascript:;">網絡資源</a>
    </div>
    <div class="collapsed">
        <span class="menuSpan">合做夥伴</span>
        <a href="javascript:;">JavaScript工具包</a>
        <a href="javascript:;">CSS驅動</a>
        <a href="javascript:;">CodingForums</a>
        <a href="javascript:;">CSS例子</a>
    </div>
    <div class="collapsed">
        <span class="menuSpan">測試電流</span>
        <a href="javascript:;">Current or not</a>
        <a href="javascript:;">Current or not</a>
        <a href="javascript:;">Current or not</a>
        <a href="javascript:;">Current or not</a>
    </div>
</div>

<script type="text/javascript">
    console.log("第138,139");
    /*
     * 咱們的每個菜單都是一個div
     *  當div具備collapsed這個類時，div就是摺疊的狀態
     *  當div沒有這個類是，div就是展開的狀態
     */
    
    //獲取全部的class爲menuSpan的元素
    var menuSpan = document.querySelectorAll(".menuSpan");
    //定義一個變量，來保存當前打開的菜單
    var openDiv = menuSpan[0].parentNode;
    //爲span綁定單擊響應函數
    for(var i=0 ; i<menuSpan.length ; i++){
        menuSpan[i].onclick = function(){
            //this表明我當前點擊的span
            //獲取當前span的父元素
            var parentDiv = this.parentNode;
            //切換菜單的顯示狀態
            toggleMenu(parentDiv);
            //判斷openDiv和parentDiv是否相同
            if(openDiv != parentDiv  && !hasClass(openDiv , "collapsed")){
                //切換菜單的顯示狀態
                toggleMenu(openDiv);
            }
            //修改openDiv爲當前打開的菜單
            openDiv = parentDiv;
        };
    }
    
    // 用來切換菜單摺疊和顯示狀態
    function toggleMenu(obj){
        //在切換類以前，獲取元素的高度
        var begin = obj.offsetHeight;
        //切換parentDiv的顯示
        toggleClass(obj , "collapsed");
        //在切換類以後獲取一個高度
        var end = obj.offsetHeight;
        //console.log("begin = "+begin +" , end = "+end);
        //動畫效果就是將高度從begin向end過渡
        //將元素的高度重置爲begin
        obj.style.height = begin + "px";
        //執行動畫，從bengin向end過渡
        moveAni(obj,"height",end,10,function(){
            //動畫執行完畢，內聯樣式已經沒有存在的意義了，刪除之
            obj.style.height = "";
        });
    }
    
</script>

<pre> 140. JSON
- JS中的對象只有JS本身認識，其餘的語言都不認識
- JSON就是一個特殊格式的字符串，這個字符串能夠被任意的語言所識別，
而且能夠轉換爲任意語言中的對象，JSON在開發中主要用來數據的交互
- JSON
- JavaScript Object Notation JS對象表示法
- JSON和JS對象的格式同樣，只不過JSON字符串中的屬性名必須加雙引號
其餘的和JS語法一致
JSON分類：
1.對象 {}
2.數組 []
JSON中容許的值：
1.字符串
2.數值
3.布爾值
4.null
5.對象
6.數組
</pre>
<script type="text/javascript">
    console.log("第140");
    var arr = '[1,2,3,"hello",true]';
    var obj2 = '{"arr":[1,2,3]}';
    var arr2 ='[{"name":"孫悟空","age":18,"gender":"男"},{"name":"孫悟空","age":18,"gender":"男"}]';
    /*
     * 將JSON字符串轉換爲JS中的對象
     *  在JS中，爲咱們提供了一個工具類，就叫JSON
     *  這個對象能夠幫助咱們將一個JSON轉換爲JS對象，也能夠將一個JS對象轉換爲JSON
     */
    var json = '{"name":"孫悟空","age":18,"gender":"男"}';
    /*
     * json --> js對象
     *   JSON.parse()
     *      - 能夠將以JSON字符串轉換爲js對象
     *      - 它須要一個JSON字符串做爲參數，會將該字符串轉換爲JS對象並返回
     */
    var o = JSON.parse(json);
    var o2 = JSON.parse(arr);
    console.log(o.gender);
    console.log(o2[1]);
    var obj3 = {name:"豬八戒" , age:28 , gender:"男"};
    /*
     * JS對象 ---> JSON
     *  JSON.stringify()
     *      - 能夠將一個JS對象轉換爲JSON字符串
     *      - 須要一個js對象做爲參數，會返回一個JSON字符串
     */
    var str = JSON.stringify(obj3);
    console.log(str);
    /*
     * JSON這個對象在IE7及如下的瀏覽器中不支持，因此在這些瀏覽器中調用時會報錯
     */
    var str3 = '{"name":"孫悟空","age":18,"gender":"男"}';
    JSON.parse(str3);
    /*
     * eval()
     *  - 這個函數能夠用來執行一段字符串形式的JS代碼，並將執行結果返回
     *  - 若是使用eval()執行的字符串中含有{},它會將{}當成是代碼塊
     *      若是不但願將其當成代碼塊解析，則須要在字符串先後各加一個()
     *  - eval()這個函數的功能很強大，能夠直接執行一個字符串中的js代碼，
     *      可是在開發中儘可能不要使用，首先它的執行性能比較差，而後它還具備安全隱患
     */
    var str2 = "console.log('hello');";
    var obj = eval(str2);
</script>

</body>
</html>