『笔记』JavaScript基础学习笔记 6

DOM（文本对象模型）

（20）鼠标拖拽的事件

拖拽(一、二)

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
      }
      #box2{
        width:100px;
        height:100px;
        background-color:yellow;
        position:absolute;
        left:200px;
        top:200px;
      }
    </style>
    <script>
      window.onload = function(){
        // 拖拽box1
        /* 拖拽的流程：
        1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
        2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
        3.当鼠标松开时，被拖拽元素国定在当前位置 onmouseup
        */
        // 获取box1
        var box1 = document.getElementById("box1");
        // 当鼠标在被拖拽元素上按下时，开始拖拽
        box1.onmousedown = function(event){
          // 设置box1捕获所有鼠标按下的事件
          // setCapture()只有IE支持，Chrome不支持会报错
          // 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
          /*if(box1.setCapture){
            box1.setCapture();
          }*/
          box1.setCapture && box1.setCapture();
          event = event || window.event;
          // div的水平偏移量:鼠标.clientX - 元素.offsetLeft
          // div的垂直偏移量:鼠标.clientY - 元素.offsetTop
          var ol = event.clientX - box1.offsetLeft;
          var ot = event.clientY - box1.offsetTop;
          // 为document绑定一个onmousemove事件
          document.onmousemove = function(event){
            event = event || window.event;
            // =当鼠标移动时被拖拽元素跟随鼠标移动
            // 获取鼠标的坐标
            var left = event.clientX - ol;
            var top = event.clientY - ot;
            // 修改box1的位置
            box1.style.left = left+"px";
            box1.style.top = top+"px";
          };
          // 为元素绑定一个鼠标松开事件
          document.onmouseup = function(){
            // 当鼠标松开时，被拖拽元素国定在当前位置
            // 取消document的onmousemove事件
            document.onmousemove = null;
            // alert("鼠标松开了");
            // 取消document的onmouseup事件
            document.onmouseup = null;
            // 当鼠标松开时，取消对事件的捕获
            box1.releaseCapture && box1.releaseCapture();
          };
          // 当拖拽一个网页中的内容，浏览器会默认去搜索页面，会导致拖拽功能的异常，这是浏览器的默认行为
          // 如果不希望这个行为发生，则可以通过return false来取消默认行为
          // 但是不支持IE8及以下浏览器
          return false;
        };
      };
    </script>
  </head>
  <body>
    我是一段文字
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

box的偏移量=鼠标的偏移量-元素的偏移量

捕获测试

<html>
  <head>
    <script>
      window.onload = function(){
        // 分别为两个按钮绑定单击响应函数
        var btn01 = document.getElementById("btn01");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
          alert(1);
        };
        btn02.onclick = function(){
          alert(2);
        };
        // 设置btn01对鼠标按下相关的事件进行捕获
        // 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
        btn01.setCapture();
      };
    </script>
  </head>
  <body>
    <button id="btn01">按钮01</button>
    <button id="btn02">按钮02</button>
  </body>
</html>

拖拽（三）

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
      }
      #box2{
        width:100px;
        height:100px;
        background-color:yellow;
        position:absolute;
        left:200px;
        top:200px;
      }
    </style>
    <script>
      window.onload = function(){
        // 拖拽box1
        /* 拖拽的流程：
        1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
        2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
        3.当鼠标松开时，被拖拽元素国定在当前位置 onmouseup
        */
        // 获取box1
        var box1 = document.getElementById("box1");
        // 获取box1
        var box1 = document.getElementById("box1");
        // 获取imh1
        var img1 = document.getElementById("img1");
        // 开启box1的拖拽
        drag(box1);
        // 开启box2的拖拽
        drag(box2);
        // 开启img1的拖拽
        drag(img1);
      };
      // 提取一个专门用来设置拖拽的函数
      // 参数：开启拖拽的元素
      function drag(obj){
        // 当鼠标在被拖拽元素上按下时，开始拖拽
        obj.onmousedown = function(event){
          // 设置box1捕获所有鼠标按下的事件
          // setCapture()只有IE支持，Chrome不支持会报错
          // 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
          /*if(box1.setCapture){
            box1.setCapture();
          }*/
          obj.setCapture && obj.setCapture();
          event = event || window.event;
          // div的水平偏移量:鼠标.clientX - 元素.offsetLeft
          // div的垂直偏移量:鼠标.clientY - 元素.offsetTop
          var ol = event.clientX - obj.offsetLeft;
          var ot = event.clientY - obj.offsetTop;
          // 为document绑定一个onmousemove事件
          document.onmousemove = function(event){
            event = event || window.event;
            // =当鼠标移动时被拖拽元素跟随鼠标移动
            // 获取鼠标的坐标
            var left = event.clientX - ol;
            var top = event.clientY - ot;
            // 修改box1的位置
            obj.style.left = left+"px";
            obj.style.top = top+"px";
          };
          // 为元素绑定一个鼠标松开事件
          document.onmouseup = function(){
            // 当鼠标松开时，被拖拽元素国定在当前位置
            // 取消document的onmousemove事件
            document.onmousemove = null;
            // alert("鼠标松开了");
            // 取消document的onmouseup事件
            document.onmouseup = null;
            // 当鼠标松开时，取消对事件的捕获
            obj.releaseCapture && obj.releaseCapture();
          };
          // 当拖拽一个网页中的内容，浏览器会默认去搜索页面，会导致拖拽功能的异常，这是浏览器的默认行为
          // 如果不希望这个行为发生，则可以通过return false来取消默认行为
          // 但是不支持IE8及以下浏览器
          return false;
        };
      };
    </script>
  </head>
  <body>
    我是一段文字
    <div id="box1"></div>
    <div id="box2"></div>
    <img src="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/08/809131067.png" id="img1" style="width:100px; position:absolute;"
  </body>
</html>

（21）滚轮的事件

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
      }
    </style>
    <script>
      window.onload = function(){
        // 当鼠标滚轮向下滚动时box1变长，当滚轮向上滚动时box1变短
        var box1 = document.getElementById("box1");
        // 为box1绑定一个鼠标滚动事件
        /*onmousewheel鼠标滚轮滚动事件，会在鼠标滚轮滚动时触发，火狐不支持
        *
        **在火狐中需要使用DOMMouseScroll来绑定滚轮滚动事件
        **该事件需要通过addEventListener()函数来绑定
        */
        /*function fun(){
          alert("我滚了");
        };
        box1.onmousewheel = fun;
        bind(box1,"DOMMouseScroll",fun);
        */
        box1.onmousewheel = function(event){
          event = event || window.event;
          // alert("我滚了");
          // 判断鼠标滚轮的滚动方向
          // event.wheelDelta 可以获取鼠标滚轮滚动的方向
          // 向上滚动为正值，向下滚动为负值
          // alert(event.wheelDelta);
          // 火狐中不支持wheelDelta
          /*火狐中使用event.detail来获取滚轮滚动的方向
          **向上滚动为负值，向下滚动为正值
          */
          // alert(event.detail);
          // 当鼠标滚轮向下滚动时box1变长，当滚轮向上滚动时box1变短
          if(event.wheelDelta > 0 || event.detail < 0){
            // alert("向上滚");
            // 向上滚box1变短
            box1.style.height = box1.clientHeight - 10 + "px";
          }else{
            // alert("向下滚");
            // 向下滚box1变长
            box1.style.height = box1.clientHeight + 10 + "px";
          }
          // 使用addEventListener()方法绑定的响应函数，取消默认行为时不能使用return false;
          // 需要使用event.preventDefault();来取消，不支持IE8及以下浏览器
          event.preventDefault && event.preventDefault();//取消火狐的默认行为
          // 当滚轮滚动时，如果浏览器有滚动条，浏览器的滚动条会随着滚动
          // 这是浏览器默认行为，可以使用return false;取消默认行为
          return false;
        };
        // 为火狐绑定滚轮事件
        bind(box1,"DOMMouseScroll",box1.onmousewheel)
      };
      function bind(obj,eventStr,callback){
        if(obj.addEventListener){
          // 大部分浏览器兼容的方式
          obj.addEventListener(eventStr,callback,flase);
        }else{
          // this是由调用方式决定
          // 可以使用匿名函数调用回调函数，这样就可以指定this
          // IE8及以下浏览器，加一个on
          // obj.attachEvent("on"+eventStr,callback);
          obj.attachEvent("on"+eventStr,function(){
            // 在匿名函数中调用回调函数
            callback.call(obj);
          });
        }
      };
    </script>
  </head>
  <body style="height:2000px">
    <div id="box1"></div>
  </body>
</html>

（22）键盘的事件

<html>
  <head>
    <script>
      window.onload = function(){
        /* 键盘事件
        onkeydown 按键被按下，如果一直按着某个按键不松手，事件会一直触发
        当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快触发，是为了防止误操作的发生
        onkeyup 按键被松开，松开一次触发一次
        键盘事件一般都会绑定给一些可以获取到焦点的对象或者document
        */
        document.onkeydown = function(event){
          event = event || window.event;
          // 可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下
          // 除了keyCode，事件对象中还提供了几个固定属性
          /*altKey 按键Alt是否被按下
          **ctrlKy 按键Ctrl是否被按下
          **shiftKey 按键Shift是否被按下
          如果被按下则返回true否则返回false
            */
          // 判断y键是否被按下
          // 判断y键和Ctrl键是否被同时按下
          if(event.keyCode == 89 && event.ctrlKey){
            console.log("按键y和Ctrl都被按下了");
          }
        };
        document.onkeyup = function(){
          console.log("按键被松开了");
        };
        // 获取input
        var input = document.getElementsByTagName("input")[0];
        input.onkeydown = function(event){
          event = event || window.event;
          console.log("按键被按下");
          // 数字的keycode为48-57
          // 使文本框中不能输入数字
          if(event.keyCode >= 48 && event.keyCode <= 57){
            // 在文本框中输入内容属于onkeydown的默认行为
            // 如果在onkeydown中取消了默认行为，则输入的内容不会出现在文本框中
            return false;
          }
        };
      };
    </script>
  </head>
  <body>
    <!-- <div style="width:100px;height:100px;background-color:red;" id="box1"></div> -->
    <input type="text" />
  </body>
</html>

键盘移动vid

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
      }
    </style>
    <script>
      // 使div可以根据不同的方向键向不同的方向移动
      var box1 = document.getElementById("box1");
      document.onkeydown = function(event){
        event = event || window.event;
        // 定义一个变量来表示移动的速度
        var speed = 20;
        // 当用户按了Ctrl以后速度加快
        if(event.ctrlKey){
          spend = 200;
        }
        // keyCode 37左  38上  39右  40下
        switch(event.keyCode){
          case 37:
            // alert("向左");
            box1.style.left = box1.offsetLeft -speed +"px";
            break;
          case 39:
            // alert("向右");
            box1.style.left = box1.offsetLeft +speed +"px";
            break;
          case 38:
            // alert("向上");
            box1.style.top = box1.offsetTop -speed +"px";
            break;
          case 40:
            // alert("向下");
            box1.style.top = box1.offsetTop +speed +"px";
            break;
        }
      };
    </script>
  </head>
  <body>
    <div id="box1"></div>
  </body>
</html>

{nextPage/}

BOM（浏览器对象模型）

BOM可以通过JS来操作浏览器
在BOM中提供了一组对象，用来完成对浏览器的操作
BOM对象

// console.log(window.navigator);
console.log(navigator);
console.log(location);
console.log(history);

一、Navigator（浏览器信息）

代表当前浏览器的信息，通过该对象可以识别不同的浏览器

由于历史原因（网景公司倒闭了），Navigator对象中的大部分属性都已经不能识别浏览器了
一般只会使用userAgent来判断浏览器的信息
userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent

// appCodeName 返回浏览器名称的代码
// appName 返回浏览器的名称
// userAgent 返回一个字符串来描述浏览器的信息
// alert(navigator.appName);
// 在IE11中已经将微软和IE相关的标识都去除了，所以基本不能通过userAgent来识别浏览器是不是IE了
var ua = navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
  alert("我是火狐");
}else if(/chrome/i.test(ua)){
  alert("我是Chrome");
}else if(/msie/i.test(ua)){
  alert("我是IE浏览器");
}else if("ActiveXObject" in window){
  alert("你是IE11，我已经抓住你了");
}
// 如果不能通过userAgent来判断浏览器信息，还可以通过一些浏览器中特有的对象来判断浏览器的信息
// 比如：ActiveXObject
// alert("ActiveXObject" in window);
if("ActiveXObject" in window){
  alert("你是IE，我已经抓住你了");
}else{
  alert("你不是IE");
}

二、History（历史记录）

代表浏览器的历史记录，可以通过该对象来操作浏览器向前或向后翻页

<html>
  <head>
    <script>
      // 可以通过History来操作浏览器向前或向后翻页
      // length属性可以获取到当次访问的连接数量
      // alert(history.length);
      window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
          // alert(history.length);
          // back()方法可以用来回退到上一个页面，作用和浏览器的返回按钮一样
          // history.back();
          // forward()方法可以用来跳转到下一个页面，作用和浏览器的返回按钮一样
          // history.forward();
          // go()方法可以跳转到指定页面，需要一个整数作为参数
          // 1:表示向前跳转一个页面，相当于forward()
          // 2:表示向前跳转两个页面
          // -1:表示向后跳转一个页面，相当于back()
          // -2:表示向后跳转两个页面
          history.go(1);
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下</button>
    <h1>History</h1>
    <a href="">去下一个页面</a>
  </body>
</html>

三、Location（浏览器地址栏）

该对象中封装了浏览器的地址栏的信息

<html>
  <head>
    <script>
      window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
          // 如果直接打印Location则可以获取到地址栏的信息（当前页面的完整路径）
          // alert("location");
          // 如果直接将location修改为一个完整的路径（或相对路径），则页面会自动跳转到该路径，并且会生成相应的历史记录
          // location = "https://www.baidu.com";
          // assign()用来跳转到其他页面，作用和直接修改location一样
           // location.assign("https://www.baidu.com");
          // reload()重新加载当前页面,作用和刷新按钮一样
          // 在方法中传递一个true作为参数，则会强制清空缓存刷新
          // location.reload(true);
          // replace()可以使用一个新的页面替换当前页面，调用完毕也会跳转到新的页面，但是不会生成历史记录（不能使用回退功能）
          location.replace("https://www.baidu.com");
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下</button>
  </body>
</html>

四、Window（浏览器的窗口）

window的方法

1、定时调用

<html>
  <head>
    <script>
      window.onload = function(){
        var count = document.getElementById("count");
        // 使count中的内容自动切换
        // js的程序执行速度是非常快的
        // 如果希望一段程序可以每间隔一段时间执行一次，可以使用定时调用
        /*for(var i=0; i<100; i++){
          count.innerHTML = i;
          alert("点我");
        }*/
        // setInterval()定时调用：可以将一个函数每隔一段时间执行一次
        // 参数：1.回调函数，该函数会每隔一段时间被调用一次，2.每次调用回调函数的时间单位为毫秒
        // 返回值：返回一个Number类型的数据,这个数字用来作为定时器的唯一标识
        var num = 1;
        var timer = setInterval(function(){
          count.innerHTML = num++;
          if(num == 11){
            // 关闭定时器
            clearIntervol(timer);
          }
        },100);
        // console.log(timer);
        // clearIntervol()可以用来关闭一个定时器
        // 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
        // clearIntervol(timer);
      };
    </script>
  </head>
  <body>
    <h1 id="count"></h1>
  </body>
</html>

（1）切换图片练习

<html>
  <head>
    <script>
      window.onload = function(){
        // 使图片可以自动切换
        // 获取img标签
        var img1 = document.getElementById("img1");
        // 创建一个数组来保存图片的路径
        var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
        // 创建一个变量来保存当前图片的索引
        var index = 0;
        // 定义一个变量，用来保存定时器的标识
        var timer;
        // 为btn01绑定一个单击响应函数
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
          // 每点击一次按钮就会开启一个定时器，点击多次就会开启多个定时器，会导致切换速度加快，并且只能关闭最后一次开启的定时器
          // 在开启定时器之前，需要将当前元素上的其他定时器关闭，避免开启多个定时器
          clearInterval(timer);
          // 开启定时器来切换图片
          timer = setInterval(function(){
            // 使索引自增
            index++;
            // 判断索引是否超过最大索引
            /*if(index >= imgArr.length){
              // 则将index设置为0，使其循环切换
              index = 0;
            }*/
            // index = index % imgArr.length;
            index %= imgArr.length; //与上面for循环功能一样
            // 修改img1的src属性
            img1.src = imgArr[index];
          },1000);
        };
        // 为btn02绑定一个单机响应函数
        var btn02 = document.getElementById("btn01");
        btn02.onclick = function(){
          // 点击按钮以后停止图片的自动切换，关闭定时器
          // clearInterval()可以接收任意参数，如果参数是一个有效的定时器标识则停止对应的定时器，如果参数不是有效的标识则什么也不做
          clearInterval(timer);
        };
      };
    </script>
  </head>
  <body>
    <img id="img1" src="img/1.jpg" />
    <br/><br/>
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
  </body>
</html>

（2）修改div移动练习

<html>
    <head>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            //使div可以根据不同的方向键向不同的方向移动
            /*
             * 按左键，div向左移
             * 按右键，div向右移
             * 。。。
             */
            window.onload = function(){
                //定义一个变量，来表示移动的速度
                var speed = 10;
                //创建一个变量表示方向
                //通过修改dir来影响移动的方向
                var dir = 0;
                //开启一个定时器，来控制div的移动
                setInterval(function(){
                    /*
                     * 37 左
                     * 38 上
                     * 39 右
                     * 40 下
                     */
                    switch(dir){
                        case 37:
                            //alert("向左"); left值减小
                            box1.style.left = box1.offsetLeft - speed + "px";
                            break;
                        case 39:
                            //alert("向右");
                            box1.style.left = box1.offsetLeft + speed + "px";
                            break;
                        case 38:
                            //alert("向上");
                            box1.style.top = box1.offsetTop - speed + "px";
                            break;
                        case 40:
                            //alert("向下");
                            box1.style.top = box1.offsetTop + speed + "px";
                            break;
                    }
                },30);
                //为document绑定一个按键按下的事件
                document.onkeydown = function(event){
                    event = event || window.event;
                    //当用户按了ctrl以后，速度加快
                    if(event.ctrlKey){
                        speed = 500;
                    }else{
                        speed = 10;
                    }
                    //使dir等于按键的值
                    dir = event.keyCode;
                };
                //当按键松开时，div不再移动
                document.onkeyup = function(){
                    //设置方向为0
                    dir = 0;
                };
            };
        </script>
    </head>
    <body>
        <div id="box1"></div>
    </body>
</html>

2、延时调用

<html>
    <head>
        <script type="text/javascript">
            var num = 1;
            //开启一个定时器
            /*setInterval(function(){
                console.log(num++);
            },3000);*/
            /*延时调用，
             *     延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
             * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
             * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择*/
            var timer = setTimeout(function(){
                console.log(num++);
            },3000);
            //使用clearTimeout()来关闭一个延时调用
            clearTimeout(timer);
        </script>
    </head>
    <body>
    </body>
</html>

（1）定时器的应用一

<html>
    <head>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                //获取box1
                var box1 = document.getElementById("box1");
                //获取btn01
                var btn01 = document.getElementById("btn01");
                //定义一个变量，用来保存定时器的标识
                var timer;
                //点击按钮以后，使box1向右移动（left值增大）
                btn01.onclick = function(){
                    //关闭上一个定时器
                    clearInterval(timer);
                    //开启一个定时器，用来执行动画效果
                    timer = setInterval(function(){
                        //获取box1的原来的left值
                        var oldValue = parseInt(getStyle(box1,"left"));
                        //在旧值的基础上增加
                        var newValue = oldValue + 1;
                        //判断newValue是否大于800
                        if(newValue > 800){
                            newValue = 800;
                        }
                        //将新值设置给box1
                        box1.style.left = newValue + "px";
                        //当元素移动到800px时，使其停止执行动画
                        if(newValue == 800){
                            //达到目标，关闭定时器
                            clearInterval(timer);
                        }
                    },30);
                };
            };
            /*定义一个函数，用来获取指定元素的当前的样式
             * 参数：
             *         obj 要获取样式的元素
             *         name 要获取的样式名 */
            function getStyle(obj , name){
                if(window.getComputedStyle){
                    //正常浏览器的方式，具有getComputedStyle()方法
                    return getComputedStyle(obj , null)[name];
                }else{
                    //IE8的方式，没有getComputedStyle()方法
                    return obj.currentStyle[name];
                }
            };
        </script>
    </head>
    <body>
        <button id="btn01">点击按钮以后box1向右移动</button>
        <br /><br />
        <div id="box1"></div>
        <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
    </body>
</html>

{nextPage/}

（2）定时器的应用二

<html>
    <head>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                //获取box1
                var box1 = document.getElementById("box1");
                //获取btn01
                var btn01 = document.getElementById("btn01");
                //获取btn02
                var btn02 = document.getElementById("btn02");
                //点击按钮以后，使box1向右移动（left值增大）
                btn01.onclick = function(){
                    move(box1 , 800 , 10);
                };
                //点击按钮以后，使box1向左移动（left值减小）
                btn02.onclick = function(){
                    move(box1 , 0 , 10);
                };
            };
            //定义一个变量，用来保存定时器的标识
            var timer;
            //尝试创建一个可以执行简单动画的函数
            /*参数：
             *     obj:要执行动画的对象
             *     target:执行动画的目标位置
             *     speed:移动的速度(正数向右移动，负数向左移动) */
            function move(obj , target ,speed){
                //关闭上一个定时器
                clearInterval(timer);
                //获取元素目前的位置
                var current = parseInt(getStyle(obj,"left"));
                //判断速度的正负值
                //如果从0 向 800移动，则speed为正
                //如果从800向0移动，则speed为负
                if(current > target){
                    //此时速度应为负值
                    speed = -speed;
                }
                //开启一个定时器，用来执行动画效果
                timer = setInterval(function(){
                    //获取box1的原来的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;
                    }
                    //将新值设置给box1
                    obj.style.left = newValue + "px";
                    //当元素移动到0px时，使其停止执行动画
                    if(newValue == target){
                        //达到目标，关闭定时器
                        clearInterval(timer);
                    }
                },30);
            }
            /*定义一个函数，用来获取指定元素的当前的样式
             * 参数：
             *         obj 要获取样式的元素
             *         name 要获取的样式名 */
            function getStyle(obj , name){
                if(window.getComputedStyle){
                    //正常浏览器的方式，具有getComputedStyle()方法
                    return getComputedStyle(obj , null)[name];
                }else{
                    //IE8的方式，没有getComputedStyle()方法
                    return obj.currentStyle[name];
                }
            };
        </script>
    </head>
    <body>
        <button id="btn01">点击按钮以后box1向右移动</button>
        <button id="btn02">点击按钮以后box1向左移动</button>
        <br /><br />
        <div id="box1"></div>
        <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
    </body>
</html>

（3）定时器的应用三

<html>
  <head>
    <style>
      *{
        margin:0;
        padding:0;
      }
      #box1{
        width:100px;
        height:100px;
        background:red;
        position:absolute;
        left:0;
      }
      #box2{
        width:100px;
        height:100px;
        background:blue;
        position:absolute;
        left:0;
        top:200px;
      }
    </style>
    <!-- 引入tools工具，调用切换动画函数 -->
    <script src="js/tools.js"></script>
    <script>
      window.onload = function(){
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        var btn02 = document.getElementById("btn02");
        // 点击按钮后使box1向右移动（left增大）
        btn01.onclick = function(){
          move(box1,"left",800,20);
        };
        // 点击按钮后使box1向左移动（left减小）
        btn02.onclick = function(){
          move(box1,"left",0,10);
        };
        // 获取btn03
        var btn03 = document.getElementById("btn03");
        var box2 = document.getElementById("box2");
        btn03.onclick = function(){
          move(box2,"left",800,10);
        };
        // 获取btn04
        var btn04 = document.getElementById("btn04");
        var box2 = document.getElementById("box2");
        btn04.onclick = function(){
          // move(box2,"top",800,10);
          // move(box2,"height",800,10);
          move(box2,"width",800,10,function(){
            // alert("动画执行完了");
            move(box2,"height",400,10,function(){
              move(box2,"top",0,10,function(){
                move(box2,"width",100,10,function(){
                  move(box2,"height",100,10,function(){
                
                  });
                });
              });
            });
          });
        };
      };
      // 定义一个变量用来保存定时器的标识
      // 目前定时器由全局变量timer保存，所有正在执行的定时器都在timer变量中保存
      // var timer
    </script>
  </head>
  <body>
    <button id="btn01">点击按钮以后box1向右移动</button>
    <button id="btn02">点击按钮以后box1向左移动</button>
    <button id="btn03">点击按钮以后box2向右移动</button>
    <button id="btn04">测试按钮</button>
    <br/><br/>
    <div id="box1"></div>
    <div id="box2"></div>
    <div style="position:absolute;left:800px;top:0;width:0;height:1000px;border-left:1px black solid;"></div>
  </body>
</html>

tools.js（用于存放工具程序）

      // 尝试创建一个可以执行简单动画的函数
      // 参数:obj:要执行动画的对象
      //      attr:要执行动画的样式，比如left height top
      //      target:执行动画的目标位置
      //      speed:移动的速度（正数向右移动，负数向左移动）
      //      callback:回调函数，将会在动画执行完毕以后执行
      function move(obj,attr,target,speed,callback){
        // 关闭上一个定时器
        clearInterval(obj.timer);
        // 获取box1目前的位置
        var current = parseInt(getStyle(obj,attr));
        // 判断速度speed的正负值
        // 如果从0向800移动则speed为正，如果从800向0移动则speed为负
        if(current > target){
          // 此时速度应为负值
          speed = -speed;
        }
        // 开启一个定时器用来执行动画效果
        // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
        obj.timer = setInterval(function(){
          // 获取box1原来的left值
          var oldValue = parseInt(getStyle(obj,attr));
          // 在旧值的基础上增加,给box添加移动速度
          var newValue = oldValue + speed;
          // 向左移动时需要判断newValue是否小于target
          // 向右移动时需要判断newValue是否大于于target
          if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
            newValue = target;
          }
          // 将新值设置给obj
          obj.style[attr] = newValue + "px";
          // 当box1移动到了0px时，使其停止执行动画
          if(newValue == target){
            // 达到目标关闭定时器
            clearInterval(obj.timer);
            // 动画执行完毕，调用回调函数
            callback && callback();
          }
        },30);
      };
      /* 定义一个函数，用来获取指定元素的当前的样式
       * 参数：
       * obj 要获取样式的元素
       * name 要获取的样式名*/
      function getStyle(obj,name){
        if(window.getComputedStyle){
          //正常浏览器的方式，具有getComputedStyle()方法
          return getComputedStyle(obj,null)[name];
        }else{
          //IE8的方式，没有getComputedStyle()方法
          return obj.currentStyle[name];
        }
      };

{nextPage/}

3、轮播图的改进

<html>
  <head>
    <style>
      *{
        margin:0;
        padding:0;
      }
      #outer{
        width:520px;
        height:333px;
        margin:50px auto;
        background-color:greenyellow;
        padding:10px 0;
        /* 开启相对定位 */
        position:relative;
        /* 裁剪溢出的内容 */
        overflow:hidden;
      }
      /* 设置imgList */
      #imgList{
        /* 去除ul的项目符号 */
        list-style:none;
        /* width:2600px; */
        /* 开启绝对定位 */
        position:absolute;
        /* 设置偏移量,默认为0 */
        /* 每向左移动520px可以切换下一张图片 */
        left:0;
      }
      /* 设置列表中li */
      #imgList li{
        /* 设置浮动 */
        float:left;
        /* 设置左右外边距 */
        margin:0 10px;
      }
      /* 设置导航按钮 */
      #navDiv{
        /* 开启绝对定位 */
        position:absolute;
        /* 设置位置 */
        bottom:15px;
        /* 设置居中显示 */
        /* left:197px; */
      }
      #navDiv a{
        /* 设置超链接的浮动 */
        float:left;
        width:15px;
        height:15px;
        background-color:red;
        /* 设置左右外边距 */
        margin:0 5px;
        /* 设置透明 */
        opacity:0.5;
        /* 兼容IE8透明 */
        filter:alpha(opacity=50);
      }
      /* 设置鼠标移入的效果 */
      #imgDiv a:hover{
        background-color:black;
      }
    </style>
    <!-- 引入tools工具，调用切换动画函数 -->
    <script src="js/tools.js"></script>
    <script>
      window.onload = function(){
        // 获取imgList
        var imgList = document.getElementById("imgList");
        // 获取页面中所有的img标签
        var imgArr = document.getElementsByTagName("img");
        // 设置imgList的宽度
        imgList.style.width = 520*imgArr.length + "px";
        // 设置导航按钮居中
        // 获取navDiv
        var navDiv = document.getElementById("navDiv");
        // 获取outher
        var outer = document.getElementById("outer");
        // 设置navDiv的left值
        navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 +"px";
        // 默认显示图片的索引
        var index = 0;
        // 获取所有的a
        var allA = document.getElementsByTagName("a");
        // 设置默认选中的效果
        allA[index].style.backgroundColor = "black";
        // 点击超链接切换到指定的图片
        // 为所有的超链接都绑定一个单击响应函数
        for(var i=0; i<allA.length; i++){
          // 为每一个超链接都添加一个num属性
          allA[i].num = i;
          // 为超链接绑定单击响应函数
          allA[i].onclick = function(){
            // 关闭自动切换的定时器
            clearInterval(timer);
            // 获取点击的超链接的索引
            // alert(this.num);
            index = this.num;
            // 切换图片
            // imgList.style.laft = -520*index + "px";
            // 设置选中的a
            setA();
            // 使用move函数来切换图片
            move(imgList,"left",-520*index,20,function(){
              // 点击切换动画执行完毕，开启自动切换动画
              autoChange();
            });
          };
        }
        // 开启自动切换图片，调用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++){
            // 遍历所有的a并将背景颜色设为空，去掉内联样式，显示外部样式
            allA[i].style.backgroundColor = "";
          }
          // 将选中的a设置为黑色
          allA[index].style.backgroundColor = "black";
        };
        // 定义一个自动切换的定时器的标识
        var timer;
        // 创建一个函数来开启自动切换图片
        function autoChange(){
          // 开启一个定时器用来定时切换图片
          timer = setInterval(function(){
            // 使索引自增
            index++;
            // 判断index的值并改变index的值，形成循环
            index %= imgArr.length;
            // 执行动画切换
            move(imgList,"left",-520*index,20,function(){
              // 修改导航按钮
              setA();
            });
          },3000);
        };
      };
    </script>
  </head>
  <body>
    <!-- 创建一个外部div来作为大容器 -->
    <div id="outer">
      <!-- 创建一个ul放置图片 -->
      <ul id="imgList">
        <li><img src="img/1.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/5.jpg"/></li>
        <li><img src="img/1.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>
  </body>
</html>

{nextPage/}

4、类的操作

<html>
  <head>
    <style>
      .b1{
        width:100px;
        height:100px;
        background-color:yellowgreen;
      }
      .b2{
        height:200px;
        background-color:red;
      }
    </style>
    <script>
      window.onload = function(){
        // 获取box
        var box = document.getElementById("box");
        // 获取btn01
        var btn01 = document.getElementById("btn01");
        // 为btn01绑定单击响应函数
        btn01.onclick = function(){
          // 修改box的样式
          // 通过style属性来修改元素的样式，每修改一个样式浏览器就需要重新渲染一次
          // 这样执行的性能是比较差的，而且这种方式当需要修改多个样式时也比较麻烦
          /*box.style.width = "200px";
          box.style.height = "200px";
          box.style.backgroundColor:"red";*/
          // 一行代码可以修改多个样式
          // 修改box的class属性
          // 可以通过修改元素的class属性来间接修改样式
          // 这样只需修改一次即可同时修改多个样式，同时浏览器只需重新渲染一次，性能会提高一些
          // 这种方式可以使表现（css）和行为（js）进一步分离
          // b2会替换b1的样式
          // box.className = "b2";
          // 在b1的基础上加上b2的样式（添加一个空格防止b1和b2拼串为b1b2，应为b1 b2）
          // box.className += " b2"
          // addClass(box,"b2");
          // alert(hasClass(box,"heelo"));
          // removeClass(box,"b2");
          toggleClass(box,"b2");
        };
      };
      // 定义一个函数来向一个元素添加指定的class属性值
      /*参数：
        obj 要添加class属性的元素
        cn 要添加的class值*/
      function addClass(obj,cn){
        // 检查obj中是否含有cn
        if(!hasClass(obj,cn)){
          // 如果没有cn则添加cn（添加一个空格防止直接拼串）
          obj.className += " "+cn;
        }
      };
      // 判断一个元素中是否含有指定的class属性值
      /*参数
        obj 要添加class属性的元素
        cn 要添加的class值
        如果有该class值则返回true，否则返回false*/
      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>
  </head>
  <body>
    <button id="btn01">点击按钮修改box的样式</button>
    <div id="box" class="b1"></div>
  </body>
</html>

tools.js（工具函数）

// 尝试创建一个可以执行简单动画的函数
// 参数:obj:要执行动画的对象
//      attr:要执行动画的样式，比如left height top
//      target:执行动画的目标位置
//      speed:移动的速度（正数向右移动，负数向左移动）
//      callback:回调函数，将会在动画执行完毕以后执行
function move(obj, attr, target, speed, callback) {
    // 关闭上一个定时器
    clearInterval(obj.timer);
    // 获取box1目前的位置
    var current = parseInt(getStyle(obj, attr));
    // 判断速度speed的正负值
    // 如果从0向800移动则speed为正，如果从800向0移动则speed为负
    if (current > target) {
        // 此时速度应为负值
        speed = -speed;
    }
    // 开启一个定时器用来执行动画效果
    // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
    obj.timer = setInterval(function () {
        // 获取box1原来的left值
        var oldValue = parseInt(getStyle(obj, attr));
        // 在旧值的基础上增加,给box添加移动速度
        var newValue = oldValue + speed;
        // 向左移动时需要判断newValue是否小于target
        // 向右移动时需要判断newValue是否大于于target
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }
        // 将新值设置给obj
        obj.style[attr] = newValue + "px";
        // 当box1移动到了0px时，使其停止执行动画
        if (newValue == target) {
            // 达到目标关闭定时器
            clearInterval(obj.timer);
            // 动画执行完毕，调用回调函数
            callback && callback();
        }
    }, 30);
};
/* 定义一个函数，用来获取指定元素的当前的样式
 * 参数：
 * obj 要获取样式的元素
 * name 要获取的样式名*/
function getStyle(obj, name) {
    if (window.getComputedStyle) {
        //正常浏览器的方式，具有getComputedStyle()方法
        return getComputedStyle(obj, null)[name];
    } else {
        //IE8的方式，没有getComputedStyle()方法
        return obj.currentStyle[name];
    }
};

// 定义一个函数来向一个元素添加指定的class属性值
/*参数：
  obj 要添加class属性的元素
  cn 要添加的class值*/
function addClass(obj, cn) {
    // 检查obj中是否含有cn
    if (!hasClass(obj, cn)) {
        // 如果没有cn则添加cn（添加一个空格防止直接拼串）
        obj.className += " " + cn;
    }
};
// 判断一个元素中是否含有指定的class属性值
/*参数
  obj 要添加class属性的元素
  cn 要添加的class值
  如果有该class值则返回true，否则返回false*/
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);
    }
};

5、二级菜单完善

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <link rel="stylesheet" href="css/sdmenu.css">
    <script src="js/tools.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a,img {
            border: 0;
            text-decoration: none;
        }
        body {
            font: 12px/180%;
        }
    </style>
    <script>
        window.onload = function () {
            //   每个菜单都是一个div，当div具有collapsed这个类时，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;
                    // 关闭parenDiv,给div添加collapsed值,toggleClass判断div中是否有collapsed，有则删除，无则添加
                    toggleClass(parentDiv, "collapsed");
                    // 判断openDiv和parentDiv是否相同
                    if (openDiv != parentDiv && !hasClass(openDiv,"collapsed")) {
                        // 不相等才添加
                        // 打开菜单后给之前的菜单添加collapsed来关闭该菜单
                        // addClass(openDiv, "collapsed");
                        // 为了统一处理过渡动画，将addClass改为toggleClass
                        // 此处toggleClass()不需要有移除功能
                        toggleClass(openDiv, "collapsed");
                    }
                    // 修改openDiv为当前打开的菜单
                    openDiv = parentDiv;
                };
            }
        };
    </script>
</head>
<body>
    <div id="my_menu" class="sdmenu">
        <div>
            <span class="menuSpan">在线工具</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">合作伙伴</span>
            <a href="#">图像优化</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">图像优化</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
    </div>
</body>
</html>

二级菜单动画过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <link rel="stylesheet" href="css/sdmenu.css">
    <script src="js/tools.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a,img {
            border: 0;
            text-decoration: none;
        }
        body {
            font: 12px/180%;
        }
    </style>
    <script>
        window.onload = function () {
            //   每个菜单都是一个div，当div具有collapsed这个类时，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")) {
                        // 不相等才添加
                        // 打开菜单后给之前的菜单添加collapsed来关闭该菜单
                        // addClass(openDiv, "collapsed");
                        // 为了统一处理过渡动画，将addClass改为toggleClass
                        // 此处toggleClass()不需要有移除功能
                        // toggleClass(openDiv, "collapsed");
                        // 切换菜单的显示状态
                        toggleMenu(openDiv);
                    }
                    // 修改openDiv为当前打开的菜单
                    openDiv = parentDiv;
                };
            }
            // 用来切换菜单折叠和显示状态
            function toggleMenu(obj) {
                // 在切换类之前获取元素的高度
                var begin = obj.offsetHeight;
                // 切换parenDiv的显示,给div添加collapsed值,toggleClass判断div中是否有collapsed，有则删除，无则添加
                toggleClass(obj, "collapsed");
                // 在切换类之后获取一个高度
                var end = obj.offsetHeight;
                // console.log("begin=" + begin + ",end" + end);
                // 动画效果就是从begin向end过渡
                // 将元素的高度充值为begin
                obj.style.height = begin + "px";
                // 执行动画，从begin向end过渡
                move(obj, "height", end, 10, function () {
                    // 动画执行完毕，内联样式没有存在的意义，需要删除
                    obj.style.height = "";
                });
            };
        };
    </script>
</head>
<body>
    <div id="my_menu" class="sdmenu">
        <div>
            <span class="menuSpan">在线工具</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">合作伙伴</span>
            <a href="#">图像优化</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">图像优化</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
    </div>
</body>
</html>

五、JSON

<script>
        // - JS中的对象只有JS认识，其他的语言都不认识
        // JSON就是一个特殊格式的字符串，这个字符串可以被任何语言所识别
        //   并可以转换为任意语言中的对象，JSON在开发中主要用来进行数据的交互
        // JSON
        //   - JavaScript Object Notation   JS对象表示法
        //   - JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一样
        /* 
        JSON分类：
            1、对象{}
            2、数组[]
        JSON中允许的值：
            1、字符串
            2、数值
            3、布尔值
            4、null
            5、对象
            6、数组
        */
        // 创建一个对象
        var obj = '{ "name": "孙悟空", "age": 18, "gender": "男" }';
        // 创建一个数组
        var arr = '[1,2,3,"hello",true]';
        // console.log(obj);
        var onj2 = '{"arr":[1,2,3]}';
        var arr2 = '[{ "name": "孙悟空", "age": 18},{ "name": "孙悟空", "age": 18}]'
        /*
        将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(02[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);
    </script>

JSON的兼容性

<!-- 如果需要兼容IE7及以下，则可以通过一个外部JS文件来处理 -->
    <script src="js/json2.js"></script>
    <script>
        var str = '{ "name": "孙悟空", "age": 18, "gender": "男" }';
        // eval()可以用来执行一段字符串形式的JS代码，并返回执行结果
        // 如果使用eval()执行的字符串中含有{}，它会将{}当成是代码块
        //   如果不希望将其当成代码块解析，则需在字符串前后各加一个()
        // eval()这个功能很强大，可以直接执行一个字符串中的JS代码
        //   但是在开发中尽量不要使用，性能较差，且具有安全隐患（用户也可以传入JS代码）
        var str2 = "alert('hello')";
        // eval(str2);
        var obj = eval("("+str+")");
        // console.log(obj);
    </script>

『笔记』『教程』群晖DSM7.0.1开启ssh及sftp及root用户登录，访问群辉根目录

『原创』『教程』给你的Typecho博客侧边栏加一个恋爱计时（修复夜间模式样式）

『原创』『教程』首页及文章页滚动广告栏

DOM（文本对象模型）

（20）鼠标拖拽的事件

（21）滚轮的事件

（22）键盘的事件

BOM（浏览器对象模型）

一、Navigator（浏览器信息）

二、History（历史记录）

三、Location（浏览器地址栏）

四、Window（浏览器的窗口）

1、定时调用

（1）切换图片练习

（2）修改div移动练习

2、延时调用

（1）定时器的应用一

（2）定时器的应用二

（3）定时器的应用三

3、轮播图的改进

4、类的操作

5、二级菜单完善

五、JSON

『日记』『生活』我的电子骨灰盒——数字生命，启动！！！

『笔记』『教程』自制随机显示必应每日一图，以及API代码及调用方法

『原创』『教程』为你的博客添加阅读模式（适配Joe，其他主题也可用）

『原创』『教程』博客的侧栏增加社交信息2.0

评论 (0)

『笔记』JavaScript基础学习笔记 6

DOM（文本对象模型）

（20）鼠标拖拽的事件

（21）滚轮的事件

（22）键盘的事件

BOM（浏览器对象模型）

一、Navigator（浏览器信息）

二、History（历史记录）

三、Location（浏览器地址栏）

四、Window（浏览器的窗口）

1、 定时调用

（1）切换图片练习

（2）修改div移动练习

2、 延时调用

（1）定时器的应用一

（2）定时器的应用二

（3）定时器的应用三

3、 轮播图的改进

4、类的操作

5、二级菜单完善

五、JSON

『日记』『生活』我的电子骨灰盒——数字生命，启动！！！

『笔记』『教程』自制随机显示必应每日一图，以及API代码及调用方法

『原创』『教程』为你的博客添加阅读模式（适配Joe，其他主题也可用）

『原创』『教程』博客的侧栏增加社交信息2.0

评论 (0)

1、定时调用

2、延时调用

3、轮播图的改进