大家好，我是辣條。

給大家整理了JavaScript學(xué)習(xí)知識(shí)，對(duì)你有用的話，記得關(guān)注、評(píng)論、收藏、轉(zhuǎn)發(fā)。

目錄

JavaScript的介紹

1. JavaScript的定義

2. 小結(jié)

JavaScript的使用方式

1. 行內(nèi)式（主要用于事件）

2. 內(nèi)嵌式

3. 外鏈?zhǔn)?/a>

4. 小結(jié)

變量和數(shù)據(jù)類型

1. 定義變量

2. JavaScript注釋

3. 數(shù)據(jù)類型

4. 變量命名規(guī)范

5. 匈牙利命名風(fēng)格

6. 小結(jié)

函數(shù)定義和調(diào)用

1. 函數(shù)定義

2. 函數(shù)調(diào)用

3. 定義有參數(shù)有返回值的函數(shù)

4. 小結(jié)

變量作用域

1. 變量作用域的介紹

2. 局部變量

3. 全局變量

4. 小結(jié)

條件語(yǔ)句

1. 條件語(yǔ)句的介紹

2. 條件語(yǔ)句語(yǔ)法

3. 比較運(yùn)算符

4. 邏輯運(yùn)算符

5. 小結(jié)

獲取標(biāo)簽元素

1. 獲取標(biāo)簽元素

2. 小結(jié)

操作標(biāo)簽元素屬性

1. 屬性的操作

2. innerHTML

3. 小結(jié)

數(shù)組及操作方法

1. 數(shù)組的介紹

2. 數(shù)組的定義

3. 多維數(shù)組

4. 數(shù)組的操作

5. 小結(jié)

循環(huán)語(yǔ)句

1. 循環(huán)語(yǔ)句的介紹

2. for循環(huán)

3. while循環(huán)

4. do-while循環(huán)

5. 小結(jié)

字符串拼接

1、字符串拼接

小結(jié)

定時(shí)器

1. 定時(shí)器的介紹

2. 定時(shí)器的使用：

2. 清除定時(shí)器

5. 小結(jié)

JavaScript的介紹

學(xué)習(xí)目標(biāo)

• 能夠知道JavaScript的作用

1. JavaScript的定義

JavaScript是運(yùn)行在瀏覽器端的腳步語(yǔ)言, 是由瀏覽器解釋執(zhí)行的, 簡(jiǎn)稱js, 它能夠讓網(wǎng)頁(yè)和用戶有交互功能, 增加良好的用戶體驗(yàn)效果。

前端開(kāi)發(fā)三大塊 1、HTML：負(fù)責(zé)網(wǎng)頁(yè)結(jié)構(gòu) 2、CSS：負(fù)責(zé)網(wǎng)頁(yè)樣式 3、JavaScript：負(fù)責(zé)網(wǎng)頁(yè)行為， 比如:網(wǎng)頁(yè)與用戶的交互效果

](https://upload-images.jianshu.io/upload_images/26880418-764面試官問(wèn)你JavaScript，直接把這篇文章甩給他2/auto-orient/strip%7CimageView2/2/w/1240)

image.gif

JavaScript的使用方式

學(xué)習(xí)目標(biāo)

• 能夠知道JavaScript的使用方式

1. 行內(nèi)式（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

image.gif

2. 內(nèi)嵌式

<script type="text/javascript">        
    alert('ok！');
</script>

image.gif

3. 外鏈?zhǔn)?/h3>

<script type="text/javascript" src="js/index.js"></script>

image.gif

4. 小結(jié)

• JavaScript的使用方式有三種，分別是:
  • 行內(nèi)式
  • 內(nèi)嵌式
  • 外鏈?zhǔn)?/li>

image

image.gif

變量和數(shù)據(jù)類型

學(xué)習(xí)目標(biāo)

• 能夠說(shuō)出常用的數(shù)據(jù)類型

1. 定義變量

JavaScript 是一種弱類型語(yǔ)言，也就是說(shuō)不需要指定變量的類型，JavaScript的變量類型由它的值來(lái)決定， 定義變量需要用關(guān)鍵字 'var', 一條JavaScript語(yǔ)句應(yīng)該以“;”結(jié)尾

定義變量的語(yǔ)法格式:

var 變量名 = 值;

 var iNum = 123;
 var sTr = 'asd';

 //同時(shí)定義多個(gè)變量可以用","隔開(kāi)，公用一個(gè)‘var’關(guān)鍵字

 var iNum = 45,sTr='qwe',sCount='68';

image.gif

2. JavaScript注釋

JavaScript的注釋分為單行注釋(//注釋內(nèi)容)和多行注釋(/多行注釋/)

<script type="text/javascript">    

// 單行注釋
var iNum = 123;
/*  
    多行注釋
    1、...
    2、...
*/
var sTr = 'abc123';
</script>

image.gif

3. 數(shù)據(jù)類型

js中有六種數(shù)據(jù)類型，包括五種基本數(shù)據(jù)類型和一種復(fù)雜數(shù)據(jù)類型(object)。

5種基本數(shù)據(jù)類型：
1、number 數(shù)字類型
2、string 字符串類型
3、boolean 布爾類型 true 或 false
4、undefined undefined類型，變量聲明未初始化，它的值就是undefined
5、null null類型，表示空對(duì)象，如果定義的變量將來(lái)準(zhǔn)備保存對(duì)象，可以將變量初始化為null,在頁(yè)面上獲取不到對(duì)象，返回的值就是null

1種復(fù)合類型：
1、object 后面學(xué)習(xí)的數(shù)組、函數(shù)和JavaScript對(duì)象都屬于復(fù)合類型

//1.1 數(shù)字 number
var iOne = 10.1;

//1.2 字符串 string
var sStr = '1234';

//1.3 布爾 boolean; 
var bIsTrue = false;

//1.4 未定義 undefined
var unData;

//1.5 null 表示空對(duì)象
var nullData = null;

//1.6 object 表示對(duì)象類型
var oObj = {
   name:"隔壁老王",
   age:88
}
// 獲取變量的類型
var type = typeof(oObj);
alert(type);
// 獲取對(duì)象的name屬性
alert(oObj.name);

image.gif

4. 變量命名規(guī)范

1、區(qū)分大小寫
2、第一個(gè)字符必須是字母、下劃線（_）或者美元符號(hào)（$）
3、其他字符可以是字母、下劃線、美元符或數(shù)字

5. 匈牙利命名風(fēng)格

對(duì)象o Object 比如：oDiv
數(shù)組a Array 比如：aItems
字符串s String 比如：sUserName
整數(shù)i Integer 比如：iItemCount
布爾值b Boolean 比如：bIsComplete
浮點(diǎn)數(shù)f Float 比如：fPrice
函數(shù)fn Function 比如：fnHandler

6. 小結(jié)

• js中有六種數(shù)據(jù)類型，分別是:
  • number
  • string
  • boolean
  • undefined
  • null
  • object

image

image.gif

函數(shù)定義和調(diào)用

學(xué)習(xí)目標(biāo)

• 能夠?qū)懗龊瘮?shù)的定義和調(diào)用方式

1. 函數(shù)定義

函數(shù)就是可以重復(fù)使用的代碼塊, 使用關(guān)鍵字 function 定義函數(shù)。

<script type="text/javascript">
    // 函數(shù)定義
    function fnAlert(){
        alert('hello!');
    }
</script>

image.gif

2. 函數(shù)調(diào)用

函數(shù)調(diào)用就是函數(shù)名加小括號(hào)，比如:函數(shù)名(參數(shù)[參數(shù)可選])

<script type="text/javascript">
    // 函數(shù)定義
    function fnAlert(){
        alert('hello!');
    }
    // 函數(shù)調(diào)用
    fnAlert();
</script>

image.gif

3. 定義有參數(shù)有返回值的函數(shù)

定義函數(shù)時(shí)，函數(shù)如果有參數(shù)，參數(shù)放到小括號(hào)里面，函數(shù)如果有返回值，返回值通過(guò) return 關(guān)鍵字來(lái)返回

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}

var iCount = fnAdd(3,4);
alert(iCount);  //彈出7
</script>

image.gif

函數(shù)中'return'關(guān)鍵字的作用:
1、返回函數(shù)中的值
2、執(zhí)行完return函數(shù)執(zhí)行結(jié)束

4. 小結(jié)

• 函數(shù)的定義

    function 函數(shù)名(參數(shù)[參數(shù)可選]){  
        // 函數(shù)的代碼實(shí)現(xiàn)  
        ...  
    }
  
  

  image.gif

• 函數(shù)的調(diào)用

    函數(shù)名(參數(shù)[參數(shù)可選])
  

  image.gif

image

image.gif

變量作用域

學(xué)習(xí)目標(biāo)

• 能夠知道變量的使用范圍

1. 變量作用域的介紹

變量作用域就是變量的使用范圍，變量分為:

• 局部變量
• 全局變量

2. 局部變量

局部變量就是在函數(shù)內(nèi)使用的變量，只能在函數(shù)內(nèi)部使用。

<script type="text/javascript">
    function myalert()
    {
        // 定義局部變量
        var b = 23;
        alert(b);
    }
    myalert(); // 彈出23
    alert(b);  // 函數(shù)外使用出錯(cuò)
</script>

image.gif

3. 全局變量

全局變量就是在函數(shù)外定義的變量，可以在不同函數(shù)內(nèi)使用。

<script type="text/javascript">
    // 定義全局變量
    var a = 12;
    function myalert()
    {
        // 修改全局變量
        a++;
    }
    myalert();
    alert(a);  // 彈出13    
</script>

image.gif

4. 小結(jié)

• 局部變量只能在函數(shù)內(nèi)部使用
• 全局變量可以在不同函數(shù)內(nèi)使用

image

image.gif

條件語(yǔ)句

學(xué)習(xí)目標(biāo)

• 能夠?qū)懗龆鄺l件判斷的條件語(yǔ)句

1. 條件語(yǔ)句的介紹

條件語(yǔ)句就是通過(guò)條件來(lái)控制程序的走向

2. 條件語(yǔ)句語(yǔ)法

1. if 語(yǔ)句 - 只有當(dāng)指定條件為 true 時(shí)，使用該語(yǔ)句來(lái)執(zhí)行代碼
2. if...else 語(yǔ)句 - 當(dāng)條件為 true 時(shí)執(zhí)行代碼，當(dāng)條件為 false 時(shí)執(zhí)行其他代碼
3. if...else if....else 語(yǔ)句 - 使用該語(yǔ)句來(lái)判斷多條件，執(zhí)行條件成立的語(yǔ)句

3. 比較運(yùn)算符

假如 x = 5, 查看比較后的結(jié)果:

比較運(yùn)算符示例代碼:

var iNum01 = 12;
var sNum01 = '12';

if(iNum01==12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// "==" 符號(hào)默認(rèn)會(huì)將符號(hào)兩邊的變量轉(zhuǎn)換成數(shù)字再進(jìn)行對(duì)比，這個(gè)叫做隱式轉(zhuǎn)換
if(sNum01==12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// "===" 符號(hào)不會(huì)轉(zhuǎn)換符號(hào)兩邊的數(shù)據(jù)類型
if(sNum01===12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// 多條件判斷
var sFruit = "蘋果";
if (sFruit == "蘋果") {
    alert("您選擇的水果是蘋果");
} else if (sFruit == "鴨梨") {
    alert("您選擇的水果是鴨梨");
} else {
    alert("對(duì)不起，您選擇的水果不存在!")
}

image.gif

4. 邏輯運(yùn)算符

假如 x=6, y=3, 查看比較后的結(jié)果:

邏輯運(yùn)算符示例代碼:

var x = 6;
var y = 3;

if(x < 10 && y > 1){
    alert('都大于');
}
else{
    alert('至少有一個(gè)不大于');
}

if(x > 5 || y > 7 ){
    alert('至少有一個(gè)大于');
}
else{
    alert('都不大于');
}

if(!(x == y)){
    alert('等于')
}
else{
    alert('不等于')
}

image.gif

5. 小結(jié)

• 條件語(yǔ)句三種寫法
  • if 語(yǔ)句 適用于單條件判斷
  • if else 語(yǔ)句 適用于兩種條件的判斷(成立和不成立條件判斷)。
  • if else if else 語(yǔ)句 適用于多條件判斷

image

image.gif

獲取標(biāo)簽元素

學(xué)習(xí)目標(biāo)

• 能夠?qū)懗霁@取標(biāo)簽元素的操作

1. 獲取標(biāo)簽元素

可以使用**內(nèi)置對(duì)象 document **上的 getElementById 方法來(lái)獲取頁(yè)面上設(shè)置了id屬性的標(biāo)簽元素，獲取到的是一個(gè)html對(duì)象，然后將它賦值給一個(gè)變量，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>
<div id="div1">這是一個(gè)div元素</div>

image.gif

說(shuō)明:
上面的代碼，如果把javascript寫在元素的上面，就會(huì)出錯(cuò)，因?yàn)轫?yè)面上從上往下加載執(zhí)行的，javascript去頁(yè)面上獲取元素div1的時(shí)候，元素div1還沒(méi)有加載。

解決方法有兩種:

第一種方法：將javascript放到頁(yè)面最下邊

<div id="div1">這是一個(gè)div元素</div>

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>

image.gif

第二種方法：設(shè)置頁(yè)面加載完成執(zhí)行的函數(shù)，在執(zhí)行函數(shù)里面獲取標(biāo)簽元素。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

image.gif

說(shuō)明:
onload是頁(yè)面所有元素加載完成的事件，給onload設(shè)置函數(shù)時(shí)，當(dāng)事件觸發(fā)就會(huì)執(zhí)行設(shè)置的函數(shù)。

2. 小結(jié)

• 獲取標(biāo)簽元素需要等待頁(yè)面加載完成，使用document.getElementById('標(biāo)簽id');

image

image.gif

操作標(biāo)簽元素屬性

學(xué)習(xí)目標(biāo)

• 能夠知道獲取和設(shè)置標(biāo)簽元素屬性

1. 屬性的操作

首先獲取的頁(yè)面標(biāo)簽元素，然后就可以對(duì)頁(yè)面標(biāo)簽元素的屬性進(jìn)行操作，屬性的操作包括:

• 屬性的讀取
• 屬性的設(shè)置

屬性名在js中的寫法

1. html的屬性和js里面屬性大多數(shù)寫法一樣，但是“class” 屬性寫成 “className”
2. “style” 屬性里面的屬性，有橫杠的改成駝峰式，比如：“font-size”，改成”style.fontSize”

<style>
    .sty01{
        font-size:20px;
        color:red;
    }
    .sty02{
        font-size:30px;
        color:pink;
        text-decoration:none;
    }

</style>

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 讀取屬性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;

        // 操作class屬性,需要寫成“className”
        oA.className = 'sty02';

        // 寫(設(shè)置)屬性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

<input type="text" name="setsize" id="input1" value="20px">
<a href="#" id="link01" class="sty01">這是一個(gè)鏈接</a>

image.gif

2. innerHTML

innerHTML可以讀取或者設(shè)置標(biāo)簽包裹的內(nèi)容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //讀取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //寫入
        oDiv.innerHTML = '<a ;
    }
</script>

<div id="div1">這是一個(gè)div元素</div>

image.gif

3. 小結(jié)

標(biāo)簽屬性的獲取和設(shè)置:

1. var 標(biāo)簽對(duì)象 = document.getElementById('id名稱'); -> 獲取標(biāo)簽對(duì)象
2. var 變量名 = 標(biāo)簽對(duì)象.屬性名 -> 讀取屬性
3. 標(biāo)簽對(duì)象.屬性名 = 新屬性值 -> 設(shè)置屬性

image

image.gif

數(shù)組及操作方法

學(xué)習(xí)目標(biāo)

• 能夠根據(jù)下標(biāo)刪除指定元素

1. 數(shù)組的介紹

數(shù)組就是一組數(shù)據(jù)的集合，javascript 中，數(shù)組里面的數(shù)據(jù)可以是不同類型的數(shù)據(jù)，好比 python 里面的列表。

2. 數(shù)組的定義

// 實(shí)例化對(duì)象方式創(chuàng)建
var aList = new Array(1,2,3);

// 字面量方式創(chuàng)建，推薦使用
var aList2 = [1,2,3,'asd'];

image.gif

3. 多維數(shù)組

多維數(shù)組指的是數(shù)組的成員也是數(shù)組，把這樣的數(shù)組叫做多維數(shù)組。

var aList = [[1,2,3],['a','b','c']];

image.gif

4. 數(shù)組的操作

1、 獲取數(shù)組的長(zhǎng)度

var aList = [1,2,3,4];
alert(aList.length); // 彈出4

image.gif

2、 根據(jù)下標(biāo)取值

var aList = [1,2,3,4];
alert(aList[0]); // 彈出1

image.gif

3、 從數(shù)組最后添加和刪除數(shù)據(jù)

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //彈出1,2,3,4,5
aList.pop();
alert(aList); // 彈出1,2,3,4

image.gif

4、根據(jù)下標(biāo)添加和刪除元素

arr.splice(start,num,element1,.....,elementN)

參數(shù)解析：

1. start：必需，開(kāi)始刪除的索引。

2. num：可選，刪除數(shù)組元素的個(gè)數(shù)。

3. elementN：可選，在start索引位置要插入的新元素。

此方法會(huì)刪除從start索引開(kāi)始的num個(gè)元素，并將elementN參數(shù)插入到start索引位置。

var colors = ["red", "green", "blue"];
colors.splice(0,1);  //刪除第一項(xiàng)
alert(colors);  //green,blue

colors.splice(1, 0, "yellow", "orange");  //從第一個(gè)索引位置插入兩項(xiàng)數(shù)據(jù)
alert(colors);  //green,yellow,organge,blue

colors.splice(1, 1, "red", "purple");  //刪除一項(xiàng)，插入兩項(xiàng)數(shù)據(jù)
alert(colors);  //green,red,purple,orange,blue

image.gif

5. 小結(jié)

• 數(shù)組的定義使用一對(duì)中括號(hào)
• 獲取數(shù)組的長(zhǎng)度使用length屬性
• 從數(shù)組最后添加元素使用push方法
• 從數(shù)組最后刪除元素使用pop方法
• 根據(jù)下標(biāo)添加和刪除元素使用splice方法

image

image.gif

循環(huán)語(yǔ)句

學(xué)習(xí)目標(biāo)

• 能夠?qū)懗?種循環(huán)語(yǔ)句

1. 循環(huán)語(yǔ)句的介紹

循環(huán)語(yǔ)句就是讓一部分代碼重復(fù)執(zhí)行，javascript中常用的循環(huán)語(yǔ)句有:

• for
• while
• do-while

2. for循環(huán)

var array = [1, 4, 5];

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

image.gif

3. while循環(huán)

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

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

image.gif

說(shuō)明:

當(dāng)條件成立的時(shí)候, while語(yǔ)句會(huì)循環(huán)執(zhí)行

4. do-while循環(huán)

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

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

image.gif

說(shuō)明:

當(dāng)條件不成立的時(shí)候do語(yǔ)句也會(huì)執(zhí)行一次

5. 小結(jié)

• js中循環(huán)語(yǔ)句有:
  • for
  • while
  • do-while

image

image.gif

字符串拼接

學(xué)習(xí)目標(biāo)

• 能夠?qū)崿F(xiàn)字符串拼接的操作

1、字符串拼接

字符串拼接使用: "+" 運(yùn)算符

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

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

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

image.gif

說(shuō)明

數(shù)字和字符串拼接會(huì)自動(dòng)進(jìn)行類型轉(zhuǎn)換(隱士類型轉(zhuǎn)換)，把數(shù)字類型轉(zhuǎn)成字符串類型進(jìn)行拼接

小結(jié)

• "+" 運(yùn)算符能夠?qū)崿F(xiàn)字符串的拼接操作

image

image.gif

定時(shí)器

學(xué)習(xí)目標(biāo)

• 能夠?qū)崿F(xiàn)反復(fù)執(zhí)行的定時(shí)器

1. 定時(shí)器的介紹

定時(shí)器就是在一段特定的時(shí)間后執(zhí)行某段程序代碼。

2. 定時(shí)器的使用：

js 定時(shí)器有兩種創(chuàng)建方式：

1. setTimeout(func[, delay, param1, param2, ...]) ：以指定的時(shí)間間隔（以毫秒計(jì)）調(diào)用一次函數(shù)的定時(shí)器
2. setInterval(func[, delay, param1, param2, ...]) ：以指定的時(shí)間間隔（以毫秒計(jì)）重復(fù)調(diào)用一個(gè)函數(shù)的定時(shí)器

setTimeout函數(shù)的參數(shù)說(shuō)明:

• 第一個(gè)參數(shù) func , 表示定時(shí)器要執(zhí)行的函數(shù)名
• 第二個(gè)參數(shù) delay, 表示時(shí)間間隔，默認(rèn)是0，單位是毫秒
• 第三個(gè)參數(shù) param1, 表示定時(shí)器執(zhí)行函數(shù)的第一個(gè)參數(shù)，一次類推傳入多個(gè)執(zhí)行函數(shù)對(duì)應(yīng)的參數(shù)。

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

    // 執(zhí)行一次函數(shù)的定時(shí)器
    setTimeout(hello, 500);
</script>

image.gif

setInterval函數(shù)的參數(shù)說(shuō)明:

• 第一個(gè)參數(shù) func , 表示定時(shí)器要執(zhí)行的函數(shù)名
• 第二個(gè)參數(shù) delay, 表示時(shí)間間隔，默認(rèn)是0，單位是毫秒
• 第三個(gè)參數(shù) param1, 表示定時(shí)器執(zhí)行函數(shù)的第一個(gè)參數(shù)，一次類推傳入多個(gè)執(zhí)行函數(shù)對(duì)應(yīng)的參數(shù)。

<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重復(fù)執(zhí)行函數(shù)的定時(shí)器
    setInterval(hello, 1000);
</script>

image.gif

2. 清除定時(shí)器

js 清除定時(shí)器分別是:

• clearTimeout(timeoutID) 清除只執(zhí)行一次的定時(shí)器(setTimeout函數(shù))
• clearInterval(timeoutID) 清除反復(fù)執(zhí)行的定時(shí)器(setInterval函數(shù))

clearTimeout函數(shù)的參數(shù)說(shuō)明:

• timeoutID 為調(diào)用 setTimeout 函數(shù)時(shí)所獲得的返回值，使用該返回標(biāo)識(shí)符作為參數(shù)，可以取消該 setTimeout 所設(shè)定的定時(shí)執(zhí)行操作。

<script>
    function hello(){
        alert('hello');
        // 清除只執(zhí)行一次的定時(shí)器
        clearTimeout(t1)
    }
    // 執(zhí)行一次函數(shù)的定時(shí)器
    t1 = setTimeout(hello, 500);
</script>

image.gif

clearInterval函數(shù)的參數(shù)說(shuō)明:

• timeoutID 為調(diào)用 setInterval 函數(shù)時(shí)所獲得的返回值，使用該返回標(biāo)識(shí)符作為參數(shù)，可以取消該 setInterval 所設(shè)定的定時(shí)執(zhí)行操作。

<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重復(fù)執(zhí)行函數(shù)的定時(shí)器
    var t1 = setInterval(hello, 1000);

    function stop(){
        // 清除反復(fù)執(zhí)行的定時(shí)器
        clearInterval(t1); 
    }  

</script> 

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

image.gif

5. 小結(jié)

• 定時(shí)器的創(chuàng)建
  • 只執(zhí)行一次函數(shù)的定時(shí)器, 對(duì)應(yīng)的代碼是setTimeout函數(shù)
  • 反復(fù)執(zhí)行函數(shù)的定時(shí)器, 對(duì)應(yīng)的代碼是setInterval函數(shù)
• 清除定時(shí)器
  • 清除只執(zhí)行一次函數(shù)的定時(shí)器, 對(duì)應(yīng)的代碼是clearTimeout函數(shù)
  • 清除清除反復(fù)執(zhí)行的定時(shí)器, 對(duì)應(yīng)的代碼是clearInterval函數(shù)

image

image.gif

** 感謝大家的閱讀，對(duì)你有用的話，記得關(guān)注、評(píng)論、收藏、轉(zhuǎn)發(fā)。**