JavaScript基础入门(二)：运算符、控制流程与字符串技巧全攻略

最新推荐文章于 2025-06-02 11:05:28 发布

kdayjj966

最新推荐文章于 2025-06-02 11:05:28 发布

阅读量405

点赞数 9

CC 4.0 BY-SA版权

文章标签： java javascript 极限编程开发语言

本文链接：https://blog.csdn.net/kdayjj966/article/details/145478953

JS基础（二）

知识点一：JavaScript 操作符

算术运算符有 ：+  、-  、 *  、 /  、 %、++、--

赋值运算符有： = 、+=、-=、 *=、/=、

比较运算符有: >、>=、<、<=、==、===（全等）

逻辑运算符有：&&（与）、||（或）、! （非）

1、算数运算符

算数运算符用于对数字执行算数运算：

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	系数
++	递加
--	递减

代码：
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<script>
    var a = 1;
    var b = 5;
    var c = a + b;
    var d = a - b;
    var e = a * b;
    var f = a / b;
    var g = a % b;                  // 返回除法的余数
    a++; var h = a;                 // 递增，对数值进行递增
    a--; var i = a;                 // 递减，对数值进行递减 当前的a变量已经为2 减1为1
    var j = b ** 2;                 // 幂运算符（**）将第一个操作数提升到第二个操作数的幂。
    document.getElementById("demo1").innerHTML = c;
    document.getElementById("demo2").innerHTML = d;
    document.getElementById("demo3").innerHTML = e;
    document.getElementById("demo4").innerHTML = f;
    document.getElementById("demo5").innerHTML = g;
    document.getElementById("demo6").innerHTML = h;
    document.getElementById("demo7").innerHTML = i;
    document.getElementById("demo8").innerHTML = j;
</script>
</body>

2、赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

代码：
<body>
<p id="demo1"></p>
<script>
    var a = 1;                          //  赋值，= 赋值运算符向变量赋值。
    a += 10;                            // += 赋值运算符从变量中减去一个值。
    a -= 10;                            // -= 赋值运算符从变量中减去一个值。
    a *= 8;                             // a乘以8后赋值给a
    a /= 8;                             // a乘以8后赋值给a
    a %= 8;                             // %= 赋值运算符把余数赋值给变量。
    document.getElementById("demo1").innerHTML = a;
</script>
</body>

3、插播：JS字符串运算符

+ 运算符也可用于对字符串进行相加（concatenate，级联）。
<body>
<p id="demo1"></p>
<script>
    var t1 = "图灵课堂的老师";
    var t2 = "很帅";
    var t3 = t1 + " " + t2;
    document.getElementById("demo1").innerHTML = t3;
</script>
</body>

+= 赋值运算符也可用于相加（级联）字符串：
<body>
<p id="demo1"></p>
<script>
    t1 = "图灵课堂的老师";
    t1 += "好萌";
    document.getElementById("demo1").innerHTML = t1;
</script>
</body>

字符串和数字的相加:
相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串：
提示：如果您对数字和字符串相加，结果将是字符串！
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
    x = 7 + 8;
    y = "7" + 8;
    z = "Hello" + 7;
    document.getElementById("demo1").innerHTML = x;
    document.getElementById("demo2").innerHTML = y;
    document.getElementById("demo3").innerHTML = z;
</script>
</body>

4、比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

代码:
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<script>
    var a = 10;
    document.getElementById("demo1").innerHTML = (a == 10);         // 等于
    document.getElementById("demo2").innerHTML = (a === 10);        // 值相等并且类型相等
    document.getElementById("demo3").innerHTML = (a != 8);          // 不相等
    document.getElementById("demo4").innerHTML = (a !== 8);         // 值不相等或类型不相等
    document.getElementById("demo5").innerHTML = (a > 8);           // 大于
    document.getElementById("demo6").innerHTML = (a < 8);           // 小于
    document.getElementById("demo7").innerHTML = (a >= 8);          //    大于或等于
    document.getElementById("demo8").innerHTML = (a <= 8);          //    小于或等于
</script>
</body>

5、逻辑运算符

逻辑运算符用于判定变量或值之间的逻辑。

运算符	描述
&&	逻辑与
\	\
!	逻辑非

&&，与：代码：
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
    var x = 6;
    var y = 3;
    document.getElementById("demo1").innerHTML =x < 10 && y > 1
    document.getElementById("demo2").innerHTML =x < 10 && y < 1
    document.getElementById("demo3").innerHTML =(x < 10 && y > 1) +"<br>" +  (x < 10 && y < 1);
</script>
</body>

||，或，代码：
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
    var x = 6;
    var y = 3;
    document.getElementById("demo1").innerHTML = x == 5 || y == 5
    document.getElementById("demo2").innerHTML = x == 6 || y == 0
    document.getElementById("demo3").innerHTML =
        (x == 5 || y == 5) + "<br>" + 
        (x == 6 || y == 0) + "<br>" +
        (x == 0 || y == 3) + "<br>" +
        (x == 6 || y == 3);
</script>
</body>

!，非，代码：
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
    var x = 6;
    var y = 3;
    document.getElementById("demo1").innerHTML = !(x === y)
    document.getElementById("demo2").innerHTML = !(x > y)
    document.getElementById("demo3").innerHTML =
        !(x === y) + "<br>" + !(x > y);
</script>
</body>

知识点二：JavaScript 流程控制

简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行。

流程控制主要有三种结构：分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

顺序结构：顺序执行
分支结构：条件判断执行。根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
循环结构：循环判断执行。

顺序流程控制：按照代码的先后顺序，依次执行

分支流程控制：按照代码的先后顺序，依次执行的过程中，根据不同的条件，执行判断条件的代码，从而得到不同的结果

JS提供了两种分支结构语句：    if语句
                        switch语句

语法：
if (条件表达式) {
            // 执行语句1
        } else {
            // 执行语句2
        }





if案例1：
<body>
<p id="demo1"></p>
<script>
    var age = prompt('请输入您的年龄：');
        if (age >= 18) {
            alert('可以进入网吧');
        } else {
            alert('回去写作业');
        }
    document.getElementById("demo1").innerHTML = age;
</script>
</body>
#### prompt() 方法用于显示可提示用户进行输入的对话框。
#### alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。






if判断闰年案例2：
<body>
<p id="demo1"></p>
<script>
    var year = prompt('请您输入年份：');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert('您输入的年份是闰年');
        } else {
            alert('您输入的年份是平年');
        }
    document.getElementById("demo1").innerHTML = year;
</script>
</body>
### 算法：能被4整除且不能整除100的为闰年，或者能够被400整除的就是闰年
#### prompt() 方法用于显示可提示用户进行输入的对话框。
#### alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。




if多分支案例3：
<body>
<p id="demo1"></p>
<script>
    var score = prompt('请你输入分数：');
        if (score >= 90) {
            alert('优秀');
        } else if (score >= 80) {
            alert('不错');
        } else if (score >= 70) {
            alert('还行');
        } else if (score >= 60) {
            alert('及格了');
        } else if (score < 60) {
            alert('及格');
        } else {
            alert('请输入正确的数字！');
        }
    document.getElementById("demo1").innerHTML = score;
</script>
</body>

了解：switch

switch 语句用于基于不同条件执行不同动作。

JavaScript Switch 语句用来选择多个需被执行的代码块之一。

语法：
switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
  } 



案例：
<body>
    <p id="demo"></p>
    <script>
        var x = 1;
        switch (x) {
            case 0:
              text = "我是零";
              break;
            case 1:
              text = "我是壹";
              break;
            default:
              text = "未找到";
        }
        document.getElementById("demo").innerHTML = text;
    </script>
</body>



代码解释：
    计算一次 switch 表达式
    把表达式的值与每个 case 的值进行对比
    如果存在匹配，则执行关联代码


break 关键词：
如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。
break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。
不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。
default 关键词规定不存在 case 匹配时所运行的代码：


Switch 的细节
    如果多种 case 匹配一个 case 值，则选择第一个 case。
    如果未找到匹配的 case，程序将继续使用默认 label。
    如果未找到默认 label，程序将继续 switch 后的语句。

知识点三：JavaScript 循环

假如您需要运行代码多次，且每次使用不同的值，那么循环相当方便使用。

1、不同类型的循环

for     -     多次遍历代码块
for/in     -     遍历对象属性
while     -     当指定条件为 true 时循环一段代码块
do/while -     当指定条件为 true 时循环一段代码块

2、for循环

语法:
for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}
语句 1 在循环（代码块）开始之前执行。
语句 2 定义运行循环（代码块）的条件。
语句 3 会在循环（代码块）每次被执行后执行。



查看执行顺序案例：
<body>
<p id="demo1"></p>
<script>
    var text = "";
    for (i = 0; i < 5; i++) {
        text += "数字：" + i + "<br>";
        }
    document.getElementById("demo1").innerHTML = text;
</script>
</body>





城市名循环代码演示：
<body>
<p id="demo1"></p>
<script>
    var a = ["北京", "上海", "广州", "深圳"];
    var b = "";
    for (i = 0; i < a.length; i++) {
        b += a[i] + "<br>";
        }
    document.getElementById("demo1").innerHTML = b;
</script>
</body>



语法中的语句1可以初始化多个值，逗哈隔开即可，案例：
<body>
<p id="demo1"></p>
<script>
    var a = ["北京", "上海", "广州", "深圳"];
    var i , len , b;
    for (i = 0,len = a.length,b = ""; i < len; i++) {
        b += a[i] + "<br>";
        }
    document.getElementById("demo1").innerHTML = b;
</script>
</body>



语法中的语句1可以省略，案例：
<body>
<p id="demo1"></p>
<script>
    var a = ["北京", "上海", "广州", "深圳"];
    var i = 2;
    var len = a.length;
    var text = "";
    for (; i < len; i++) {
        text += a[i] + "<br>";
        }
    document.getElementById("demo1").innerHTML = text;
</script>
</body>






语法中的语句2：
通常语句 2 用于计算初始变量的条件。
如果语句 2 返回 true，那么循环会重新开始，如果返回 false，则循环将结束。
如果省略语句 2，那么必须在循环中提供一个 break。否则循环永远不会结束。




语法中的语句3：
通常语句 3 会递增初始变量的值。
语句 3 可做任何事情，比如负递增（i--），正递增（i = i + 15），或者任何其他事情。
语句 3 也可被省略（比如当您在循环内递增值时）：
#### 只需要去语句3，在循环体里面添加i++即可：
<body>
<p id="demo1"></p>
<script>
    var a = ["北京", "上海", "广州", "深圳"];
    var i = 0;
    var len = a.length;
    var text = "";
    for (; i < len;) {
        text += a[i] + "<br>";
        i++;
        }
    document.getElementById("demo1").innerHTML = text;
</script>
</body>

3、For/In 循环

JavaScript for/in 语句遍历对象的属性：
<body>
<p id="demo1"></p>
<script>
    var txt = "";
    var user_data = {name:"顾安", age:18, sex:"男"};
    var x;
    for (x in user_data) {
      txt += user_data[x] + " ";
    }
    document.getElementById("demo1").innerHTML = txt;
</script>
</body>

4、While 循环

只要条件为 true，循环能够一直执行代码块。

while 循环会一直循环代码块，只要指定的条件为 true。

语法:
while (条件) {
    要执行的代码块
}

案例：
<body>
<p id="demo1"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
  text += "<br>数字是 " + i;
  i++;
}
document.getElementById("demo1").innerHTML = text;
</script>
</body>

## 如果您忘了对条件中使用的变量进行递增，那么循环永不会结束。这会导致浏览器崩溃。

5、do.while循环

do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。

语法：
do {
    要执行的代码块
}

while (条件);

实例：
<body>
<p id="demo1"></p>
<script>
var text = "";
var i = 0;
do {
  text += "<br>数字是 " + i;
  i++;
}
while (i < 10);
document.getElementById("demo1").innerHTML = text;
</script>
</body>

### 不要忘记对条件中所用变量进行递增，否则循环永不会结束！

知识点四：JavaScript 字符串方法

1、length长度

length 属性返回字符串的长度：
<body>
<p id="demo1"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo1").innerHTML = txt.length;=================================
</script>
</body>

2、charAt() 下标

charAt() 方法返回字符串中指定下标（位置）的字符串：
<body>
<p id="demo1"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo1").innerHTML = txt.charAt(0);==============================
</script>
</body>

3、Replace()替换

replace() 方法用另一个值替换在字符串中指定的值：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <p id="demo1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
        <button onclick="onclick_test()">点击</button>
    </body>
    <script>
        function onclick_test() {
            var str = document.getElementById("demo1").innerHTML;
            var txt = str.replace("ABCD","1234");
            document.getElementById("demo1").innerHTML = txt;
        }
    </script>
</html>

4、split()分割

可以通过 split() 将字符串转换为数组，然后查找下标位置：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <p id="demo1">a,b,c,d</p>
        <button onclick="onclick_test()">点击</button>
    </body>
    <script>
        function onclick_test() {
            var str = 'a,b,c,d'
            var txt = str.split(",");
            document.getElementById("demo1").innerHTML = txt[0];
        }
    </script>
</html>



将英文单词拆分成字母：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <p id="demo1"></p>
    </body>
    <script>
        var str = "tulingxueyuan";
        var arr = str.split("");
        // alert(arr);
        var text = "";
        var i;
        for (i = 0; i < arr.length; i++) {
          text += arr[i] + "<br>"
        }
        document.getElementById("demo1").innerHTML = text;
    </script>
</html>

5、toUpperCase()大写

通过 toUpperCase() 把字符串转换为大写：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <button onclick="onclick_test()">试一试</button>
        <p id="demo">Hello World!</p>
    </body>
    <script>
        function onclick_test() {
          var text = document.getElementById("demo").innerHTML;
          document.getElementById("demo").innerHTML = text.toUpperCase();
            }
    </script>
</html>

6、toLowerCase()小写

通过 toLowerCase() 把字符串转换为小写：（改个参数即可）
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <button onclick="onclick_test()">试一试</button>
        <p id="demo">Hello World!</p>
    </body>
    <script>
        function onclick_test() {
          var text = document.getElementById("demo").innerHTML;
          document.getElementById("demo").innerHTML = text.toLowerCase();
            }
    </script>
</html>

7、indexOf()索引

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <p id="demo">I am Chinese</p>
    </body>
    <script>
          var str = "I am Chinese";
          // 空格算一位索引
          var pos = str.indexOf("Chinese");
          document.getElementById("demo").innerHTML = pos;
    </script>
</html>

8、Substring()截取

substring() 类似于 slice()切割。
设置两个参数：起始索引（开始位置），终止索引（结束位置）。
不同之处在于 substring() 无法接受负的索引。
<body>
    <p id="demo">I am Chinese</p>
    <script>
          var str = "I am Chinese";
          var res = str.substring(5, 12);
          document.getElementById("demo").innerHTML = res;
    </script>
</body>

###如果省略str.substring(5,12);第二个参数，则该 substring() 将裁剪字符串的剩余部分。

9、slice()切割

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
设置两个参数：起始索引（开始位置），终止索引（结束位置）。
<body>
    <p id="demo">I am Chinese</p>
    <script>
          var str = "I am Chinese";
          var res = str.slice(5,12);
          document.getElementById("demo").innerHTML = res;
    </script>
</body>


如果某个参数为负，则从字符串的结尾开始计数。
如果省略第二个参数，则该方法将裁剪字符串的剩余部分：
<body>
    <p id="demo">I am Chinese</p>
    <script>
          var str = "I am Chinese";
          var res = str.slice(-7);
          document.getElementById("demo").innerHTML = res;
    </script>
</body>

知识点五：JavaScript 数组方法

常用方法

常用方法:
1.长度：length
2.下标:[ ]
3.索引:indexOf()
4.追加:push()，加在数组最后面
5.添加:unshift()，加在数组最前面
6.后删:pop()，删除数组里面最后一个
7.前删:shift()，删除数组里面最前面一个
8.切片:slice()
9.替换:splice()
10.拼接:join()
11.排序:sort()：是按照字符编码的顺序进行排序
12.反向:reverse()
13.连接:concat()

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <p id='demo'></p>
    </body>
    <script type="text/javascript">
        var array = ['北京', '上海', '广州', '深圳']
        // 通过索引拿数组元素
        alert(array[2]);
        // 在数组最后添加元素 返回值为当前数组长度
        alert(array.push('长沙'));
        // 查看当前数组所有元素
        alert(array);
        // 在数组前添加元素 返回值为当前数组长度
        alert(array.unshift('城市'));
        // 显示当前数组元素
        alert(array);
        // 删除数组最后一个 返回当前删除的元素值
        alert(array.pop())
        // 显示当前数组元素
        alert(array);
        // 删除数组第一个元素 返回当前删除的元素值
        alert(array.shift());
        // 显示当前数据元素
        alert(array);

        // 切片 不包含第二个值本身
        document.write(array.slice(1, 3) + '<br>')

        //替换
        var fruits = ["Banana", "Orange", "Apple", "Mango"];
        // 在位置 2，添加 2 个元素，删除 1 个元素：
        fruits.splice(2, 1, "Lemon", "Kiwi");
        document.getElementById('demo').innerHTML = fruits;

        // 拼接
        alert(fruits.join('-'));

        // 新建数组
        var arr1 = ['a', 'b', 'd', 'c']
        var arr2 = ['4', '2', '9', '6']

        // 排序
        alert(arr1.sort());
        alert(arr1.reverse());

        // 链接
        alert(array.concat(arr1, arr2));

        // 几位数的排序
        var a = [100, 90, 200, 300, 50]
        var b = a.sort(function (a, b){
            return a - b;
        })
        // function(a, b){ return a-b }
        // sort() 方法比较两个值时，将值发送给比较函数，根据返回的（负、零、正）值对值进行排序。

        // 举例：
        // 比较 40 和 100 时，sort() 方法调用比较函数(40,100)。

        // 该函数计算 40-100，并返回 -60（负值）。

        // sort 函数会将 40 排序为小于 100 的值。
    </script>
</html>

补充方法

    <script>
        var num = 3.1415926;// 新建变量赋值备用
        console.log(num.toString());// 把数字转换为字符串
        console.log(num.toFixed(5));// 把数字转换为字符串，四舍五入指定小数位数的数字
        var str = '123.456 px';//新建变量赋值备用
        var str1 = '1000';//新建变量赋值备用
        console.log(parseInt(str));//解析一个字符串，返回一个整数
        console.log(parseFloat(str));//解析一个字符串，返回一个浮点数
        console.log(Number(str));//把对象的值转换为数字
        console.log(Number(str1));//把对象的值转换为数字
        console.log(isNaN(Number(str)));//isNaN() 函数用于检查其参数是否是非数字值。
        console.log(isNaN(Number(str1)));//isNaN() 函数用于检查其参数是否是非数字值。
        var arr = [1,2,3];//新建数组备用
        console.log(typeof arr);// typeof 操作符来检测变量的数据类型。
        console.log(Array.isArray(arr));//isArray()判断数组
        console.log(Array.isArray(str));//isArray()判断数组
        console.log(Array.isArray([1,2]));//isArray()判断数组
    </script>

作业：

1，建立框架：
<body>
    <button>修改一</button>
    <button>修改二</button>
    <button>修改三</button>
    <button>修改四</button>
    <button>修改五</button>
    <div id="div1"></div>
</body>

2，添加样式：
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-size: 200px 200px;     //背景图像尺寸
        }
    </style>

3，添加script样式，1234单独按钮切换背景图：
    <script>
        //获取元素
        var btn = document.getElementsByTagName("button");
        var box = document.getElementById("div1");
        //单独按钮切换背景图
        btn[0].onclick = function () {
            box.style.backgroundImage = "url('图片路径')";
        }
        btn[1].onclick = function () {
            box.style.backgroundImage = "url('图片路径')";
        }
        btn[2].onclick = function () {
            box.style.backgroundImage = "url('图片路径')";
        }
        btn[3].onclick = function () {
            box.style.backgroundImage = "url('图片路径')";
        }
    </script>

4,同一个按钮，切换多张图片：
        //方法一
        var num = 0;
        btn[4].onclick = function () {
            num++;
            if(num % 4 == 1){
                box.style.backgroundImage = "url('图片路径')";
            }else if(num % 4 == 2){
                box.style.backgroundImage = "url('图片路径')";
            }else if(num % 4 == 3){
                box.style.backgroundImage = "url('图片路径')";
            }else {
                box.style.backgroundImage = "url('图片路径')";
            }
        }




        //方法二
        var num = 0;
        btn[5].onclick = function () {
            num++;
            switch (num) {
                case 1:
                    box.style.backgroundImage = "url('图片路径')";
                    break;
                case 2:
                    box.style.backgroundImage = "url('图片路径')";
                    break;
                case 3:
                    box.style.backgroundImage = "url('图片路径')";
                    break;
                default:
                    box.style.backgroundImage = "url('图片路径')";
                    num = 0;
            }
        }