JavaWEB開發03——JS

扎瓦發表於2018-10-25
JavaWebJS

今日任務

使用JS完成頁面定時彈出廣告

使用JS完成表單的校驗

使用JS完成表格的隔行換色

使用JS完成核取方塊的全選效果

使用JS完成省市的聯動效果

JS控制下拉選單左右選擇

教學導航

  1. 掌握JS中的BOM物件
  2. 掌握JS中的常用事件
  3. 掌握JS中的常用DOM操作
  4. 瞭解JS中的內建物件

上一次內容進行復習:

CSS: 層疊樣式表

主要作用: 美化頁面, 將美化和HTML進行分離,提高程式碼複用性

選擇器:

​ 元素選擇器: 元素的名稱{}

​ 類選擇器: . 開頭

​ ID選擇器: #ID選擇器

​

​ 後代選擇器: 選擇器1 選擇器2

​ 子元素選擇器: 選擇器1 > 選擇器2

​ 選擇器分組: 選擇器1,選擇器2,選擇器3{}

​ 屬性選擇器: 選擇器[屬性的名稱=`屬性的值`]

​ 偽類選擇器:

浮動:

​ float 屬性: left right

清除浮動:

​ clear 屬性: both left right

盒子模型: 上右下左 padding 10px 20px 30px 40px 順時針的方向

​ 內邊距: 控制的盒子內距離

​ 邊框: 盒子的邊框

​ 外邊距: 控制盒子與盒子之間的距離

絕對定位: position : absolute; top: left

JS開發: 是一門指令碼語言,由瀏覽器來解釋執行,不需要經過編譯

JS宣告變數: var 變數的名字;

JS宣告函式: function 函式的名稱(引數的名字){}

JS開發的步驟:

1. 確定事件
2. 事件要觸發函式,所以我們是要宣告函式
3. 函式裡面通常是去做一些互動才操作,  彈框, 修改頁面內容,動態去新增一些東西

0. 輪播圖自動播放

需求:

有一組圖片, 每隔3秒鐘,就去切換一張,最終是一直在不停切換

技術分析:

​ 切換圖片:

​ 每個三秒鐘做一件事:

步驟分析:

1. 確定事件: 文件載入完成的事件 onload
2. 事件要觸發 : init()
3. 函式裡面要做一些事情:(通常會去操作元素,提供互動)
     1. 開啟定時器: 執行切換圖片的函式 changeImg()
4.  changeImg()
     1. 獲得要切換圖片的那個元素

1. 完成頁面定時彈出廣告

1.1 需求分析

​ 一般網頁，當我們剛開啟的時候，它會5秒之後，顯示一個廣告，讓我們看5秒鐘，然後他的廣告就自動消失了！

1.2 技術分析

  • 定時器

    • setInterval : 每隔多少毫秒執行一次函式
    • setTimeout: 多少毫秒之後執行一次函式
    • clearInterval
    • clearTimeout
  • 顯示廣告 img.style.display = “block”
  • 隱藏廣告 img.style.display = “none”

1.3 步驟分析

  1. 確定事件: 頁面載入完成的事件 onload
  2. 事件要觸發函式: init()

  3. init函式裡面做一件事:

    1. 啟動一個定時器 : setTimeout()

    2. 顯示一個廣告

      1. 再去開啟一個定時5秒鐘之後,關閉廣告

1.4 程式碼實現

<script>
        
            function init(){
                setTimeout("showAD()",3000);
            }
            
            function showAD(){
                //首先要獲取要操作的img
                var img = document.getElementById("img1");
                //顯示廣告
                img.style.display = "block";
                
                //再開啟定時器,關閉廣告
                setTimeout("hideAD()",3000);
            }
            
            function hideAD(){
                //首先要獲取要操作的img
                var img = document.getElementById("img1");
                //隱藏廣告
                img.style.display = "none";
            }
        </script>

1.5擴充套件

  • JS的引入方式

2. 完成完成表單的校驗

2.1 需求分析

​ 昨天我們做了一個簡單的表單校驗，每當使用者輸入出錯的時候，我們是彈出了一個對話方塊，提示使用者去修改。這樣的使用者體驗效果非常不好好。我們今天就是需要來對他進行一個修改，當使用者輸入資訊有問題的時候，我們就再輸入框的後面給他一個友好提示。

2.2 技術分析

【HTML中innerHTML屬性】

【JS中的常用事件】

onfocus 事件: 獲得焦點事件

onblur : 失去焦點

onkeyup : 按鍵抬起事件

2.3 步驟分析

2.4 程式碼實現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            引入外部的js檔案
        -->
        <script type="text/javascript" src="../js/regutils.js" ></script>
        <script>
            /*
                1. 確定事件 : onfocus
                2. 事件要驅動函式
                3. 函式要幹一些事情: 修改span的內容
            */
            function showTips(spanID,msg){
                //首先要獲得要操作元素 span
                var span = document.getElementById(spanID);
                span.innerHTML = msg;
            }
            /*
                校驗使用者名稱:
                1.事件: onblur  失去焦點
                2.函式: checkUsername()
                3.函式去顯示校驗結果
            */
            function checkUsername(){
                //獲取使用者輸入的內容
                var uValue = document.getElementById("username").value;
                //對輸入的內容進行校驗
                //獲得要顯示結果的span
                var span = document.getElementById("span_username");
                if(uValue.length < 6){
                    //顯示校驗結果
                    span.innerHTML = "<font color=`red` size=`2`>對不起,太短</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color=`red` size=`2`>恭喜您,可用</font>";
                    return true;
                }
            }
            
            /*
             密碼校驗
             */
            function checkPassword(){
                //獲取密碼輸入
                var uPass = document.getElementById("password").value;
                var span = document.getElementById("span_password");
                //對密碼輸入進行校驗
                if(uPass.length < 6){
                    span.innerHTML = "<font color=`red` size=`2`>對不起,太短</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color=`red` size=`2`>恭喜您,夠用</font>";
                    return true;
                }
            }
            
            /*
             確認密碼校驗
             * */
            function checkRePassword(){
                //獲取密碼輸入
                var uPass = document.getElementById("password").value;
                
                //獲取確認密碼輸入
                var uRePass = document.getElementById("repassword").value;
                var span = document.getElementById("span_repassword");
                
                //對密碼輸入進行校驗
                if(uPass != uRePass){
                    span.innerHTML = "<font color=`red` size=`2`>對不起,兩次密碼不一致</font>";
                    return false;
                }else{
                    span.innerHTML = "";
                    return true;
                }
            }
            
            /*
             校驗郵箱
             * */
            function checkMail(){
                var umail = document.getElementById("email").value;
                var flag = checkEmail(umail);
                
                var span = document.getElementById("span_email");
                //對郵箱輸入進行校驗
                if(flag){
                    span.innerHTML = "<font color=`red` size=`2`>恭喜您,可用</font>";
                    return true;
                }else{
                    span.innerHTML = "<font color=`red` size=`2`>對不起,郵箱格式貌似有問題</font>";
                    return false;
                }
            }
            
            function checkForm(){
                var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
                return flag;
            }
            
        </script>
    </head>
    <body>
        <form action="../01-自動輪播圖片/圖片自動輪播.html" onsubmit="return checkForm()" >
            使用者名稱:<input type="text" id="username" onfocus="showTips(`span_username`,`使用者名稱長度不能小於6`)" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
            密碼:<input type="password" id="password" onfocus="showTips(`span_password`,`密碼長度不能小於6`)" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
            確認密碼:<input type="password" id="repassword" onfocus="showTips(`span_repassword`,`兩次密碼必須一致`)" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
            郵箱:<input type="text" id="email" onfocus="showTips(`span_email`,`郵箱格式必須正確`)" onblur="checkMail()" /><span id="span_email"></span><br />
            手機號:<input type="text" id="text" /><br />
            
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

上午回顧:

定時器:

​ setInterval(“test()”,3000) 每隔多少毫秒執行一次函式

​ setTimeout(“test()”,3000) 多少毫秒之後執行一次函式

​ timerID 上面定時器呼叫之後

​ clearInterval()

​ clearTimeout()

切換圖片

​ img.src = “圖片路徑”

事件: 文件載入完成的事件 onload事件

顯示廣告 : img.style.display = “block”

隱藏廣告: img.style.display =”none”

引入一個外部js檔案

<script src="js檔案的路徑"  type="text/javascript"/>

表單校驗中常用的事件:

​ 獲得焦點事件: onfocus

​ 失去焦點事件 onblur

​ 按鍵抬起事件: onkeyup

JS開發步驟

1. 確定事件
2. 事件要觸發函式: 定義函式
3. 函式通常都要去做一些互動:  點選, 修改圖片,  動態修改innerHTML屬性...  innerTEXT

​

3.表格隔行換色

3.1 需求分析

​ 我們商品分類的資訊太多，如果每一行都顯示同一個顏色的話會讓人看的眼花，為了提高使用者體驗，減少使用者看錯的情況，需要對錶格進行隔行換色

3.2 技術分析

改變行的顏色

3.3 步驟分析

  1. 確定事件: 文件載入完成 onload

    1. 事件要觸發函式: init()

      1. 函式:操作頁面的元素
        要操作表格中每一行
        動態的修改行的背景顏色

3.4 程式碼實現

<script >
            function init(){
                //得到表格
                var tab = document.getElementById("tab");
                //得到表格中每一行
                var rows = tab.rows;
                //便利所有的行,然後根據奇數 偶數
                for(var i=1; i < rows.length; i++){
                    var row = rows[i];  //得到其中的某一行
                    if(i%2==0){
                        row.bgColor = "yellow";
                    }else{
                        row.bgColor = "red"
                    }
                }
            }
</script>

4. 核取方塊的全選和全不選

4.1 需求分析

​ 商品分類介面中，當我們點選全選框的時候，我們希望選中所有的商品，當我們取消掉的時候，我們希望不選中所有的商品

4.2 技術分析

​ 事件 : onclick點選事件

4.3 步驟分析

全選和全不選步驟分析:

1.確定事件: onclick 單機事件
2.事件觸發函式: checkAll()
3.函式要去做一些事情:

  獲得當前第一個checkbox的狀態
   獲得所有分類項的checkbox
  修改每一個checkbox的狀態

程式碼實現

function checkAll(){
//                獲得當前第一個checkbox的狀態
                var check1 = document.getElementById("check1");
                //得到當前checked狀態
                var checked = check1.checked;
//                     獲得所有分類項的checkbox
//                var checks = document.getElementsByTagName("input");
                var checks = document.getElementsByName("checkone");
//                alert(checks.length);
                for(var i = 0; i < checks.length; i++){
//                     修改每一個checkbox的狀態
                    var checkone = checks[i];
                    checkone.checked = checked;
                }
            }

5. 省市聯動效果

5.1 需求分析

5.2 技術分析

什麼是DOM: Document Object Model : 管理我們的文件 增刪改查規則

【HTML中的DOM操作】

一些常用的 HTML DOM 方法：
  getElementById(id) - 獲取帶有指定 id 的節點（元素） 
  appendChild(node) - 插入新的子節點（元素） 
  removeChild(node) - 刪除子節點（元素） 

  一些常用的 HTML DOM 屬性：
  innerHTML - 節點（元素）的文字值 
  parentNode - 節點（元素）的父節點 
  childNodes - 節點（元素）的子節點 
  attributes - 節點（元素）的屬性節點 


查詢節點：
getElementById() 返回帶有指定 ID 的元素。 
getElementsByTagName() 返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點陣列）。 
getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。 

增加節點：
createAttribute() 建立屬性節點。 
createElement() 建立元素節點。 
createTextNode() 建立文字節點。 
insertBefore() 在指定的子節點前面插入新的子節點。 
appendChild() 把新的子節點新增到指定節點。 

刪除節點：
removeChild() 刪除子節點。 
replaceChild() 替換子節點。 

修改節點：
setAttribute()  修改屬性
setAttributeNode()  修改屬性節點

5.3 步驟分析

5.4 程式碼實現

6. 使用JS控制下拉選單左右選擇

6.1 需求分析:

在我們的分類管理中,我們要能夠去修改我們的分類資訊,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這裡面能夠修改分類的名稱,分類的描述,以及分類的商品

6.2 步驟分析:

6.3 程式碼實現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            步驟分析
                1. 確定事件: 點選事件 :onclick事件
                2. 事件要觸發函式 selectOne
                3. selectOne要做一些操作
                    (將左邊選中的元素移動到右邊的select中)
                    1. 獲取左邊Select中被選中的元素
                    2. 將選中的元素新增到右邊的Select中就可以
        -->
        <script>
            
            function selectOne(){
//                1. 獲取左邊Select中被選中的元素
                var leftSelect = document.getElementById("leftSelect");
                var options = leftSelect.options;
                
                //找到右側的Select
                var rightSelect = document.getElementById("rightSelect");
                //遍歷找出被選中的option
                for(var i=0; i < options.length; i++){
                    var option1 = options[i];
                    if(option1.selected){
        //                2. 將選中的元素新增到右邊的Select中就可以
                        rightSelect.appendChild(option1);
                    }
                }
            }
            
            //將左邊所有的商品移動到右邊
            function selectAll(){
//                1. 獲取左邊Select中被選中的元素
                var leftSelect = document.getElementById("leftSelect");
                var options = leftSelect.options;
                
                //找到右側的Select
                var rightSelect = document.getElementById("rightSelect");
                //遍歷找出被選中的option
                for(var i=options.length - 1; i >=0; i--){
                    var option1 = options[i];
                    rightSelect.appendChild(option1);
                }
            }
            
            
            
        </script>
    </head>
    <body>
        
        <table border="1px" width="400px">
            <tr>
                <td>分類名稱</td>
                <td><input type="text" value="手機數碼"/></td>
            </tr>
            <tr>
                <td>分類描述</td>
                <td><input type="text" value="這裡面都是手機數碼"/></td>
            </tr>
            <tr>
                <td>分類商品</td>
                <td>
                    <!--左邊-->
                    <div style="float: left;">
                        已有商品<br />
                        <select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
                            <option>華為</option>
                            <option>小米</option>
                            <option>錘子</option>
                            <option>oppo</option>
                        </select>
                        <br />
                        <a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />
                        <a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
                    </div>
                    <!--右邊-->
                    <div style="float: right;"> 
                        未有商品<br />
                        <select multiple="multiple" id="rightSelect">
                            <option>蘋果6</option>
                            <option>腎7</option>
                            <option>諾基亞</option>
                            <option>波導</option>
                        </select>
                        <br />
                        <a href="#"> &lt;&lt; </a> <br />
                        <a href="#"> &lt;&lt;&lt; </a>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交"/>
                </td>
            </tr>
        </table>
    </body>
</html>

今天內容簡單回顧:

定時器:

​ setInterval

​ setTimeout

​ clearInterval

​ clearTimeout

控制圖片顯示隱藏

​ img.style.display = “block”

​ img.style.display = “none”

表單中常用的事件:

​ onfocus: 獲取焦點事件

​ onblur : 失去焦點的事件

​ onkeyup: 按鍵抬起的事件

​ onclick: 單擊事件

​ ondblclick: 雙擊事件

表格隔行換色,滑鼠移入和移除要變色:

​ onmouseenter: 滑鼠移入

​ onmouseout: 滑鼠移出

​ onload: 文件載入完成事件

​ onsubmit: 提交

​ onchange: 下拉選單內容改變

checkbox.checked 選中狀態

DOM的文件操作:

​ 新增節點: appendChild

​ 建立節點: document.createElement

​ 建立文字節點: document.createTextNode()

JS開發步驟:

1. 確認事件
2. 事件觸發函式
3. 函式裡面要做一些互動

​

相關文章