一、JS的組成之ECMAScript

（一）資料型別

JS中也存在很多的資料型別，總體上可分為基本資料型別和參考資料型別，

1、基本資料型別：

（1）Undefined:Undefined型別只有一個值即undefined，當宣告的變數未初始化時，該變數的默認值就是undefined，

（2）Null:只有一個值即null表示空，一個占位符，值undefined實際是從值null派生來的，因此ECMAScript把他們列為等值，

例如：alert(null == undefined); //true

雖然兩個值相等但是表示的意義不同，null為空值，

undefined是未定義，

（3）Boolean:表示真偽，只有兩個值true和false，

（4）Number:表示任意數字，在JS中所有值型別統稱為數字型別，

（5）String:字串型別用單引號或者雙引號賦值，

2、參考型別：

參考型別通常叫做類（class），JavaScript將參考型別轉化為物件進行處理，

JavaScript是基于物件而非面向物件，物件的默認值是null，

我們可以通過typeof(變數名)來查看一個變數所屬的資料型別，

（二）變數

命名語法：var 變數名 = 初始值; 或者 var 變數; var 變數1,變數2,變數3;

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的變數宣告</title>
</head>
<body>
</body>
<script type="text/javascript">
var name = "小老弟";
var age = 18;
var height = 150.5;
var isBoy = false;
var boyFriend = {
"name": "楊寧",
"age": 38
};
var son = null;
var daughter;
var hobby = function() {
console.log("堅持不懈~");
}
console.log(name);
console.log(age);
console.log(height);
console.log(isBoy);
console.log(boyFriend);（六）運算子
console.log(son);
console.log(daughter);
console.log(hobby);
</script>
</html>

效果圖：

（三）運算子

1、一元運算子：++ 、--：符號在前，先自增(自減)，再運算；符號在后，先運算，再自增(自減)

2、算術運算子:+ - * / % ++ -- 等，

3、賦值運算子:= += -= *= /= %= 等，

4、比較運算子:> 、< 、>= 、<=、==、!=、===(全等)、!==：型別相同直接比較，型別不同先轉換再比較，

5、邏輯運算子:&&(短路與)、||(短路或)、!(非)

6、條件（三元）運算子:運算式 ? 值1 : 值2 (運算式為true取值1，運算式為false取值2)

以上所有運算子的使用與java類似，

（四）流程控制

與java類似，不多敘述

（五）基本物件

1、Function函式物件

1、創建方法的語法格式：

（1）var func = new Function(形式引數串列,方法體);

（2）function 方法名(形式引數串列){方法體}(推薦使用);

（3）var 方法名 = function(形式引數串列){方法體};

2、方法呼叫的語法格式：

方法名稱(實際引數串列);

3、js方法的特點：

（1）方法定義時，形式引數型別不用寫，回傳值型別也不寫

（2）方法是一個物件，定義相同方法名會被覆寫

（3）在JS中方法的呼叫只和方法名有關與方法的引數無關

4、js方法的屬性：length，用于獲取實際引數的個數

代碼示例：

<!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>
    <script>
        function demo(){
            console.log("函式宣告，，，，");
        }
        function demo(a,b){
            console.log("函式宣告"+a+b);
        }
        demo();
        //有參函式
        function demo01(a,b){
            console.log(a+b);
        }
        demo01(1,2);
        function demo02(a,b){
            return a+b;
        }
        console.log(demo02(10,20)); 
        //匿名函式
        var fn = function(){
            console.log("匿名函式");
        }
        fn();
    </script>
</head>
<body>
    
</body>
</html>

2、Array陣列物件

1、創建陣列：

（1）var arr = new Array(); 空陣列

（2）var arr = new Array(默認長度) 默認長度的陣列

（3）var arr = [元素串列]; 具有初值的陣列

2、js陣列的特點：

（1）在JS中，陣列元素的型別可變

（2）在JS中陣列的長度可變

3、js陣列的屬性：length 獲取陣列長度、元素個數

4、js陣列中的常用方法：

（1）join(字符); 將陣列元素通過指定的字符拼接成字串

（2）push(); 向陣列的末尾添加一個或更多元素，并回傳新的長度

<!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>
    <script>
        var arr = new Array();
        console.log(arr);
        var arr1 = new Array(3);
        console.log(arr1);
        var arr2 = [12,"hello",true];
        console.log(arr2);
        //給陣列賦值
        arr[0] = 120;
        console.log(arr); 
        //直接向末尾添加
        arr2.push("你好");
    </script>
</head>
<body>
    
</body>
</html>

3、Boolean（了解）

①跟java一致，true/false

②定義boolean型別的變數

var b = true/false;

4、Date日期物件

1、創建日期物件：var now = new Date() 獲取當前時間，

2、日期物件的常用方法：

（1）toLocaleString()：根據本地時間格式，把 Date 物件轉換為字串，

（2）getTime()：回傳 1970 年 1 月 1 日至今的毫秒數

（3）getHours()：回傳小時數，

（4）getMinutes()：回傳分鐘數，

（5）getSeconds()：回傳秒數，

代碼示例：

<!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>
    <script>
        var d = new Date();
        console.log(d);
        //時間格式化
        console.log(d.toLocaleString());
        console.log(d.toLocaleDateString());
        console.log(d.toLocaleTimeString());
        console.log(d.getFullYear);
        console.log(d.getMonth()+1);
        console.log(d.getDate());
        console.log(d.getHours());
    </script>
</head>
<body>
    
</body>
</html>

5、Math 數學物件

1、創建：Math物件不用創建直接使用，使用時直接呼叫方法，

如：Math.方法名();

2、常用方法：

（1）random()：回傳 0 ~ 1 之間的亂數

（2）max(x,y)：回傳 x 和 y 中的最大值

（3）min(x,y)：回傳 x 和 y 中的最低值

（4）ceil(x)：對數進行向上取整

（5）floor(x)：對數進行向下取整

（6）round(x)：把數四舍五入為最接近的整數

（7）abs(x)：回傳數的絕對值

3、屬性：PI，圓周率

<!DOCTYPE html>
<html>
 <head>
     <meta charset="UTF-8">
     <title>js中的數學物件Math</title>
 </head>
 <body>
 </body>
     <script type="text/javascript">
         console.log(Math.random());//亂數
         console.log(Math.max(10, 20));//最大值
         console.log(Math.min(10, 20));//最小值
         console.log(Math.ceil(5.5));//向上取整
         console.log(Math.floor(5.5));//向下取整
         console.log(Math.round(5.5));//四舍五入
         console.log(Math.abs(-10));//絕對值
         console.log(Math.PI);//圓周率
 </script>
</html>

6、Number數字物件

1、JavaScript只有一種數字型別，數字可以帶小數點，也可以不帶，表示整數和小數

2、定義數字型別

var n = 10;

var n = 10.34;

7、String字串物件

1、創建：

（1）var str1 = "abc"; // string

（2）var str2 = new String("abc"); // object

2、常用方法：

（1）獲取字串的長度 str1.length

（2）是否以某個字符開頭 startsWith()

（3）是否以某個字符結尾 endsWith()

（4）截取字串

a、substring(起始下標,結束角標)

b、substr(起始下標,截取長度)

（5）根據某個字符拆分字串回傳陣列 split()

示例代碼：

<!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>
    <script>
        var str="Hello World!";
        console.log(str.length);
        console.log(str[2]);
        //常用方法
        console.log(str.startsWith("He"));
        console.log(str.endsWith("!"));
        console.log(str.indexOf("l"));
        console.log(str.lastIndexOf("W"));
        console.log(str.substring(0,6));
        console.log(str.substr(0,6));
        console.log(str.split(" "));
    </script>
</head>
<body>
    
</body>
</html>

8、RegExp正則運算式物件

1、單個字符：如 [a]、 [ab] 匹配a或者b 、[a-zA-Z0-9] 匹配字母或者數字[字符]

2、元字符：\d 表示數字

3、量詞符號：

?：表示出現0次或1次

*：表示出現0次或多次

+：表示出現1次或多次

{m} 出現m次

{m,}至少出現m次

{m,n}：表示m=<數量<=n

4、開始結束符號:

^ 開始

$ 結束擴展 [^abc]

5、創建正則運算式物件：

（1）var reg = new RegExp("正則運算式");

（2）var reg = /正則運算式/;

6、測驗正則驗證的方法：

test(引數)：驗證指定的字串是否符合正則定義的規范

代碼示例：

<!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>
    <script>
        var reg = new RegExp("[abc]");
        var reg1=/a/;
        console.log(reg.test("a"));
        var reg3 = /^1[3456789]\d{9}$/
        if(reg3.test("12345678998")){
            console.log("手機號");
        }else{
            console.log("不是手機號");
        }
    </script>
</head>
<body>
    
</body>
</html>

9、Global全域物件

1、Global封裝的方法不需要物件可以直接呼叫，方法名();

2、常用方法：

（1）encodeURI()：把字串編碼為 URI

（2）decodeURI()：解碼某個編碼的 URI

（3）encodeURIComponent()：把字串編碼為 URI 組件

（4）decodeURIComponent()：解碼一個編碼的 URI 組件

（5）parseInt()：決議一個字串并回傳一個整數，逐一判斷每一個字符是否是數字，直到不是數字為止，將前面的數字轉為number

（6）isNaN()：檢查某個值是否是數字,回傳false是數字，true不是數字

（7）eval()：計算 JavaScript 字串，并把它作為腳本代碼來執行

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Global全域物件</title>
</head>
<body>
</body>
</html>
<script>
    var uri ="http://xue.ujiuye.com/foreuser/login/login_url/http%3A%2F%2Fxue.ujiuye.com%2F/";
    //把字串編碼為 URI
    var encodeUri = encodeURI(uri);
    console.log(encodeUri);
    //解碼某個編碼的 URI
    var decodeUri = decodeURI(encodeUri);
    console.log(decodeUri);
    //把字串編碼為 URI 組件
    var enUriCom = encodeURIComponent(uri);
    console.log(enUriCom);
    //解碼一個編碼的 URI 組件
    var deUriCom = decodeURIComponent(enUriCom);
    console.log(deUriCom);
    var str = "10";
    //將str轉成int
    var i = parseInt(str);
    console.log(i);//10
    //檢測i是否是非數字型別
    console.log(isNaN(i));//false
    //求i的平方
    console.log(eval(i * i));//100
</script>

二、DOM物件

（一）DOM簡介

1、檔案物件模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展置標語言的標準編程介面，通過 HTMLDOM，JavaScript 能夠訪問和改變 HTML 檔案的所有元素，

2、當網頁被加載時，瀏覽器會創建頁面的檔案物件模型

（Document Object Model），

dom原理：將檔案及其檔案中所有的標簽都看作為物件，那么標簽中的屬性就是物件的屬性屬性,因此我們在獲取或者設定標簽屬性的時候可以這么用

物件.屬性名（獲取某個標簽的對應屬性值）或者物件.屬性名=xxx(給標簽的屬性設定值或者修改值)，如果修改或者獲取標簽的內容可以通過innerHTML，innerText,value等屬性實作物件.innerHTML (獲取標簽內容,包含標簽內部的標簽及樣式)物件.innerText (獲取標簽內的純文本,不包含標簽內部的標簽及樣式)

當獲取封閉標簽內容的時候，使用以上兩個屬性

---------------------------

物件.value (獲取標簽的值,表單標簽)

當獲取單標簽內容或者值的時候來使用

（二）獲取頁面元素物件

1、查找頁面元素的方法：

（1）document.getElementById(id)：通過id號來查找元素，回傳單個物件

（2）document.getElementsByTagName(name)：通過標簽名來查找元素，回傳陣列物件

（3）document.getElementsByClassName(name)：通過類名來查找元素，回傳陣列物件

（4）document.getElementsByName(name)：通過name屬性名來查找元素，回傳陣列物件

2、以上四種方法中，由于頁面中元素的id號是唯一的，所以通過id獲取的元素個數也是唯一的；而其他三種方式獲取的元素個數不唯一，所以使用時需要像陣列一樣去獲取指定的元素，

代碼示例：

<!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>
        #d{

        }
    </style>
</head>
<body>
    <div id="d" class="c">抓鴨子，抓幾只
        <a href="">開始抓</a>
    </div>
    <p class="c">嘎嘎嘎嘎嘎嘎嘎嘎</p>
</body>
<script>
    //獲取id屬性為d的標簽物件
    var obj = document.getElementById("d");
    console.log(obj);
    //獲取標簽內容
    console.log(obj.innerHTML);
    console.log(obj.innerText);
    console.log("=============================");
    var objArray = document.getElementsByClassName("c");
    //遍歷陣列
    for(var i = 0;i<objArray.length;i++){
        console.log(objArray[i].innerHTML);
    }
</script>
</html>

（三）操作頁面元素物件

1、創建dom物件

document.createElement("標簽名");

2、添加dom物件

（1）A.appendChild(B) 將B添加到A內部的最后面

（2）A.insertBefore(B, C) 將B添加到A內部C的前面

3、洗掉dom物件

（1）A.remove() 將A洗掉

（2）A.remove(B) 將A內部的B洗掉

4、替換dom物件

A.replaceChild(B, C) 用B替換A內部的C

代碼示例：

<!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>
    <script>
        function demo(){
            var aObj = document.createElement("a");
            //添加a標簽器物件herf屬性
            aObj.href = "";
            //添加內容
            aObj.innerHTML="百度一下";
            //獲取ul物件
            var ulObj = document.getElementsByTagName("ul")[0];
            ulObj.appendChild(aObj);

        }
        function demo1(){
            var iObj = document.createElement("img");
            iObj.src="1.jpg";
            iObj.width="500";
            var ulObj = document.getElementsByTagName("ul")[0];
            var liObj = document.getElementsByTagName("li")[1];
            ulObj.insertBefore(iObj,liObj);
        }
        //將第一個li標簽洗掉
        function demo2(){
            var liObj = document.getElementsByTagName("li")[0];
            liObj.remove();
        }
        function demo3(){
            var liObj = document.getElementsByTagName("li")[0];
            var ulObj = document.getElementsByTagName("ul")[0];
            ulObj.removeChild(liObj);
        }
        function demo4(){
            var aObj = document.createElement("a");
            //添加a標簽器物件herf屬性
            aObj.href = "";
            //添加內容
            aObj.innerHTML="百度一下";
            var liObj = document.getElementsByTagName("li")[1];
            var ulObj = document.getElementsByTagName("ul")[0];
            ulObj.replaceChild(aObj,liObj);
        }
    </script>
</head>
<body>
    <ul>
        <li>第一個串列項</li>
        <li>第二個串列項</li>
        <li>第三個串列項</li>
    </ul>
    <input type="button" value="添加" onclick="demo()">
    <input type="button" value="外部添加" onclick="demo1()">
    <input type="button" value="自刪" onclick="demo2()">
    <input type="button" value="他刪" onclick="demo3()">
    <input type="button" value="替換" onclick="demo4()">
</body>
</html>

（四）操作元素屬性

1、頁面元素.屬性名 = “值” 2、設定：標簽物件.setAttribute("屬性名","屬性值");

3、獲取：標簽物件.getAttribute("屬性名");

4、洗掉：標簽物件.removeAttribute("屬性名");

代碼示例：

<!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>
    .c{
        border: 1px solid red;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        background-color: blue;
    }
</style>
<script>
    function demo(){
        var divObj = document.getElementsByTagName("div")[0];
        divObj.setAttribute("class","c");
        divObj.setAttribute("style","background-image:url(1.jpg)");
        var imgObj = document.getElementsByTagName("img")[0];
        imgObj.setAttribute("title","蜘蛛俠");
    }
    //獲取img標簽物件src屬性
    function demo1(){
        var imgObj = document.getElementsByTagName("img")[0];
        console.log(imgObj.getAttribute("src"));
    }
    //給div洗掉背景圖片
    function demo2(){
        var divObj = document.getElementsByTagName("div")[0];
        divObj.removeAttribute("style");
    }
</script>
</head>
<body>
    <div></div>
    <img src="1.jpg" width="300px" alt="">
    <input type="button" value="按鈕" onclick="demo()">
    <input type="button" value="get屬性" onclick="demo1()">
    <input type="button" value="洗掉" onclick="demo2()">
</body>
</html>

（五）操作元素樣式

1、直接操作

頁面元素.style.css樣式名稱 = “值”

2、間接操作:通過類名進行操作

頁面元素.setAttribute(“class”, “類名1 類名2”)

先將css樣式定義在類中，通過行間屬性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>
        div{
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }
    </style>
    <script>
        function demo(){
            var divObj = document.getElementsByTagName("div")[0];
            divObj.style.backgroundColor="red";
            divObj.style.color="green";
        }
    </script>
</head>
<body>
    <div>
        這是一個盒子
    </div>
    <input type="button" value="添加樣式" onclick="demo()">
</body>
</html>

（六）操作元素的內容

1、標簽物件.innerHTML 獲取或者設定內容可以包含標簽

2、標簽物件.innerText 獲取或者設定內容只包含文本

3、input標簽物件.value 獲取或者設定input框中的內容

4、innerText和innerHTML語法:

獲取:標簽物件.innerHTML

修改:標簽物件.innerHTML=要修改的值

代碼示例：

<!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>
    <script>
        function demo(){
            var inObj = document.getElementsByName("username")[0];
            var t = inObj.value;
            var reg = /^[a-zA-z0-9_$]{5,10}$/
            var spanObj = document.getElementById("nameMsg");
            if(reg.test(t)){
                spanObj.innerHTML="<font color='green'>用戶名正確</font>";
            }else{
                spanObj.innerHTML="<font color='red'>用戶名不正確</font>";
            }
        }
    </script>
</head>
<body>
    用戶名：
    <input type="text" name="username" id="">
    
    <span id="nameMsg"></span><br><br>    
    <input type="button" value="點擊" onclick="demo()">
</body>
</html>

（七）事件

1、元素被執行某種操作，觸發某些代碼

2、如何為頁面元素物件系結事件

（1）在標簽中指定事件的屬性：<button id="btn"οnclick="func01()">點我啊</button>

需要在腳本中，先行定義好func01這個方法~

（2）獲取標簽元素系結事件：

document.getElementById("btn").onclick =function(){}

第二種系結事件用到的是匿名函式，直接書寫方法體代碼即可

3、常見事件

代碼示例：

<!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>
    <script>
        function demo(){
            console.log("獲取焦點");
        }
        function demo1(){
            console.log("失去焦點");
        }
        function demo2(){
            console.log("滑鼠移入");
        }
        function demo3(){
            console.log("滑鼠移出");
        }
        function demo4(){
            console.log("鍵盤按下");
        }
        function demo5(){
            console.log("鍵盤松開");
        }
        function demo6(){
            console.log("雙擊事件");
        }
    </script>
</head>
<body>
    <div>div區域</div>
    <select name="" id="d1"></select>
    <input type="text" name="" onfocus="demo()" onblur="demo1()" onkeydown="demo4()" onkeyup="demo5()" id="">
    <div style="border: 1px solid red;height: 300px;width: 300px;" onm ouseover="demo2()" onm ouseout="demo3()"></div>
    <input type="button" value="雙擊事件" ondblclick="demo6()">
</body>
</html>

三、BOM物件

（一）BOM簡介

1、Bom(browser object model)：瀏覽器物件模型，在瀏覽器頁面初始化時，會在記憶體創建一個全域物件，用來描述當前視窗的屬性和狀態，這個全域物件被稱為瀏覽器物件模型，

2、Bom有一個核心的物件window，window物件包含了6個核心模塊

1、document物件:檔案物件

2、Frames物件:html的自框架

3、History物件:頁面的瀏覽記錄

4、Location物件:當前頁面的地址

5、Navigator物件:包含了瀏覽器相關資訊

6、Screen物件:顯示螢屏相關資訊

（二）Window

① 介紹

1、所有的瀏覽器都支持window物件，它表示瀏覽器視窗，呼叫函式時window可以省略，所有JavaScript全域物件、函式以及變數均自動成為window物件的成員，

2、全域變數是window物件的屬性，

3、全域函式時window物件的方法，

4、比如說html dom的document也是window物件的屬性之一，

Window.document.getElementById(),window可以省略

② 創建

直接使用window物件

③ 方法

1. 彈窗方法

1. alert(); 顯示帶有一段訊息和一個確認按鈕的警告框演示

2. confirm(); 顯示帶有一段訊息以及確認按鈕和取消按鈕的對話框演示

3. prompt(); 顯示可提示用戶輸入的對話框演示

2 打開關閉方法

(1) open(”打開視窗的路徑“); 打開一個新的瀏覽器視窗或查找一個已命名的視窗

(2) close(); 關閉瀏覽器視窗

3、定時器方法

JS中的定時器函式有兩種：

1、周期定時器：按照指定的周期來呼叫函式或代碼串，執行多次，

var timeid=Window.setInterval(code,millisec);

window.clearInterval(timeid);清除定時器，使定時器停止執行函式或代碼串，

引數說明：

code:要呼叫的函式或要執行的代碼串，

millisec:周期性執行或呼叫 code 之間的時間

間隔，以毫秒為單位，

2、超時定時器：在指定的毫秒數后呼叫函式或代碼串，只執行一次，

var timeid=Window.setTimeout(code,millisec);

window.clearTimeout(timeid);清除定時器,

可以阻止定時器的執行，

引數說明：

code:要呼叫的函式或要執行的代碼串，

（六）Location

1、window.location 物件可用于獲取當前頁面地址（URL）并把瀏覽器重定向到新頁面

2、window.location 物件在撰寫時可不使用 window 這個前綴，

3、創建:window.location/location

4、方法:reload():重繪當前頁面

5、屬性href:獲取請求的URL/跳轉指定的URL地址中

6、案例：3秒跳轉頁面

代碼示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3秒跳轉頁面</title>
</head>
<body>
    <span id="s1" style="font-size:40px;">3</span>
</body>
</html>
    <script>
        var c;
        //頁面加載完成事件
        window.onload = function() {
        //周期定時器
            c = window.setInterval(forward,1000);
        }
        var i = 3;
        function forward() {
            i--;
            document.getElementById("s1").innerText =
            i;
            if(i == 0) {
            //跳轉到百度
            window.location.href="http://www.baidu.com";
            //清除定時器
            window.clearInterval(c);
            }
        }
</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/352235.html

標籤：其他

上一篇：React + node.js + VScode 搭建前端開發環境

下一篇：JavaScript異步編程

java第二階段之JavaScript

一、JS的組成之ECMAScript

（一）資料型別

1、基本資料型別：

2、參考型別：

（二）變數

（三）運算子

（四）流程控制

（五）基本物件

1、Function函式物件

2、Array陣列物件

3、Boolean（了解）

4、Date日期物件

5、Math 數學物件

6、Number數字物件

7、String字串物件

8、RegExp正則運算式物件

9、Global全域物件

二、DOM物件

（一）DOM簡介

（二）獲取頁面元素物件

1、查找頁面元素的方法：

（三）操作頁面元素物件

1、創建dom物件

2、添加dom物件

3、洗掉dom物件

4、替換dom物件

（四）操作元素屬性

（五）操作元素樣式

1、直接操作

2、間接操作:通過類名進行操作

（六）操作元素的內容

（七）事件

三、BOM物件

（一）BOM簡介

（二）Window

（六）Location