03-JavaScript

来源:https://www.cnblogs.com/zmy-520131499/archive/2018/12/07/10083631.html
-Advertisement-
Play Games

今日任務 使用JS完成頁面定時彈出廣告 使用JS完成表單的校驗 使用JS完成表格的隔行換色 使用JS完成覆選框的全選效果 使用JS完成省市的聯動效果 JS控制下拉列表左右選擇 教學導航 1. 掌握JS中的BOM對象 2. 掌握JS中的常用事件 3. 掌握JS中的常用DOM操作 4. 瞭解JS中的內置 ...


 今日任務

  使用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 代碼實現

```html
<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 代碼實現

```css
<!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文件  

```html
<script src="js文件的路徑"  type="text/javascript"/>
```

表單校驗中常用的事件:

​    獲得焦點事件: onfocus

​    失去焦點事件  onblur

​    按鍵抬起事件:  onkeyup



JS開發步驟

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

​    





 3.表格隔行換色

 3.1 需求分析

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

 3.2 技術分析

改變行的顏色



 3.3 步驟分析

1.   確定事件: 文檔載入完成 onload
     2.  事件要觸發函數: init()
         3. 函數:操作頁面的元素
                要操作表格中每一行
                動態的修改行的背景顏色

#### 3.4 代碼實現

```html
<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的狀態
 代碼實現

```html
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
一些常用的 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 代碼實現

```html







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

 6.1 需求分析:

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

 6.2 步驟分析:



 6.3 代碼實現

```html
<!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. 函數裡面要做一些交互 





您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 你不知道的Node.js性能優化，讀了之後水平直線上升
    本文由雲+社區發表 “當我第一次知道要這篇文章的時候，其實我是拒絕的，因為我覺得，你不能叫我寫馬上就寫，我要有乾貨才行，寫一些老生常談的然後加上好多特技，那個 Node.js 性能啊好像 Duang~ 的一下就上去了，那讀者一定會罵我，Node.js 根本沒有這樣搞性能優化的，都是假的。” 斯塔克· ...
  • 前端入門21-JavaScript的ES6新特性
    聲明 本篇內容全部摘自阮一峰的： "ECMAScript 6 入門" 阮一峰的這本書，我個人覺得寫得挺好的，不管是描述方面，還是例子，都講得挺通俗易懂，每個新特性基本都還會跟 ES5 舊標準做比較，說明為什麼會有這個新特性，這更於理解。 所以，後續不會再寫個關於 ES6 系列的文章了，就在這篇里大概 ...
  • 解析React事件處理的機制及原理
    本文主要介紹了React事件處理的機制及原理，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 React中的事件處理在React元素中綁定事件有兩點需要註意： （1）在React中，事件命名採用駝峰命名方式，而不是DOM元素中的小寫字母命名方式。例如onclick要 ...
  • 深入解析Vue.js中v-bind v-model的使用和區別
    v-model 指令在表單控制項元素上創建雙向數據綁定,所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的數據 最基礎的就是實現一個聯動的效果 checkbox v-bind 有些指令可以在其名稱後面帶一個“參 ...
  • 解析vue項目每30秒刷新1次介面的實現方式
    在vue.js項目中，經常需要對數據實時更新——每隔xx秒需要刷新一次介面——即需要用到定時器相關原理。這篇文章主要介紹了vue項目每30秒刷新1次介面的實現方法，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 在vue.js項目中，經常需要對數據實時更新——每隔x ...
  • JavaScript之原型 Prototype
    1、我們所創建的每一個函數，解析器都會向函數中添加一個屬性prototype。這個屬性對應著一個對象，這個對象就是我們所謂的原型對象。如果函索作為普通函數調用prototype沒有任何作用。 當函數以構造函數的形式調用時，它所創建的對象中都會有一個隱含的屬性 指向該構造函數的原型對象，我們可以通過_ ...
  • 05-BootStrap
    今日任務 使用JQuery發送請求局部刷新頁面 使用BootStrap製作一個響應式的頁面 使用BootStrap製作網站的首頁 教學目標 掌握什麼是響應式及響應式的原理 掌握BootStrap的柵格系統 瞭解BootStrap的其他組件及JS控制項 上次課內容: 什麼JQ : write less ...
  • 04-JQuery
    今日任務 使用JQuery完成頁面定時彈出廣告 定時器: ​ setInterval clearInterval ​ setTimeout clearTimeout 顯示: img.style.display = "block" 隱藏: img.style.display = "none" img ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類