第五模塊：WEB開發基礎第2章·JavaScript基礎

時間 2019-11-29

標籤第五模塊 web 開發基礎 javascript 欄目 HTML 简体版

原文原文鏈接

01-JavaScript的歷史發展過程
02-js的引入方式和輸出
03-命名規範和變量的聲明定義
04-五種基本數據類型
05-運算符
06-字符串處理
07-數據類型轉換
08-流程控制語句if
09-switch
10-while
11-do_while
12-for循環
13-for循環練習
14-數組的建立和使用
15-數組的經常使用方法
16-函數的使用
17-Object_構造函數
18-String_Number
19-Data的使用
20-Math對象的使用
21-定時器的使用
22-正則表達式建立
23-元字符和正則表達式練習案例
24-模態框案例
25-點擊有驚喜案例
26-簡易留言板
27-選項卡
28-仿淘寶搜索框
29-獲取當前最新的時間
30-勻速運動案例
31-5秒以後關閉廣告
32-小米滾動
33-無縫輪播圖
34-BOM_輸出
35-open_close
36-BOM的其餘對象
37-client系列
38-屏幕的可視區域
39-offset系列
40-scroll系列

01-JavaScript的歷史發展過程

一、爲何要學習JavaScript？！

表單驗證——減輕服務器壓力；
製做頁面特效；
動態改變頁面內容；

二、JavaScript是什麼以及其歷史發展過程；

　　JavaScript是一種Web前端的描述語言，也是一種基於對象(Object)和事件驅動(Event Driven)的安全性好的腳本語言。javascript

　　JavaScript運行在客戶端，從而可以減輕服務端的壓力；css

1）JavaScript的特色以下：html

一、主要用來向html頁面中添加交互行爲（如何理解‘交互’二字呢？）；前端

二、是一種腳本語言，語法和C語言系列語言的語法相似，屬於「弱語言」類別；java

三、通常用來編寫客戶端腳本，如Node.js例外；python

四、是一種解釋型語言，邊執行邊解釋無需另外編譯；web

2）歷史老是驚人的類似（我隨口說的），詳情見知乎大牛闡述；正則表達式

https://zhuanlan.zhihu.com/p/27985124數組

三、JavaScript的一些典型應用；

　　JavaScript的用途是解決頁面交互和數據交互，最終目的是豐富客戶端效果以及數據的有效傳遞。瀏覽器

實現頁面交互，提高用戶體驗實現頁面特效，即js操做html的dom節構或操做樣式；
客戶端表單驗證即在數據送達服務端以前進行用戶提交信息即時有效地驗證，減輕服務器壓力，即數據交互；

實際應用場景：

切水果
憤怒的小鳥

2004年雅典奧運會

https://2004.sina.com.cn/

2008年北京奧運會

https://2008.sina.com.cn/

2010年南非世界盃

https://2010.sina.com.cn/

2016里約奧運會

https://2016.sina.com.cn/

四、JavaScript和ECMAScript的關係是什麼？

　　ECMAScript是腳本程序設計語言的Web標準；

　　ECMAScript是歐洲計算機制造商協會，基於美國網景通信公司的Netscape發明的javaScript和Microsoft公司隨後模仿javaScript推出JScript腳本語言制定了ECMAScript標準；

五、JavaScript由哪幾部分組成？

ECMAScript；
DOM；
BOM；

02-js的引入方式和輸出

一、Js之父；

　　Brendan Eich在1995年在Netscape發明了JavaScript語言；

　　貌似偉大的事情，都是發生在咱們九零後出生的年代，說明咱們可能不通常，會改變世界！哈哈。

二、Js的核心語法初識；

數據類型；
常量和變量；
運算符；
表達式；
條件判斷語句；
循環語句；
跳轉語句；
異常處理語句；

總之，語言是相同的，只是不一樣的語言有各自的「特性」，即咱們不同！

三、Js的基本結構；

1）有圖有真相啦！

四、Js開發工具簡介；

1）推薦只以爲更好的吧！（主要是國產，支持中文社區蓬勃發展）

五、編寫人生中的第一個JavaScript實例（保持儀式感）；

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>02-js的引入方式和輸出之編寫人生中的第一個JS文件</title>
    <style type="text/css">
        .span1{
            color: red;
        }
    </style>
    <!--不推薦在此處寫JavaScript-->
    <!--<script type="text/javascript">
        
    </script>-->
    <!--引入js文件的方式以外鏈式-->
    <script src="./js/1外鏈式引入js方式.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <!--DOM-Document Object Model-行內式引入JS的方式-->
    <p id="p1" onclick="clickhandler()">123</p>
    <!--<span>崔曉昭愛學習</span>-->
</body>
<!--引入js文件的方式以內部式，建議引入的時候要放在body標籤以後，由於
    咱們要等待全部的DOM元素加載完成以後再去執行相應的JS操做；
-->
<script type="text/javascript">
    document.write('有一首歌叫作:我愛你中國')
    document.write('<span class="span1">13811221893</span>')
    function clickhandler () {
        //彈出警告框
        /*
        這是一個方法，
        一個很好的方法，
        以上就是JavaScript的多行註釋的使用方法；
        */
//        alert(1);
        window.alert('崔曉昭，一名優秀的開源社區開發者！');
        console.log('李靜瓶，今天真的很漂亮！')
        console.error('拋出異常啦！')
        console.dir(window)
    }
</script>    
</html>

六、JS的經常使用輸出方式；

document.write('崔曉昭')#向文檔內輸入內容，不會覆蓋原文檔的內容；
console#控制檯，輸出 [開發者工具]、F12快捷鍵；
console.log()#向控制檯拋出一條信息；
console.error()#向控制檯拋出異常信息；
console.dir()#輸入一個對象的所有屬性;
console.clear()#清除內容;

小結：每一個能獨立完成一個功能的代碼以分號結束，這就是一個代碼塊；

alert()#彈出一個帶有一條指定消息的信息(警告)；
innerHTML/innerText#獲取或者向指定元素內添加內容；
innerHTML#獲取元素內全部的內容(包括元素),還能夠解析內容的樣式；
innerText獲取元素內的文本內容；

03-命名規範和變量的聲明定義

一、Js的變量初識；

變量;
常量（不發生變化的量，好比911事件的發生日期）；

　　即在程序運行過程當中它的值是容許改變的量。與它對應的就是常量：即在程序運行過程當中它的值是不容許改變的量;

　　變量是指程序中一個已經命名的存儲單元，他的主要做用就是爲數據操做提供存放信息的「容器」。變量的兩個特徵，變量名和變量值。好比能夠把變量看作是一個貼着標籤的盒子，標籤上的名字就是這個變量的名字，而盒子裏面的東西就是變量的值。

二、變量的聲明和定義；

先聲明，後定義；
聲明時候馬上定義；

var dog;
// alert(dog) //undefined  未定義
// 定義
dog = '小黃';

var dog_2 = '小紅';
console.log(dog_2); //小紅

三、變量名的命名規範；

一、必須以字母或下劃線開頭，其餘字符能夠是字母、數字以及下劃線的任意組合；
二、變量名不能包含空格，如+或-等符號；
三、JavaScript嚴格區分大小寫，如UserName不等價於username
四、不能使用JavaScript中的保留字和關鍵字，如else、int、long、throw等，具體見表格中體現；
五、除了關鍵字外，top、name也儘可能不要使用，避免瀏覽器解析異常；
六、變量名要見文知意，好比var fdasfda=19930911，神仙都看不懂；
七、不要使用拼音，也不太太長，應該使用英文單詞，好比var age = 26 ;而不是var nianling=26;
八、變量定義結束後，要以分號結尾;（事實上，咱們建議每一行Js代碼結尾都是分號，養成好習慣！）

四、常見的js中的保留字和關鍵字；

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>03-命名規範和變量的聲明定義</title>
    <style type="text/css">

    </style>

</head>
<body>
    <script type="text/javascript">
        //變量的聲明：
        //js中的代碼的執行順序：自上而下！
        //一、先聲明，再定義；
        var dog;
        alert(dog)//undefined，未定義的
        dog = '小黃';
        alert(dog)
//        alert(dog)
//        alert(dog)
//        alert(dog)
//        alert(dog)
//        alert(dog)
//        alert(dog)
        //二、聲明變量的時候，馬上定義；
        var dog2 = '小紅';
        alert(dog2)
        //三、變量的命名規範
        /*
        一、必須以字母或下劃線開頭，其餘字符能夠是字母、數字以及下劃線的任意組合；
        二、變量名不能包含空格，如+或-等符號；
        三、JavaScript嚴格區分大小寫，如UserName不等價於username
        四、不能使用JavaScript中的保留字和關鍵字，如else、int、long、throw等，具體見表格中體現；
        五、除了關鍵字外，top、name也儘可能不要使用，避免瀏覽器解析異常；
        六、變量名要見文知意，好比var fdasfda=19930911，神仙都看不懂；
        七、不要使用拼音，應該使用英文單詞，好比var  age = 26 ;而不是var nianling=26;
        八、變量定義結束後，要以分號結尾;
        
         命名法：
         一、駝峯命名法bornDate、firstName、trueAge；
         二、下劃線分割法come_from、birth_date；
         三、匈牙利命名法：就是根據數據類型單詞的首字符做爲前綴，如i_number；
         固然，建議使用駝峯命名法；
        */
    </script>
</body>
</html>

04-五種基本數據類型

一、JavaScript中的數據類型；

基本數據類型；
引用數據類型；

二、基本數據類型初識；

number(js中統一爲數字類型);
string;
boolean;
null;
undefined;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-五種基本數據類型</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //js中有兩種數據類型：一、基本數據類型；二、引用數據類型；
        //基本數據類型：：number、string、boolean、null、undefined；
        
        //一、數字類型number;
        var a = 123;
        console.log(a)
        //如下兩種方法都可，查看數據類型;
        console.log(typeof a)#推薦使用該方法；
        console.log(typeof(a))
        
        
        //二、字符串類型string;
        var str = 'cuixiaozhao';
        console.log(str)
        //查看數據類型；
        console.log(typeof str)
        
        
        //三、布爾類型boolean;
        var b1 = true;
        console.log(typeof(b1))
        var b1 = false;
        console.log(typeof b1)
        
        //四、null；
        var c1 = null;//空對象.object
        console.log(c1)//null
        
        //五、未定義類型undefined;
        var d1;
        console.log(d1)//undefined
        console.log("類型:",typeof d1)//undefined
        
        //六、無限大-Infinity;
        var e1 = 5/0 //除數不能爲零,不符合邏輯;但0/0返回值爲NaN，即Not a Number；
        console.log(e1)//Infinity-無限大,可是數據類型爲：number，試想：無限大的數字，本質也仍是數字嘛;
        console.log(typeof e1)
    </script>
</body>
</html>

05-運算符

一、運算符概念初識；

　　js中的運算符跟python中的運算符有點相似，但也有不一樣。所謂運算,在數學上，是一種行爲，經過已知量的可能的組合，得到新的量。

二、賦值運算符；

三、算數運算符；

四、比較運算符；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-運算符</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //一、賦值運算符；
        var money = prompt('請輸入金額:');
        var savaMoney = money*(1+0.02);
        console.log(savaMoney);
        
        //二、算數運算符；
        var a = 10;
        var b = 4;
        var sum = a + b;
        var min = a - b;
        
        var div = a / b;
        console.log(div)
        
        var lef = a % b;
        console.log(lef)
        
        //三、符合運算符；
        var c =7,d = 8;
//        var e;
//        e = c + d;
//        console.log(e)
        //使用如下方法代替；
         d = c + d;
         d += c//+和=之間不能有空格；
         
        //自增、自減；
        //d++:先賦值再++，即先將d的值賦值給c1而後再讓d+1對d進行再次賦值；
        var c1 = d ++;
        var c2 = ++ d;
        
        //三、比較運算符；
        //>,<,>=,<=,==,===
        console.log(5>6)//false
        console.log(5==5)//true
        //隱式轉換：==是比較值的大小，===是值和類型都進行比較;
        console.log("5"==5)//true
        console.log("5"===5)//false
        
        //四、邏輯運算符；
        // &&-and(且),即「都真爲真」，只要有一個假就是假；
        console.log("",true&&false)
        
        // ||-or(或)，即「有真就真」,兩個都爲假纔是假；
        console.log(false||false)//false
        console.log(false||true)//true
        
        //五、 字符串的拼接；
        var cxz = 'cuixiaozhao';
        var ljp = 'lijingping';
        var cxz_ljp_sum = cxz + ljp;
        var cxz_ljp_mul = cxz * ljp;
        console.log(cxz_ljp_sum)
        console.log(cxz_ljp_mul)
    </script>
</body>
</html>

06-字符串處理

一、字符串的拼接舉例；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-字符串處理</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //字符串的運算；
        var firstName = '曉昭';
        var lastName = 'Cui';
        var fullName = firstName + " " + lastName
        console.log(fullName)
        
        //字符串的拼接舉例；
        var readBooks = '讀書';
        var watchMovies = '看電影兒';
        var goHiking = '去旅行';
        var expriences = '經歷一些事情';
        var improve = "提高人生境界的幾種途徑：一、" + readBooks + ";二、" + watchMovies + ";三、" + goHiking + ";四、"+expriences + ";"
 
        var fullImprove = improve;
        console.log(fullImprove)
        
        //不能對字符串進行+運算，只能是字符串的拼接；
        var a1 = '1';
        var a2 = '2';
        console.log(parseInt(a1+a2))//12，此處是拼接；
        
        console.log(typeof(a1+a2))
        
        var b1 = 'one';
        var b2 = 'two';
        //NaN.=not a number
        console.log(typeof(b1*b2))
    </script>
</body>
</html>

07-數據類型轉換

一、將數值類型轉換成爲字符串類型；

二、將字符串類型轉換爲數值類型；

三、任何數據類型均可以轉換成boolean類型；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-數據類型轉換</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //一、將咱們的數字類型，轉換成字符串類型；
        var n1 = 123;
        var n2 = '';
        var n3 = n1 + n2;
        console.log(n3)
        //隱式轉換，瀏覽器將數值類型轉換成字符串類型，進行拼接操做；
        console.log(typeof n3)
        
        //經過String方法，強制類型轉換；
        var str1 = String(n1);
        console.log(typeof str1);
        
        var num = 234;
        str_num = num.toString();
        console.log(typeof str_num)//string類型；
        
        //二、將字符串類型轉換成數字類型；
        var stringNum = '19930911cxz!@#)^';
        var numberNum = Number(stringNum);
        console.log(numberNum)
        console.log(typeof numberNum)//轉成了數字類型；
        
        //parentInt()方法，能夠解析一個字符串，而且返回一個整數；
        console.log(parseInt(stringNum))
        
        //parseFloat()方法;
        console.log(parseFloat(stringNum))
        
        //在咱們js中全部的數據類型，都被轉化爲boolean類型，即返回值不是true就是false；
        var b1 = '123';
        var b2 = 0;
        var b3 = -1993;
        var b4 = Infinity;
        var b5 = NaN;
        var b6 ;//至關於undefined；
        var b7 = null;
        console.log(Boolean(b1))
        console.log(Boolean(b2))
        console.log(Boolean(b3))
        console.log(Boolean(b4))
        console.log(Boolean(b5))
        console.log(Boolean(b6))
        console.log(Boolean(b7))
    </script>
</body>
</html>

08-流程控制語句if

一、js中流程控制語句初識；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-流程控制語句if</title>
    <style type="text/css">

    </style>
</head>
<body>
    <h2>我是2級標題</h2>
</body>
    <script type="text/javascript">
    //if語句，若是()，就怎麼樣了。
    var chicken = 10;
    if(chicken>=20){
        console.log('恭喜你，吃雞成功，大吉大利！')
    }else{
        console.log('不要灰心，繼續努力，下次就吃上雞 啦！')
    }
    alert(222)
    //js中代碼的解析順序，從上往下執行。
    
    //考試系統錄入
    var math = 90;
    var english = 85;
    var sum = 485;
    //一、模擬第一種狀況，總分>400 而且數學>89，被清華大學錄取；
    if (sum >400 && math >89){
        console.log('恭喜您，被清華大學錄取成功啦！')
    }else{
        alert('高考失利，沒有關係！')
    }
    
    //二、若是總分大於400，或者你的英語成績大於85，就被上海復旦大學所錄取；
    if (sum > 500 || english >85){
        alert('恭喜您，已被複旦大學所錄取！')
    }else{
        console.log('高考失利，沒有關係！去吃雞吧。')
    }
    //三、在內部做用域進行+-*/等四則運算；
    if (sum >500 || (math + english)>170){
        alert('組合起來也可使用的！本身練習一下哈。')
    }
    </script>
</html>

09-switch

一、js 中的switch用法詳解；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-switch</title>
    <style type="text/css">

    </style>
</head>
<body>
    <script type="text/javascript">
        //swith
        var gameScore = 'better';
        //case
        switch(gameScore){
            //case表示條件，知足就會走進來！
            case 'good':
            console.log('玩得很好呀！')
            break;//表示退出；
            case 'better':
            console.log('玩的老牛逼啦')
            break;
            case 'best':
            console.log('恭喜你，吃雞成功！')
            break;
            default:
            console.log('很遺憾啦！沒有匹配上成績。')
        }
        alert(1)
    </script>
</body>
</html>

10-while

一、while循環初識及其三部曲；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-while</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //while循環三部曲；
        //一、初始化循環變量；二、判斷循環條件；三、更新循環變量；
//        var i = 1;
//        while(i <9){
//            console.log(i)
//            i += 1;
//        }
        //小練習
        //將1~100之間，全部是3的倍數的數字打印出來；
        var num = 1;
        while(num <=100){
            if(num % 3 ===0){
                console.log(num)
            }
            num++;
        }
    </script>
</html>

11-do_while

一、do~while與while 的區別；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-do_while</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
    //一、初始化循環變量；二、判斷循環條件；三、更新循環變量；
    //無論有沒有while中的條件，do裏面的代碼都會先執行一次！
    var i =3;
    do{
        console.log(i)
        i++;
    }while (i < 10 )
    </script>
</html>

12-for循環

一、for循環初識；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //for循環；
        
        //一、初始化；二、循環條件；三、更新循環變量；
        //打印1~10之間的數字；
        for(var i = 1;i <=10;i++){
            console.log(i)
        }
        //循環打印1~100之間的偶數；
        for(var j=1 ; j <=100;j++){
            if(j % 2 == 0){
                console.log(j)
            }
        }
        //一、計算1~100之間的全部數字的和；
        var sum = 0;
        for(m = 1;m <=100;m++){
            sum += m;    
        }
        console.log(sum)
        //二、瀏覽器上打印以下內容（循環套循環）
        //*****
        //*****
        //*****
        
        for(var row =1;row <=6;row++){
            for(var line = 1;line <=4;line++ ){
                document.write('*')
            }
            document.write('<br>')
        }
        //小練習；輸出直角三角形；6行；等邊三角形；
        
    </script>
</html>

13-for循環練習

一、打印直角三角形和等邊三角形；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //需求01：打印直角三角形；
        for(var line =1;line <=6;line++){
            for(row=1;row <=line;row++){
                document.write('*')
            }
            document.write('<br>')
        }
        
        
        
        //需求02：打印等腰三角形；
        for(line=1;line <=6;line++){
            //控制空格數；
            for(nbsp=line;nbsp <=6;nbsp++){
                document.write('&nbsp;')
            }
            //控制*的數量；
            for(var star=1;star <=2*line-1;star++){
                document.write('*')
            }
            document.write('<br>')
        }
    </script>
</html>

14-數組的建立和使用

一、js中數組的建立與使用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-數組的建立和使用</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //js的數組即Python中的列表；是一個容器，用來裝東西；
        
        //建立數組:
        
        //一、字面量方式建立數組(推薦使用該方式建立-簡單粗暴)；
        var colors = ['red','green','yellow'];
        console.log(colors)
        console.log(typeof colors)
        //建立空數組
        var emptyArray = [];
        //二、使用構造函數的方式建立；
        var colors = new Array();
        
        
        var peoples = new Array('cxz','cxs','cxl','cql','gzf');
        console.log(peoples)
        
        //數組的從新賦值；
        var arr= [];
        arr[0] = 123;
        arr[1] = '崔曉昭';
        arr[2] = '崔曉珊';
        console.log(arr);
        
        //經過下標取到相應的值；
        console.log(arr[2]);
        console.log(arr.length);
        
        //實際使用；
        for(var i=0;i<arr.length;i++){
            console.log(arr[i])
        }
    </script>
</html>

15-數組的經常使用方法

一、js中的數組的經常使用方法；

網站推薦：

百度搜索：開發者網絡

https://developer.mozilla.org/zh-CN/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-數組的經常使用方法</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //一、數組的合併；concat()
        var north = ['北京','天津','石家莊'];
        var south = ['上海','杭州','昆明'];
        var newArr = north.concat(south);
        console.log(newArr)
        
        //二、將數組轉換成字符串;
        var score = [98,78,76,100,0];
        //toString()直接轉換成數組；
        var strScore = score.toString();
        console.log(strScore)
        console.log(typeof strScore)
        
        //join()方法；將數組中的元素使用指定的字符串鏈接起來，它會造成一個新的字符串；
        var str2 = score.join('*');
        console.log(str2)
        
        
        //三、經過內容查找下標；indexOf(),若是查找的值不在範圍內，返回值爲：-1；
        var index = score.indexOf(100);
        console.log(index)
        
        
        //反向查找lastIndexOf()
        var lastindex = score.lastIndexOf(100);
        console.log(lastindex)
        
        //數組的排序；
        var names= ['崔曉昭','崔曉珊','崔曉絲','崔曉磊'];
        //四、反轉數組reverse()；
        var reverseNames = names.reverse();
        console.log(reverseNames)
        console.log(reverseNames[0])
        
        
        //五、sort；按照26個字母排序sort()；
        var enames = names.sort();
        console.log(enames)
        
        
        //六、移除元素和添加元素；
        //移除咱們的第一個元素,返回的結果是移除的第一個元素，原來數組中的第一個元素，被移除了；
        var firstName = names.shift();
        console.log(firstName)
        console.log(enames)
        console.log(names)
        
        //unshift()向數組的開頭，添加一個或者多個元素，並返回新的長度；
        var lastNames = names.unshift('李靜瓶');
        console.log(lastNames)
        console.log(names)
        
        
        //push()向數組的末尾添加一個或者多個元素，並返回新的長度length；
        var newNames = names.push('高志粉','崔青良');
        console.log(newNames)
        console.log(names)
        
        //pop()刪除數組中的最後一個元素；
        var popNames = names.pop();
        console.log(popNames)
        
        
        //小練習：
        var luffyCity = 'Hello LuffyCity';
        var splitLuffy = luffyCity.split('')
        console.log(splitLuffy)
        console.log(splitLuffy.reverse().join(''))
        </script>
</html>

16-函數的使用

一、js中函數初識及基礎使用方法介紹；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-函數的使用</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //1、函數的建立
        
        //js中的函數的聲明，記得：有函數的聲明，就必定有調用；
        function add(){
            alert('函數被調用了')
            //執行一些操做    
        }
        //二、函數的執行
//        add()

        //2、聲明函數的時候帶有參數；
        function add2(a,b){
            alert(a+b)
        }
//        add2(2,3)
        
        //3、函數有返回值
        function add3(x,y){
            return x+y
        }
        var sum = add3(9,11)
        alert(sum)
    </script>
</html>

二、函數的調用方式；

聲明後直接調用；
聲明函數帶有形式參數；
聲明函數帶有參數而且有返回值；

17-Object_構造函數

一、構造函數初識；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-Object_構造函數</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //一、js對象的建立；
        
        //一、字面量方式建立；咱們推薦使用該種方式；優勢：簡單直觀
        //key:value;
        var student = {
            name:'cuixiaozhao',
            age:22,
            fav:'lijingping'
        }
        console.log(student)
        console.log(window)
        //點語法:包括get和set方法；
        var n = student.name;
        console.log(n)
        
        student.age = 18;//從新進行賦值！
        console.log(student.age)
        
        //二、使用Object()建立對象,首字母大寫；
        function add(){
            
        }
        add()
        //Object()構造函數：一、首字母大寫；二、遇見構造函數，要想建立對象，使用new
        var obj = new Object();
        obj.name = 'lijingping';
        console.log(obj)
        
        //----------構造函數--------------
        //一、函數名首字母要大寫；二、構造函數不須要return；三、爲對象添加成員變量；this.from = '石家莊'
        var stu = function(){
            this.name = '高志粉';
            this.age = 50;
            this.fav = function(){
                console.log('掙錢養家')
            }
        }
        //建立這個對象；
        var s = new stu();
        console.log(s)
        
        var s1 = new stu();
        console.log(s1)
        //有弊端，每次new一個對象，裏面的成員的變量和方法都同樣，及內存地址同樣；
        
        
        //推薦你們使用的構造函數的方式；
        function Animal(){
            this.name = '李靜瓶';
            this.age = 22;
            this.fav = function(){
                console.log(this.age)
            }
        }
        Animal.prototype.showname = function(){
            //執行相應操做；
            alert(this.name)
        }
        
        var a = new Animal()
        a.showname()
    </script>
</html>

18-String_Number

一、String_Number初識；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        //內置對象
        //String 字符串對象；
        var str = 'hello cuixiaozhao';
        console.log(str.length)
        
        //小寫轉換成大寫；
        var bigStr = str.toUpperCase();
        console.log(bigStr)
        
        //大寫換轉成小寫；
        var smallStr = bigStr.toLowerCase();
        console.log(smallStr)
        
        
        //第一個參數是以什麼什麼樣的字符串進行切割，第二個參數是返回的數組的最大長度；
        var newArr = str.split('',10)
        console.log(newArr)
        
        //左閉右開區間，會返回一個新的字符串；
        var a = str.substring(2,6);
        console.log(a)
        
        
        //number
        
        //一、將number類型轉換成字符串類型；
//        var num = 132.54321;
        var num = 132.45321;
        var numStr = num.toString();
        console.log(typeof numStr)
        
        //二、四捨五入
        var newNum = num.toFixed();
        console.log(newNum)
    </script>
</html>

w3school網站上有關字符串方法的介紹：

http://www.w3school.com.cn/jsref/jsref_obj_string.asp

19-Data的使用

一、js中date方法的簡述，詳情見w3school；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-Date的使用</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
<script type="text/javascript">
    //建立日期對象；
    var myDate = new Date();
    //獲取一個月中的某一天
    console.log(myDate.getDate())//7,表明當月7號
    console.log(Date())// "Tue Aug 07 2018 11:20:34 GMT+0800 (China Standard Time)"
    //
    console.log(myDate.getMonth())//返回值，7，表示8月
    console.log(myDate.getMonth()+1)//返回真實數值，8，表示8月
</script>
</html>

W3school：

http://www.w3school.com.cn/jsref/jsref_obj_date.asp

20-Math對象的使用

一、Math對象的常見用法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-Math對象的使用</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
            var x = 1.234;
            //天花板函數；
            var a = Math.ceil(x);
            console.log(a)
        
            var b = Math.floor(x);
            console.log(b)
            
            
            //求兩個數中的最大值；
            console.log(Math.max(2,5));
            console.log(Math.min(2,5));
            
            //常用 random
            var ran = Math.random();
            console.log(ran)//返回值在0~1之間的隨機小數，包含0不包含1；
            
            //100~200之間的隨機數；
            var c = Math.random()*100 +100
            console.log(c)//"146.44407788291574"    
            
            //min~max之間的隨機數；5~15之間的隨機數；公式：
            min + Math.random()*(max-min)
            5 + Math.random()*(15-5)
            
    </script>
</html>

W3School：

http://www.w3school.com.cn/jsref/jsref_obj_math.asp

21-定時器的使用

一、js中的定時器初識；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-定時器的用法</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        var n =0;
        var time = window.setInterval(function(){
            n++;
            console.log(n)
        },1000)
        
        //setTimeout(code,1000)
        setTimeout(function(){
            console.log(time)
            window.clearInterval(time)
        },5000)
    </script>
</html>

22-正則表達式建立

一、js中正則表達式初識；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>22-正則表達式建立</title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //RegExp對象;
        
        //建立正則對象方式1
        //參數1  正則表達式（不能有空格）
        //參數2  匹配模式：經常使用g（全局匹配；找到全部匹配，而不是第一個匹配後中止）和i（忽略大小寫吧）
    
        var str = 'hello World';
        var reg1 = new RegExp('e','ig');
        console.log(reg1)
        
        //2.字面量方式建立
        var reg2 = /o/gi;//檢測字符e，不區分大小寫，全局匹配
        
        //正則對象提供的檢索方式
        //test() 檢測字符串中是否包含定義字符模式，返回布爾
        //要檢索的字符在字符串str中 返回true
        console.log(reg2.test(str));
            
        //2.2  exec()  具體執行匹配，返回數組
         console.log(reg2.lastIndex); // 2 保存一次匹配時開始的下標
         console.log(reg2.exec(str));  //["o", index: 7, input: "hello world"]
         console.log(reg2.lastIndex); //2
            
        //3.經常使用方法
        //match
        var reg3 = /d/g;
        
        console.log(str.match(reg3))
        
        //2.replace替換： str.replace(被替換的，替換的)
        console.log(str.replace(reg3,'*'));
        
        //3.search()
        console.log(str.search(reg3));//查詢字符串在字符中出現的位置 下標
                
        //4.split()
        console.log(str.split(reg3));    
    </script>
</html>

23-元字符和正則表達式練習案例

一、元字符練習；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function (){
            //元字符 一些匹配的規則
            //1.單個字符和數字
            //1   . 匹配除換行符覺得的任意字符
            var str = "luffycity 2018";
            var reg = /./g;
            console.log(reg.exec(str));
            
            
            var str = "www.baidu.com";
            var reg = /www\......\.com/g;   //若是想不讓字符有其餘意義  轉義\
            console.log(reg.exec(str));

            //2.   []  匹配[]裏面的任意一個字符
            var str1 = "hello";
            var reg1 = /[a-zA-Z0-9]/g; // 匹配字母仍是數字
            console.log(reg1.exec(str1));

            var str2 = "a1343";
            var reg2 = /[0-9][0-9][0-9]/g;
            console.log(reg2.exec(str2));

            //3.  [^]   全部不在這個範圍內的字符
            var str3 = "abd123";
            var reg3 = /[^a-z][^A-Z]/g;  //匹配除小寫字母之外的任意字符
            console.log(reg3.exec(str3));


            //4.  \d:匹配數字 對立 \D:匹配非數字
            var str4 = "web";
            var reg4 = /\d/g;   //匹配數字
            var reg5 = /\D/g;   //非數字
            console.log(reg4.exec(str4));  //null
            console.log(reg5.exec(str4));  //w
            
            //5.\w:匹配數字、字母、下劃線  \w:匹配除數字
            var reg6 = /\w/g;  //匹配數字 字母  下劃線_
            var reg7 = /\W/g;  //匹配除數字 字母  下劃線之外的任意字符
            console.log(reg6.exec(str4));   //w
            console.log(reg7.exec(str4));   //null

            var reg8 = /\s/g; //空格
            var reg9 = /\S/g; //非空白字符
            console.log(reg8.exec(str4));   //null
            console.log(reg9.exec(str4));   //w

            //5 錨字符  ^以什麼開頭     $以什麼結尾
            var str = "www.luffycity.com";
            var reg10 = /^www/g;  // ^字符
            console.log(reg10.exec(str));

            var reg11 = /www\.*$/g;   //字符$
            console.log(reg11.exec(str));





            //重複的字符
            //?  匹配前面的字符0個或1個 ，
            var strs = "webr44546ere";
            var reg12 = /[0-9]?/g;
            console.log(reg12.exec(strs));

            //*  匹配0個或任意多個字符    儘量多的匹配
            var reg13 = /[a-z]*/g; //匹配小寫字母，0個或多個
            console.log(reg13.exec(strs));


            //+ 至少匹配一次
            var reg14 = /\d+/g;
            console.log(reg14.exec(strs));

            //{4}
            var stra = "11274567800";
            var rega = /^1\d{10}$/g; //匹配連續的四個數字
            console.log(rega.exec(stra));

            //{1,4} 最少一個最多4個
            var strb = "edg";
            var regb = /^[a-zA-z]{2,3}$/g;
            console.log(regb.exec(strb));


            //||  豎線  或者
            var strc = "www.google"; //baidu  google   luffycity
            var regc = /www.baidu|google|luffycity/g;
            console.log(regc.exec(strc));


            //() 分組
            var strc = "www.google"; //baidu  google   luffycity
            var regc = /www.(baidu)|(google)|(luffycity)/g;
            console.log(regc.exec(strc));

            console.log(RegExp.$1);
            console.log(RegExp.$2);
            console.log(RegExp.$3);


            var str = "helloworld";
            var reg = /(hello)(world)/g;
          /*  console.log(reg.exec(str));
            console.log(RegExp.$1);*/
            console.log(str.replace(reg,"$2 $1"));


        }
    </script>
</head>
<body>

</body>
</html>

在線筆記連接；

https://www.processon.com/view/link/5b3d87d8e4b00c2f18be35e4

24-模態框案例

一、DOM簡介；

DOM 是 W3C（萬維網聯盟）的標準。

DOM 定義了訪問 HTML 和 XML 文檔的標準：

「W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。」

W3C DOM 標準被分爲 3 個不一樣的部分：

核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型

編者注：DOM 是 Document Object Model（文檔對象模型）的縮寫。

二、獲取DOM節點的方法；

//經過id獲取，惟一的
var oDiv = document.getElementById('box');
//經過類名獲取
var oDiv = document.getElementsByClassName('.box')[0];
//經過標籤名獲取
var oDiv = document.getElementsByTagName('div')[0];

三、經常使用的DOM節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24-模態框案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        #box{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);
        }
        #content{
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: red;
            background-color: #fff;
            margin: auto;
        }
        #span1{
            position: absolute;
            background-color: red;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>
    <button id="btn" >彈出</button>
</body>
    <script type="text/javascript">
        //dom document object model
        //樹狀結構
        /*
        html
        head body 稱之爲節點
        span div button img
        */
        console.log(document)
        //一、獲取DOM元素
        var btn = document.getElementById('btn');
        
        //二、建立divDOM元素
        var oDiv = document.createElement('div');
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');
        
        oDiv.id = 'box';
        oP.id = 'content';
        oP.innerHTML = '模態框成功彈出';
        oSpan.id = 'span1';
        oSpan.innerHTML = 'X';
        
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);
        
        
        console.log(btn)
        btn.onclick = function(){
//            alert(111)
            //動態的添加到body中一個div
//            console.log(this)
            
            console.log(btn.parentNode)
            btn.parentNode.insertBefore(oDiv,btn)
        }
        
        oSpan.onclick = function(){
//            removeChild
            oDiv.parentNode.removeChild(oDiv)
        }
    </script>
</html>

25-點擊有驚喜案例

一、點擊有驚喜小試牛刀；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-點擊有驚喜案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: red;
            text-align: center;
            color: white;
            line-height: 200px;
            font-size: 23px;
            font-weight: bold;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>
            <span id="">
                
            </sp>
        </p>
        點擊有驚喜！
    <!--</div>
    <div class="box">-->
        
    </div>
</body>
    <script type="text/javascript">
        //注意此處的[0]
        var oBox = document.getElementsByClassName('box')[0];
        console.log(oBox)
        console.log(oBox.innerHTML)
        console.log(oBox.innerText)
        
        
        var a = 0;
        oBox.onclick = function(){
            
            a++;
            if(a%4===1){
                this.style.background = 'green';
                this.innerText = '繼續點擊哦！'
            }else if(a%4 ==2){
                this.style.background = 'blue';
                this.innerText = '你再點擊試試看哦！'
            }else if(a%4 ==3){
                this.style.background = 'pink';
                this.innerText = '再點擊就是粉色的了，不信你試試看！'
            }else{
                this.style.background = 'red'; 
                this.innerText = '點擊有驚喜！'
            }
            
        }
    </script>
</html>

26-簡易留言板

一、簡易留言板功能開發；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-簡易留言板</title>
    <style type="text/css">

    </style>
</head>
<body>
    <h1>簡易留言板</h1>
    <div id="box">
        
    </div>
    <textarea id="msg"></textarea>
    <input type="button" id="btn" value="留言" />
    <button onclick="sum()">統計</button>
</body>
    <script type="text/javascript">
        var ul = document.createElement('ul');
        var box = document.getElementById('box');
        box.appendChild(ul);
        
        var btn = document.getElementById('btn');
        var msg = document.getElementById('msg');
        
        var count = 0;
        btn.onclick = function(){
            console.log(msg.value)
            var li = document.createElement('li');
            //設置內容；
            li.innerHTML = msg.value + "<span>&nbsp;&nbsp;X</span>"
            var lis = document.getElementsByTagName('li');
            if(lis.length == 0){
                ul.appendChild(li)
                count ++;
            }else{
                ul.insertBefore(li,lis[0])
            }
            
            msg.value = '';
            var spans = document.getElementsByTagName('span');
            for(var i= 0;i< spans.length;i++){
            spans[i].onclick = function(){
                ul.removeChild(this.parentNode)
                count ++;
            }
        }

        }
        function sum(){
            alert('一共發佈了'+count +'條留言');
        }
    </script>
</html>

27-選項卡

一、選項卡實戰練習；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-選項卡</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #tab{
            width: 480px;
            margin: 20px auto;
            border: 1px solid red;
        }
        ul li{
            float: left;
            width: 160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #cccccc;
        }
        ul li a{
            text-decoration: none;
            color: black;
        }
        li.active{
            background-color: #FFFFFF;
        }
        p{
            display: none;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: #FFFFFF;
        }
        p.active{
            display: block;
        }
    </style>
</head>
<body>
    <div id="tab">
        <ul>
            <li class="active"> <a href="#">首頁</a></li>
            <li> <a href="#">新聞</a></li>
            <li> <a href="#">圖片</a></li>
        </ul>
        <p class="active">首頁內容</p>
        <p>新聞內容</p>
        <p>圖片內容</p>
    </div>
</body>
    <script type="text/javascript">
        var tabli = document.getElementsByTagName('li');
        var tabContent = document.getElementsByTagName('p')
            for(var i = 0;i< tabli.length;i++){
            //爲了保存個人變量；
                tabli[i].index = i;
                tabli[i].onclick = function(){
                    for(var j = 0;j<tabli.length;j++){
                        tabli[j].className = '';
                        tabContent[j].className = '';
                    }
                    this.className = 'active'
                    console.log(this.index)
                    tabContent[this.index].className = 'active';
            }
        }
    </script>
</html>

28-仿淘寶搜索框

一、仿照淘寶搜索框；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>28-仿淘寶搜索框</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #search{
            position: relative;
            
        }
        input{
            /*清除input框的默認樣式，此處爲邊框的顏色*/
            outline: none;
            /*先將行內元素設置爲block屬性*/
            display: block;
            width: 490px;
            height: 50px;
            font-size: 20px;
            margin-top: 20px;
            border: 2px solid green;
            /*innput 框四周變爲圓角*/
            border-radius: 10px;
        }
        label{
            position: absolute;
            top: 20px;
            left: 10px;
            font-size: 12px;
            color: green;
        }
    </style>
</head>
<body>
    <div id="search">
        <input type="text" id="text"/>
        <label for="text"id="msg">路飛學城</label>
    </div>
</body>
    <script type="text/javascript">
        var txt = document.getElementById('text');
        var msg = document.getElementById('msg');
        //檢測用戶表單輸入的時候
        txt.oninput = function(){
            if(this.value == ''){
                msg.style.display = 'block'
            }else{
                msg.style.display = 'none'
            }
        }
    </script>
</html>

29-獲取當前最新的時間

一、js中獲取年月日-時分秒的方法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>29-獲取當前最新的時間</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
//        document.body.innerHTML = '123';
    setInterval(function(){
        var date = new Date();
        
        //年月日，時分秒
        var year = date.getFullYear();
        console.log(year)
        var month = date.getMonth();
        var day = date.getDay();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        
        //今天是2018年2月23日 08:23:09
        document.body.innerHTML = "今天是"+year +"年"+num(month+1)+"月"+num(day)+"日"+num(hour)+":"+num(minute)+":"+num(second)
    },2000)
    
    function num(n){
        if(n<10){
            return "0"+n//字符串的拼接，使得時間的顯示格式爲：2018年09月11日 12:19:18
        }
        return n
    }    
    </script>
</html>

30-勻速運動案例

一、div盒子勻速運動案例講解；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>30-勻速運動案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #FF0000;
            position: absolute;
            top: 50px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <button id="btn">運動</button>
        <div class="box" id="box1"></div>
    </div>
</body>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        var box1= document.getElementById('box1');
        
        var count = 0;
        var time = null;
        btn.onclick = function(){
//            box1.style.left = "20px";
            setInterval(function(){
                count +=5;
                if(count>1000){
                    clearInterval(time)
                    box1.style.display = "none"
                }
                box1.style.left= count +'px'
            },10)
            
        }
    </script>
</html>

31-n秒以後關閉廣告

一、設置廣告小圖片展現的時間；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>31-5秒以後關閉廣告</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        img{
            /*固定圖片的位置*/
            position: fixed;
        }
        #left{
            left: 0;
        }
        #right{
            right: 0;
        }
        ul li{
            font-size: 25px;
        }
    </style>
</head>
<body>
    <img src="images/1.gif" id="left"/>
    <img src="images/1.gif" id="right"/>
    <ul>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
        <li>屠龍寶刀，點擊就送</li>
    </ul>
</body>
    <script type="text/javascript">
        window.onload =function(){
            var left = document.getElementById('left');
            var right = document.getElementById('right');
            
            
            //使用定時器，操做DOM，來限定圖片的展現時間；
            setTimeout(function(){
                left.style.display = 'none';
                right.style.display = 'none';
            },2000)
        }
    </script>
</html>

32-小米滾動

一、js實現圖片隨着鼠標的垂直方向進行滾動；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>32-小米商城滾動</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;    
        }
        .wrap{
            width: 512px;
            height: 400px;
            border: 3px solid plum;
            position: relative;
            overflow: hidden;
            margin: 100px auto;
        }
        .wrap span{
            width: 100%;
            height: 200px;
            position: absolute;
        }
        .up{
            top:0;
        }
        .down{
            bottom: 0;
        }
        img{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="box" class="wrap">
        <img src="images/mi.png"/ id="xiaomi">
        <span class="up" id="picUp"></span>
        <span class="down" id="picDown"></span>
    </div>
</body>
    <script type="text/javascript">
        var up = document.getElementById('picUp');
        var down = document.getElementById('picDown');
        
        var img = document.getElementById('xiaomi');
        
        //設置滾動效果,鼠標移入時候滾動；
        var count = 0;
        var time = null;
        up.onmouseover = function(){
            //無論怎樣，上來先清除定時器；
            clearInterval(time);
            time = setInterval(function(){
                count -=8;
                count >=-1070 ? img.style.top = count + 'px':clearInterval(time);
            },30)
        }
        down.onmouseover = function(){
            clearInterval(time);
            time = setInterval(function(){
                count +=10;
                count <0 ? img.style.top = count + 'px':clearInterval(time);
            },30)
        }
    </script>
</html>

33-無縫輪播圖

一、js代碼實現無縫輪播圖；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>33-無縫輪播圖</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 600px;
            height: 200px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        ul li{
            float: left;
        }
        .box ul{
            width: 400%;
            position: absolute;
            top: 0;
            left: 0;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="images/01.jpg" alt="" /></li>
            <li><img src="images/02.jpg" alt="" /></li>
            <li><img src="images/03.jpg" alt="" /></li>
            <li><img src="images/04.jpg" alt="" /></li>
        </ul>
        <!--<dvi></dvi>
        <p></p>-->
    </div>
</body>
    <script type="text/javascript">
        var box = document.getElementsByClassName('box')[0];
        
        var ul = box.children[0];
        var num = 0;
        var time = null;
        time = setInterval(autoPlay,30)
        
        //定義自動播放函數；
        function autoPlay(){
            num --;
            num <=-600 ? num =0:num;
            ul.style.left = num +'px';
        }
        //鼠標移動至上方；
        box.onmouseover = function(){
            clearInterval(time)
        }
        box.onmouseout = function(){
            time = setInterval(autoPlay,30)
        }
    </script>
</html>

34-BOM_輸出

一、BOM初識及其輸出；

　　所謂BOM指的是瀏覽器對象模型 Browser Object Model，它的核心就是瀏覽器；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>34-BOM_輸出</title>
    <style type="text/css">

    </style>
</head>
<body>
    <button onclick="printluffy()">打印</button>
    <button onclick="findluffy()">查找</button>
</body>
    <script type="text/javascript">
        //一、js ECMAScript DOM BOM
        
        //BOM-Brower Object Model 瀏覽器對象模型
        //核心是瀏覽器
        
        //輸出、屏幕的寬高、滾動的寬高、setInterval...Window.open()\close()\location
        
        //1.alert()
        //2.console.log('用於瀏覽器調試Debug')
        //3.prompt('message','defaultValue')
        var pro = prompt('cuixiaozhao');
        console.log(pro)
        
        //4 confirm,與alert的區別，若是點擊「肯定」返回值爲true，若是點擊取消，則返回false
        var m=confirm('學習BOM');
        console.log(m)
        function printluffy(){
//            window.print()
            print()
        }
        
        function findluffy(){
            var m2 = confirm('學習BOM');
            find(m2);
            
        }
    </script>
</html>

35-open_close

一、js中的open_close方法初識；

打開某個URL，行間的js中的window不能省略<button onclick="window.open('https://www.cuixiaozhao.com')">崔曉昭的博客園</button>
打開空白頁面open(‘about:blank’,'_self')
關閉某個頁面，行間的js中的window仍是不能省略的<button onclick="window.close()">關閉</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>35-BOM中的open_close</title>
    <style type="text/css">

    </style>
</head>
<body>
    <!--行間的js中的open()方法，前綴window-->
    <button onclick="window.open('https://www.cnblogs.com/tqtl911/')">博客園</button>
    
    <button>打開百度</button>
    <button onclick="window.close()">關閉</button>
    <button>是否關閉</button>
</body>
    <script type="text/javascript">
        var openBtn = document.getElementsByTagName('button')[1];
        var closeBtn = document.getElementsByTagName('button')[3]
        
        openBtn.onclick = function(){
//            open('https://www.baidu.com')
            //打開一個空白頁面；
            open('about:blank',"_self")
        }
        //關閉當前頁面；
        closeBtn.onclick = function(){
            if(confirm("是否關閉？")){
                close();
            }
        }
        
    </script>
</html>

36-BOM的其餘對象

一、BOM中的一些常見方法初識；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>36-BOM的其餘對象</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        alert('刷新了')
        
        
        //返回瀏覽器的用戶設備信息，如iphone X、PC瀏覽器
        console.log(window.navigator.userAgent)
        
//        console.log(window.location)

        //常用的一個方法；
//        window.location.href = 'https://www.luffycity.com';
        
        //發佈新聞的網站，添加或刪除一條新聞記錄；
        //全局刷新，儘可能少用；優先使用局部刷新；
        setTimeout(function(){
            window.location.reload()
            
        },30000)
        
    </script>
</html>

37-client系列

一、BOM中client相關屬性；

clientTop
clientLeft
clientWidth
clientHeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>37-client系列</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 1px solid red;
            margin: 10px 0 0 0;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>
    <script type="text/javascript">
        /*
        style
            top
            left
            right
            bottom
        client
            clientTop //內容區域到邊框頂部的距離
            clientLeft //內容區域到邊框左部的距離
            clientWidth//內容區域 + 左右padding 便可視寬度；
            clientHeight //內容區域 + 上下padding 便可視高度；
         */
        var openBox = document.getElementsByClassName('box')[0];
        console.log(openBox.clientTop)
        console.log(openBox.clientLeft)
        console.log(openBox.clientWidth)
        console.log(openBox.clientHeight)

    </script>
</html>

38-屏幕的可視區域

一、屏幕可視區域闡述；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>38-屏幕的可視區域</title>
    <style type="text/css">

    </style>
</head>
<body>

</body>
    <script type="text/javascript">
        
        window.onload = function(){
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientHeight);
            
            
            window.onresize = function(){
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientHeight);
            }
        }
    </script>
</html>

39-offset系列

一、js中的offset闡述；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>39-offset系列</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div style="position: relative;">
        
    
        <div id="box" style="width:200px;height: 200px;border: 1px solid red;padding: 10px;margin: 10px;position: absolute;top: 20px;left: 30px;"></div>
    </div>
</body>
    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById('box');
            //佔位寬、高 Top Left 
            /*
            offsetTop:如何盒子沒有設置定位，到瀏覽器頂部的距離；如何盒子設置定位，那麼是以父盒子爲基準的top值；
            offsetLeft:如何盒子沒有設置定位，到瀏覽器左部的距離；
            offsetWidth:內容+padding+border；
            */
            console.log(box.offsetTop)
            console.log(box.offsetLeft)
            console.log(box.offsetWidth)
            console.log(box.offsetHeight)
        }
    </script>
</html>

40-scroll系列

一、js中的scroll闡述；

http://www.biyao.com/home/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-scroll系列</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body style="width: 2000px;height: 2000px;">
    <div style="height: 200px;background-color: red;"></div>
    <div style="height: 200px;background-color: green;"></div>
    <div style="height: 200px;background-color: yellow;"></div>
    <div style="height: 200px;background-color: blue;"></div>
    <div style="height: 200px;background-color: gray;"></div>
    <div id="scroll" style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0 0 0 ;">
        <p>河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊河北省·石家莊
        
        </p>
    </div>
</body>
    <script type="text/javascript">
        window.onload = function(){
            //實時監聽滾動事件；
            window.onscroll = function(){
                
                //獲取top值或者left值；
                console.log('上'+document.documentElement.scrollTop)
                console.log('左'+document.documentElement.scrollLeft)
                console.log('寬'+document.documentElement.scrollWidth)
                console.log('高'+document.documentElement.scrollHeight)
            }
            var s = document.getElementById('scroll');
            s.onscroll = function(){
                
                //scrollHeight:內容的高度 +padding 不包含邊框；
                console.log('上'+ s.scrollTop)
                console.log('左'+s.scrollLeft)
                console.log('寬'+s.scrollWidth)
                console.log('高'+s.scrollHeight)
            }
        }
    </script>
</html>