第 11 屆 iThome 鐵人賽

DAY 6

自我挑戰組

從JS到React的前端入門實作系列第 6 篇

Day6:累加符號在計數器以及清空頁面

11th鐵人賽

vanilla666

團隊NUTC_IMAC_BLUE

2019-09-22 07:18:37

2530 瀏覽

分享至

今日目的

上篇文章新增了計算器，除了數數字，我們今天要累加 * 號以及清空頁面，今天算計數器的完整版

新增標籤

今天新增一個div，而且要新增id屬性，像這樣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>累加符號在計數器以及清除計數器</title>

</head>
<body>

    <div id="count"> </div>
    <div id="icon"> </div>
    <button onclick="start()">請點我</button>
    <script>
        var startcalc; 
        var i = 0; //累加用

        function calc(){
            document.getElementById("count").innerHTML = i; /* 把文字貼上到 div id 為 count  */
            i++; 
            if(i == 101 ){ // 一個 = 是給值 二個 == 是判斷 
                i = 0; // i算到101時 i歸0
                stopcalc(); //停止時間計算
            }
        }
        
        function start() { //開始計算
            startcalc = setInterval(calc, 100)// 不停地調用calc函數 每0.1秒觸發
        }

        function stopcalc() {
            clearInterval(startcalc); //停止調用函數 
        }

    </script>
</body>
</html>

等等我們要累加 * 號

累加 *

我們使用innerHTML來累加 * 號，像以下這樣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>累加符號在計數器以及清除計數器</title>

</head>
<body>

    <div id="count"> </div>
    <div id="icon"> </div>
    <button onclick="start()">請點我</button>
    <script>
        var startcalc; 
        var i = 0; //累加用

        function calc(){
            document.getElementById("icon").innerHTML += "* "; //  += 累加星號
            document.getElementById("count").innerHTML = i; /* 把文字貼上到 div id 為 count  */
            i++; 
            if(i == 101 ){ // 一個 = 是給值 二個 == 是判斷 
                i = 0; // i算到101時 i歸0
                stopcalc(); //停止時間計算
            }
        }
        
        function start() { //開始計算
            startcalc = setInterval(calc, 100)// 不停地調用calc函數 每0.1秒觸發
        }

        function stopcalc() {
            clearInterval(startcalc); //停止調用函數 
        }

    </script>
</body>
</html>

結果如下

完成之後，我們最後設定按鈕把葉面都清空吧

清空頁面

最後我們把有用到的div都清空以及把累家用的i歸零，還有停止調用函數clearInterval()
把所有東西都清空，畫面就只剩票漂亮亮的白色了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>累加符號在計數器以及清除計數器</title>

</head>
<body>

    <div id="count"> </div>
    <div id="icon"> </div>
    <button onclick="start()">請點我</button>
    <button onclick="clean()">清空頁面</button>
    <script>
        var startcalc; 
        var i = 0; //累加用
        
        function clean(){
            i = 0;//數字歸零
            clearInterval(startcalc); //停止調用函數 
            document.getElementById("icon").innerHTML  =""; //清空 icon div
            document.getElementById("count").innerHTML =""; //清空 count div

        }

        function calc(){
            document.getElementById("icon").innerHTML += "* "; //  += 累加星號
            document.getElementById("count").innerHTML = i; /* 把文字貼上到 div id 為 count  */
            i++; 
            if(i == 101 ){ // 一個 = 是給值 二個 == 是判斷 
                i = 0; // i算到101時 i歸0
                stopcalc(); //停止時間計算
            }
        }
        
        function start() { //開始計算
            startcalc = setInterval(calc, 100)// 不停地調用calc函數 每0.1秒觸發
        }

        function stopcalc() {
            clearInterval(startcalc); //停止調用函數 
        }

    </script>
</body>
</html>

我們可以使用來重複計算數字以及清空畫面了

    <button onclick="start()">請點我</button>
    <button onclick="clean()">清空頁面</button>

參考資料:
https://www.w3school.com.cn/jsref/met_win_setinterval.asp
自己

Day5:JS計數器應用

Day7:JS使用css功能以及輸入文字並且顯示到頁面

系列文

從JS到React的前端入門實作共 30 篇

RSS系列文訂閱系列文

11 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

從JS到React的前端入門實作系列 第 6 篇