努力成为一名合格的前端开发工程师!!!

闻达有先后,术业有专攻,努力,加油ing!!!!

导航

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="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>

所有基础课程链接:


 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章)


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

posted on 2019-01-21 15:40  前端小匠大飞  阅读(410)  评论(2编辑  收藏