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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類