zoukankan      html  css  js  c++  java
  • JavaScript基础视频教程总结(131-140章)

    <!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=" 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; 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 = /b2/;
            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章)


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

  • 相关阅读:
    搭建springCloud网关zuul
    springboot添加https
    SpringBoot上传文件,经过spingCloud-Zuul,中文文件名乱码解决办法
    springboot mongodb jpa常用方法整理
    springboot拦截中自动注入的组件为null问题解决方法
    springboot JPA mysql
    转载Spring Data JPA 指南——整理自官方参考文档
    springboot带有进度条的上传
    HTTP请求示例
    http的N种请求
  • 原文地址:https://www.cnblogs.com/iflygofy/p/10298829.html
Copyright © 2011-2022 走看看