javascript(定时器的应用，类的操作，JSON)

最新推荐文章于 2024-07-20 23:54:17 发布

花京院嚯

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量127

点赞数 2

分类专栏： javascript 文章标签： javascript json 前端

本文链接：https://blog.csdn.net/m0_62520946/article/details/126071342

版权

javascript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

定时器的应用（轮播图）

类的操作

JSON

定时器的应用（轮播图）

1.HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 去掉默认的外边距和内边距 */
    * {
      margin: 0;
      padding: 0;
    }
    img {
      width: 200px;
      height: 400px;
    }
    #outer {
      /* 设置宽和高 */
      width: 220px;
      height: 400px;
      /* 居中 */
      margin: 50px auto;
      /* 背景颜色 */
      background-color: skyblue;
      padding: 10px 0;
      /* 开启相对定位 */
      position: relative;
      /* 裁剪溢出的内容 */
      overflow: hidden;
    }
    /* 设置imgList */
    #imgList {
      /* 去除项目符号 */
      list-style: none;
      /* ul的宽度 */
      /* width: 1100px; */
      /* 开启相对定位 */
      position: absolute;
      /* left: -220px; */
    }
    /* 由于li为块元素，所以要对图片行排列 */
    #imgList li {
      float: left;
      margin: 0 10px;
    }
    #navDiv {
      position: absolute;
      /* 设置位置 */
      bottom: 10px;
      /* 设置left值
      outer宽度  220
      navDiv宽度16*5=80
      220-80=140
      140/2=70
       */
      /* left: 70px; */

      /* 设置导航居中 */
    }
    #navDiv a {
      /* 设置超链接浮动 */
      float: left;
      /*由于内敛样式不能设置宽高，所以，对a进行浮动 */

      /* 设置超链接的宽高 */
      width: 10px;
      height: 10px;
      /* 背景色 */
      background-color: cornsilk;
      /* 设置左右外边距 */
      margin: 0 3px;
      /* 设置透明 */
      opacity: 0.7;
      /* 兼容IE8透明 */
      filter: alpha(opacity=50);
    }

    /* 设置鼠标一如的效果 */
    #navDiv a:hover {
      background-color: black;
    }
  </style>
  <script src="tools.js"></script>
  <script>
    window.onload = function () {
      // 获取imgList
      var imgList = document.getElementById("imgList");
      // 获取页面中的所有img标签
      var imgArr = document.getElementsByTagName("img");
      // 设置imgList的宽度
      imgList.style.width = 220 * imgArr.length + "px";

      //   设置导航按钮居中
      // 获取navDiv
      var navDiv = document.getElementById("navDiv");
      // 获取outer
      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("hello")
          // 获取点击超链接的索引
          // alert(this.num);
          index = this.num;
          // 切换图片
          // 0 0
          // 1 -220
          // 2 -440
        //   imgList.style.left = -220 * index + "px";
          setA();
          // 使用move函数来切换图片
          move(imgList, "left", -220 * index, 20, function () {
            autoChange();
          });
        };
      }

      // 开启自动切换图片
      autoChange();
      // 创建一个方法用来设置选中的a
      function setA() {
        if (index >= imgArr.length - 1) {
          index = 0;
          // 通过css将最后印章切换成第一张
          imgList.style.left = 0;
        }
        // 遍历所有a，并将他们的背景颜色设置为红色
        for (var i = 0; i < allA.length; i++) {
          allA[i].style.backgroundColor = "";
          // 内联样式去了之后，就会恢复为默认样式
        }

        // 选中的a背景颜色设置为黑色
        allA[index].style.backgroundColor = "black";
      }
      var timer;
      // 创建一个函数，用来开启自动切换图片
      function autoChange() {
        timer=setInterval(function () {
          // 使索引自增
          index++;
          // 判断index的值
          index%=imgArr.length;
          // 执行动画，切换图片
          move(imgList, "left", -220 * index, 20, function () {
            // 修改导航点
            setA();
          });
        }, 3000);
      }
    };
  </script>
  <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>

2.JS代码

// 定义一个变量来保存定时器的标识
      // var timer;
      // 创建一个可以执行简单动画的函数
      // obj:要执行的对象
      // attr:改变,height,top,width,left
      // speed:速度（向右为加，向左为减）
      // target:目标位置
      // callback:回调函数在动画执行完之后完成
      function move(obj, attr, target, speed, callback) {
        // 关闭上一个定时器,否则定时器会连续加上
        clearInterval(obj.timer);
        var current = parseInt(getStyle(obj, attr));

        // 判断速度的正负值
        if (current > target) {
          speed = -speed;
        }

        // 开启定时器，用来执行动画效果
        // 即每一定时间执行一次函数
        // 向执行动画的对象中添加一个timer属性，用来保存他自己的定期的标识
        obj.timer = setInterval(function () {
          var oldValue = parseInt(getStyle(obj, attr));
          // 在旧值上增加
          var newValue = oldValue + speed;
          // 判断newVaule是否大于800
          if (
            (newValue < target && speed < 0) ||
            (speed > 0 && newValue > target)
          ) {
            newValue = target;
          }
          //将新值设置给box1
          obj.style[attr] = newValue + "px";
          // 希望停止到800px
          if (newValue == target) {
            clearInterval(obj.timer);
            callback && callback();
          }
        }, 30);
      }

      //   获取元素的任意样式
      function getStyle(obj, name) {
        // alert(getComputedStyle);

        if (window.getComputedStyle) {
          // 正常浏览器
          return getComputedStyle(obj, null)[name];
        } else {
          // IE8浏览器
          return obj.currentStyle[name];
          //return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
        }
      }

类的操作

修改box的样式

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便

因此，设置一行代码，可以同时修改多个样式

通过修改元素的class属性来间接修改样式，此时浏览器只需要重新渲染页面一次，性能比较好

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .b1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .b2 {
        height: 200px;
        background-color: yellow;
      }
    </style>
    <script>
      window.onload = function () {
        // 获取box
        var box = document.getElementById("box");
        // 获取btn01
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
          // 修改box的样式
          // box.style.width="200px";
          // box.style.height="200px";
          // box.style.backgroundColor="yellow";
          //   box.className += " b2";
        //   addClass(box, "b2");
        //   alert(hasClass(box,"hello"));
        //     removeClass(box,"b2");
        toggleClass(box,"b2");
        };
      };

      //   向某一属性添加属性值
      // 参数：
      // obj  要添加class属性的元素
      // cn  要添加的class值
      function addClass(obj, cn) {
        // 检查obj中含有cn
        if(!hasClass(obj,cn)){
            obj.className+=" "+cn;
        }
        
      }
      //   判断一个元素中是否含有指定的class属性值
      function hasClass(obj, cn) {
        //创建一个正则表达式
        // var reg=/\bb2\b/;
        var reg=new RegExp("\\b"+cn+"\\b");
        return reg.test(obj.className);
      }

      function removeClass(obj,cn){
        // 创建一个正则表达式
        var reg=new RegExp("\\b"+cn+"\\b");
        // 删除class
        obj.className=obj.className.replace(reg,"");

      }

      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>
    <br /><br />
    <div id="box" class="b1 b2"></div>
  </body>
</html>

JSON

JavaScript Object Notation js对象表示法

js中的对象只有js自己认识，其他语言都不认识
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中用来数据的交互
JSON和js对象的格式一样，只不过JSON字符串的属性名必须加双引号，其他的和js对象语法一致

JSON分类：

对象{}
数组[]

JSON中允许的值

字符串
数值
布尔值
null
对象（不包括函数）
数组

在js中，为我们提供了一个工具类，就叫JSON。这个对象可以帮助我们将一个JSON转换为JS对象，也可以将JS对象转换为JSON。（注意：JSON对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错。如果需要兼容，则引入一个外部的JS文件来处理）

1.将JSON转换为JS对象：JSON.parse()

他需要一个字符串作为参数，会将该字符串转换为JS对象返回

// 创建一个对象
        var obj='{"name":"孙悟空","age":"18","gender":"男"}';
        var arr='[1,2,"hello",true]';

        var o=JSON.parse(obj);
        var o2=JSON.parse(arr);
        console.log(o.name);
        console.log(o2[1]);

        console.log(typeof obj);//string

2.将JS对象转换为JSON字符串：JSON.stringify()

需要一个JS对象作为参数，会返回一个JSON字符串

var obj3={name:"猪八戒",age:23,gender:"男"};
        var str=JSON.stringify(obj3);
        console.log(str);

3.eval()这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回

如果使用eval()执行的字符串中含有{}，他会将{}当成代码块。如果不希望将其当成代码块解析，只需要在字符串前后各加一个（）

注意：这个函数的功能很强大，可以直接执行一个字符串中的JS代码，但是在开发中尽量不要使用，首先他的执行性能比较差，而且他还有安全隐患。

obj=eval("("+str+")");
        console.log(obj);

花京院嚯

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javascript(定时器的应用，类的操作，JSON)

在js中，为我们提供了一个工具类，就叫JSON。这个对象可以帮助我们将一个JSON转换为JS对象，也可以将JS对象转换为JSON。如果需要兼容，则引入一个外部的JS文件来处理）通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便。如果不希望将其当成代码块解析，只需要在字符串前后各加一个。他需要一个字符串作为参数，会将该字符串转换为JS对象返回。需要一个JS对象作为参数，会返回一个JSON字符串。...
复制链接

扫一扫