JS簡單頁面互動實戰 - 點選按鈕實現求和功能

阿新 • • 發佈：2022-05-04

上一期堡堡給大家講解了簡單的頁面互動效果 - 點選塊，讓塊動起來，讓我們更清晰的瞭解JS邏輯和DOM的結合。如果想具體瞭解點選塊，讓塊動起來，可以回覆“互動”到“HTML5學堂”公眾號。而今天我們主要講解JS簡單頁面互動實戰 - 點選按鈕實現求和功能。

Tips：由於上一期的文章篇幅過長，微信的文章有字數要求，所以小編把部分的內容（作用域）放到這一期進行講解。

繼上一期的內容 - 作用域

作用域

我們知道函式就是把多條語句封裝起來，那封裝起來了，在其它地方能否訪問的到？具體看下面的例項。

例項：

var num = 1;
function show() {
    var num = 2;
}
console.log(num);

結果：1

為何輸出的是1，而不是2；因為var num = 2;在函式裡面，函式外面是訪問不到函式裡面的變數，就涉及到了作用域。

在JS裡作用域有幾種？什麼是全域性作用域，什麼是區域性作用域？

作用域分為全域性作用域和區域性作用域；
全域性作用域：在window下屬於全域性作用域；
區域性作用域：每個函式，均會建立一個區域性作用域；

全域性作用域與區域性作用域的訪問關係？

函式外部不能訪問函式內部的變數，但是函式內部可以訪問函式外部的變數；

多個作用域之間它們什麼關係？

在區域性作用域當中出現變數的時候，首先查詢當前的作用域中是否具有儲存空間，如果有則直接採用，如果沒有需要向父級進行查詢，如果父級沒有，繼續向上，直到找到window為止，如果window下也不存在該空間，會在全域性作用域下進行空間的建立。而這種作用域的層層關係，即為作用域鏈。

JS的預編譯與執行期分別做什麼？

預編譯期 — 開闢儲存空間；例如var a;開闢了a的儲存空間，但是未賦值（系統會把變數的值預設初始化為undefined）；
執行期 — 儲存值/賦值；例如給上面的變數a賦值，a = '堡堡';

Tips：畫圖法解決作用域問題；

實戰：

var test = 10;
function outer(){
    test = 20;
    console.log(test);


    function inner(){
        console.log(test);
        var test = 30;
        console.log(test);
    }inner();
 
}outer();
console.log(test);

結果：20 undefined 30 20

分析：

JS預編譯期

程式碼第1行和第8行，因為用var關鍵字聲明瞭變數，所以JS預編譯的時候會給變數開闢儲存空間；預編譯的時候只是給變數開闢儲存空間並把變數預設賦值為undefined（系統會預設賦值undefined）；

JS執行期

執行第1行程式碼var test = 10;，test變數的值變為10；

執行第3行程式碼test = 20;test變數的值變為20；因為outer函式本身沒有存在test變數，所以會往上一層進行查詢，所以它訪問的是全域性作用域的test變數，輸出的結果為20；

執行程式碼第7行console.log(test);，因為inner函式裡面有宣告test變數，所以不會往上一層進行查詢，所以訪問的是inner函式裡面的test變數，輸出的結果為undefined；程式碼是從上往下執行，還沒有執行到給test變數賦值的語句，所以test變數的值還是undefined；

執行程式碼第8行var test = 30;，這時候inner函式裡面的test變數的值變為30，所以輸出的結果為30；

執行程式碼第13行console.log(test);，因為函式外面訪問不到函式裡面的變數，所以它訪問的是全域性作用域中的test變數，但是它的值已經變為20，所以輸出的結果為20；

在專案開發中會遇到各種各樣的頁面互動效果，那我們如何去實現一個頁面互動效果？在實現頁面互動效果的時候，會根據效果的實現思路來進行分析和實現，這也是我們文章中的一個重點。下面的文章內容主要是根據效果實現思路來分析點選按鈕實現求和功能。

本文內容概要

1 點選按鈕實現求和的效果圖

2 實現頁面互動效果的思路

3 用自己的語言進行功能的描述

4 仔細檢視功能，並根據基本功能構建結構樣式

5 細化功能描述並轉換為JS語言或命令

6 JS具體編碼以及程式碼優化，回顧成品程式碼

7 課程小結

8 課後作業

1 點選按鈕實現求和的效果圖

2 實現頁面互動效果的思路

——>用自己的語言進行功能的描述

——>仔細檢視功能，並根據基本功能構建結構樣式

——>細化功能描述並轉換為JS語言或命令

——>JS具體編碼以及程式碼優化，回顧成品程式碼

Tips：對於初學者來說，小編建議根據上面的實現思路來分析和實現頁面互動效果。

3 第一步：用自己的語言進行功能的描述

我們需要用自己的語言進行詳細的功能描述，因為後面需要根據功能的描述來搭建結構與樣式，它會直接影響後期JS互動效果的實現。

具體的功能描述如下：

用滑鼠點選“按鈕”時，將兩個文字框中輸入的數字進行加和運算，並將加和的結果顯示在“求和結果”的後面。

3 第二步：仔細檢視功能，並根據基本功能構建結構樣式

標籤選擇分析：

在功能描述中“將兩個文字框中輸入的數字進行加和運算”，可以讓使用者提交資料的標籤也只能是表單元素，在這邊明顯是input元素；
為了優化input元素的使用者體驗，使用label元素來擴大聚焦的點選區域，也就是說點選label元素游標會自動聚焦到input元素裡面；
在功能描述中“用滑鼠點選‘按鈕’時”，按鈕我們是使用了input型別的按鈕（也可以使用其它按鈕）；
在功能描述中“加和的結果顯示在‘求和結果’的後面”，為了後期JS方便的操作，最終的求和結果顯示在em標籤裡面；

根據功能描述搭建的結構與樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 夢幻雪冰 | 陳能堡</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        .wrap div {
            margin-bottom: 5px;
        }
        .wrap input[type=button] {
            width: 80px;
            height: 26px;
        }
        .show-result {
            line-height: 26px;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <form action="">
            <div>
                <label for="firstNum">第一個值：</label><input type="text" id="firstNum"/>
            </div>
            <div>
                <label for="secondNum">第二個值：</label><input type="text" id="secondNum"/>
            </div>
            <div>
                <input type="button" value="點選求和" id="sumBtn"/>
            </div>
            <div  class="show-result">求和的結果：<em id="resulut">200</em></div>
        </form>
    </div>
</body>
</html>

4 第三步：細化功能描述並轉換為JS語言或命令

用滑鼠點選“按鈕”

網頁中存在著各種標籤，需要利用document.getElementById(id)方法獲取“按鈕”元素，才能針對“按鈕”元素進行相應的操作；

滑鼠點選“按鈕”，需要為“按鈕”元素繫結點選事件，可以用eleObj.onclick = function(){}；來繫結點選事件；

獲取到兩個文字框中輸入的內容

網頁中存在著各種標籤，需要利用document.getElementById(id)方法獲取“文字框”元素，才能針對“文字框”元素進行相應的操作；

前面我們學過了用innerHTML的屬性來獲取標籤的內容，但是對於表單元素來說，獲取表單的內容需要使用value的屬性，如：eleObj.value；

例項：

<form action="">
    <label for="ipt">請輸入值：</label><input type="text" id="ipt"/>
    <input type="button" value="點選按鈕" id="btn"/>
</form>
<script type="text/javascript">
    var iptObj = document.getElementById('ipt'),
        btnObj = document.getElementById('btn');


    btnObj.onclick = function() {
        console.log('用value屬性獲取=' + iptObj.value);
        console.log(typeof iptObj.value);
        console.log('用innerHTML屬性獲取=' + iptObj.innerHTML);
    }
</script>

結果：

程式碼分析：

表單元素使用value屬性可以獲取到表單的內容，使用innerHTML屬性獲取不到表單的內容；
通過value屬性獲取到的表單內容是屬於字串型別；

對兩個文字框中內容進行加和運算

現在已經知道通過value屬性獲取到的內容是字串型別，然後再對內容進行加法操作，結果會如何？具體看下面的例子。

例項：

<script type="text/javascript">
     // 例項中的命名只是為了大家方便理解，請勿模仿
    var num1 = '13';
    var num2 = 14;


    console.log(num1 + num2);


    var num3 = '5';
    var num4 = '20';


    console.log(num3 + num4);
</script>

結果：1314 520

程式碼分析：

只要“+”操作符的任意一側出現字串，它就從加法運算的功能變成連字元的功能；
為了保證“+”不受字串的影響，可以通過parseInt()方法把字串的內容轉成數字，這樣就能正常的加法運算；

將加和結果顯示在“求和結果”後面

對於獲取/設定非表單元素的內容，我們可以通過eleObj.innerHTML來進行操作；

5 第四步：JS具體編碼以及程式碼優化，回顧成品程式碼

成品程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 獨行冰海 | 劉國利</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        .wrap div {
            margin-bottom: 5px;
        }
        .wrap input[type=button] {
            width: 80px;
            height: 26px;
        }
        .show-result {
            line-height: 26px;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <form action="">
            <div>
                <label for="firstNum">第一個值：</label><input type="text" id="firstNum"/>
            </div>
            <div>
                <label for="secondNum">第二個值：</label><input type="text" id="secondNum"/>
            </div>
            <div>
                <input type="button" value="點選求和" id="sumBtn"/>
            </div>
            <div class="show-result">求和的結果：<em id="resulut"></em></div>
        </form>
    </div>
    <script type="text/javascript">
        // 獲取標籤
        var firstEle = document.getElementById('firstNum'),
            secondEle = document.getElementById('secondNum'),
            btnEle = document.getElementById('sumBtn'),
            resultEle = document.getElementById('resulut');


        // 按鈕繫結點選事件
        btnEle.onclick = function() {
            // 操作標籤的內容
            // 利用parseInt()方法把字串轉成數字，保證能正常的加法運算
            resultEle.innerHTML = parseInt(firstEle.value) + parseInt(secondEle.value);            
        }
    </script>
</body>
</html>

效果：

到目前為止，我們已經完成了點選按鈕實現求和功能。但是，我們能否繼續優化裡面的程式碼？我們來想一個問題，假如頁面中出現了多個點選按鈕實現求和功能，你是把程式碼複製黏貼一遍還是進行程式碼的封裝？我想你應該知道怎麼做了吧~

優化程式碼

<script type="text/javascript">
    // 獲取標籤
    var firstEle = document.getElementById('firstNum'),
        secondEle = document.getElementById('secondNum'),
        btnEle = document.getElementById('sumBtn'),
        resultEle = document.getElementById('resulut');


    // 按鈕繫結點選事件
    btnEle.onclick = function() {
        // 顯示求和的結果
        resultEle.innerHTML = sum(firstEle.value, secondEle.value);    
    }


    /*
     * [sum 實現兩數求和的功能]
     * @param  {[數字 | 字串]} firstNum  [第一個數]
     * @param  {[數字 | 字串]} secondNum [第二個數]
     * @return {[數字]}     [返回值]
     * @author 陳能堡
     */
    function sum(firstNum, secondNum) {
        // 利用parseInt()方法把字串轉成數字，保證能正常的加法運算
        return parseInt(firstNum) + parseInt(secondNum);
    }
</script>

程式碼分析：封裝好的sum功能函式在其它地方當中也能正常使用，這樣可以減少程式碼冗餘，提升程式碼的可讀性和複用性；

Tips：程式碼優化是貫穿於整個過程，而不是到最後才進行程式碼的優化；

6 課程小結

掌握作用域能夠避免一些因變數造成的問題，才能更靈活的去操作變數或函式；另外，掌握作用域可以幫助你更好的去理解後面要學的閉包；

掌握頁面互動效果的實現思路（分析方法），能夠更清楚的去分析和實現頁面互動效果。

7 課後作業

視訊內容

HTML5學堂 - 堡堡耗時10h

JS簡單頁面互動實戰 - 點選按鈕實現求和功能

繼上一期的內容 - 作用域

作用域

本文內容概要

1 點選按鈕實現求和的效果圖

3 第一步：用自己的語言進行功能的描述

3 第二步：仔細檢視功能，並根據基本功能構建結構樣式

標籤選擇分析：

根據功能描述搭建的結構與樣式

4 第三步：細化功能描述並轉換為JS語言或命令

用滑鼠點選“按鈕”

獲取到兩個文字框中輸入的內容

對兩個文字框中內容進行加和運算

將加和結果顯示在“求和結果”後面

5 第四步：JS具體編碼以及程式碼優化，回顧成品程式碼

成品程式碼

優化程式碼

6 課程小結

7 課後作業

JS簡單頁面互動實戰 - 點選按鈕實現求和功能

js點選按鈕實現一鍵複製功能

js實現點選按鈕複製文字功能

js點選按鈕實現多張圖片迴圈切換

vue實現點選按鈕下載檔案功能

pixi.js 簡單互動事件(點選、縮放、平移)

vue.js實現點選按鈕和彈出層其他位置彈出層消失方法

js實現點選按鈕隨機生成背景顏色

原生js實現點選按鈕複製內容到剪下板

H5 js點選按鈕複製文字到貼上板

原生 js 實現點選按鈕複製文字

js--點選按鈕讓某div全屏顯示退出全屏

移動端H5頁面，通過點選軟鍵盤搜尋按鈕實現搜尋功能

點選按鈕儲存當前頁面為圖片----html2canvas

進階實戰 css 點選按鈕的樣式

直播商城系統原始碼，點選按鈕儲存頁面為圖片到本地

Android使用Intent的Action和Data屬性實現點選按鈕跳轉到撥打電話和傳送簡訊介面

微信小程式點選按鈕動態切換input的disabled禁用/啟用狀態功能

小程式按鈕避免多次呼叫介面和點選方案實現(不用showLoading)

Android 使用Vibrator服務實現點選按鈕帶有震動效果

JS簡單頁面互動實戰 - 點選按鈕實現求和功能

繼上一期的內容 - 作用域

作用域

本文內容概要

1 點選按鈕實現求和的效果圖

3 第一步：用自己的語言進行功能的描述

3 第二步：仔細檢視功能，並根據基本功能構建結構樣式

標籤選擇分析：

根據功能描述搭建的結構與樣式

4 第三步：細化功能描述並轉換為JS語言或命令

用滑鼠點選“按鈕”

獲取到兩個文字框中輸入的內容

對兩個文字框中內容進行加和運算

將加和結果顯示在“求和結果”後面

5 第四步：JS具體編碼以及程式碼優化，回顧成品程式碼

成品程式碼

優化程式碼

6 課程小結

7 課後作業

相關推薦