JavaScript基础视频教程总结（131-140章）

2022-10-30 15:44:24

<!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="data:images/1.jpg"/></li>

        <li><img src="data:images/2.jpg"/></li>

        <li><img src="data:images/3.jpg"/></li>

        <li><img src="data:images/4.jpg"/></li>

        <li><img src="data: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>

所有基础课程链接：

1.JavaScript基础视频教程总结（001-010章）          2.JavaScript基础视频教程总结（011-020章）          3. JavaScript基础视频教程总结（021-030章）        4. JavaScript基础视频教程总结（031-040章）

5. JavaScript基础视频教程总结（041-050章）          6. JavaScript基础视频教程总结（051-060章）         7. JavaScript基础视频教程总结（061-070章）        8. JavaScript基础视频教程总结（071-080章）

9. JavaScript基础视频教程总结（081-090章）          10. JavaScript基础视频教程总结（091-100章）        11. JavaScript基础视频教程总结（101-110章）      12. JavaScript基础视频教程总结（111-120章）

13. JavaScript基础视频教程总结（121-130章）        14. JavaScript基础视频教程总结（131-140章）

 另外，欢迎关注我的新浪微博

上一篇：【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component


下一篇：[河南省ACM省赛-第三届] 网络的可靠性 （nyoj 170）