JavaScript回炉重造

Posted 2021-12-28 ZSYL

【javascript】回炉重造（三）

• 循环语句
• • 1. 循环语句的介绍
  • 2. for循环
  • 3. while循环
  • 4. do-while循环
  • 5. 小结
• 字符串拼接
• • 1. 字符串拼接
  • 小结
• 定时器
• • 1. 定时器的介绍
  • 2. 定时器的使用：
  • 3. 清除定时器
  • 4. 小结

循环语句

学习目标

• 能够写出2种循环语句

---

1. 循环语句的介绍

循环语句就是让一部分代码重复执行，javascript中常用的循环语句有:

• for
• while
• do-while

2. for循环

var array = [1, 4, 5];

for(var index = 0; index < array.length; index++)
    result = array[index];
    alert(result);

3. while循环

 var array = [1, 4, 5];        
 var index = 0;
 
 while (index < array.length) 
     result = array[index];
     alert(result);
     index++;
 

说明:

当条件成立的时候, while语句会循环执行

4. do-while循环

var array = [1, 4, 5];
var index = 0;

do 
    result = array[index];
    alert(result);
    index++;
 while (index < array.length);

说明:

当条件不成立的时候do语句也会执行一次

5. 小结

• js中循环语句有:
  • for
  • while
  • do-while

字符串拼接

学习目标

• 能够实现字符串拼接的操作

---

1. 字符串拼接

字符串拼接使用: " +" 运算符

var iNum1 = 10;
var fNum2 = 11.1;
var sStr = 'abc';

result = iNum1 + fNum2;
alert(result); // 弹出21.1

result = fNum2 + sStr;
alert(result); // 弹出11.1abc

说明

数字和字符串拼接会自动进行类型转换(隐士类型转换)，把数字类型转成字符串类型进行拼接

小结

• " +" 运算符能够实现字符串的拼接操作

定时器

学习目标

• 能够实现反复执行的定时器

---

1. 定时器的介绍

定时器就是在一段特定的时间后执行某段程序代码。

2. 定时器的使用：

js 定时器有两种创建方式：

1. setTimeout(func[, delay, param1, param2, …]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
2. setInterval(func[, delay, param1, param2, …]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

setTimeout 函数的参数说明:

• 第一个参数 func , 表示定时器要执行的函数名

• 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒

• 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

<script> 
    function hello() 
        alert('hello'); 
     

    // 执行一次函数的定时器
    setTimeout(hello, 500);

</script>

setInterval 函数的参数说明:

• 第一个参数 func , 表示定时器要执行的函数名

• 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒

• 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

<script> 
    function hello() 
        alert('hello'); 
     
    // 重复执行函数的定时器
    setInterval(hello, 1000);
</script>

3. 清除定时器

js 清除定时器分别是:

• clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
• clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)

clearTimeout 函数的参数说明:

• timeoutID 为调用 setTimeout 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作。

<script>
     function hello()
         alert('hello');
         // 清除只执行一次的定时器
         clearTimeout(t1)
     
     // 执行一次函数的定时器
     t1 = setTimeout(hello, 500);
 </script>

clearInterval 函数的参数说明:

• timeoutID 为调用 setInterval 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval 所设定的定时执行操作。

<script> 
   function hello() 
       alert('hello'); 
    
   // 重复执行函数的定时器
   var t1 = setInterval(hello, 1000);


   function stop()
       // 清除反复执行的定时器
       clearInterval(t1); 
     

</script> 

<input type="button" value="停止" onclick="stop();">

4. 小结

• 定时器的创建
  • 只执行一次函数的定时器, 对应的代码是setTimeout函数
  • 反复执行函数的定时器, 对应的代码是setInterval函数
• 清除定时器
  • 清除只执行一次函数的定时器, 对应的代码是clearTimeout函数
  • 清除清除反复执行的定时器, 对应的代码是clearInterval函数

---

加油!

感谢!

努力!