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

11th鐵人賽

vanilla666

團隊NUTC_IMAC_BLUE

2019-09-23 08:27:42

2927 瀏覽

前言

今天文字說明會比較少，圖比較多

今日目的

今天用js影藏昨天的計數器，以及用input輸入文字後抓取現在輸入，最後打印到頁面

影藏計算器

我們使用 js的 .style.display 讓id為calchidden影藏起來

    document.getElementById("calchidden").style.display="none"; //影藏div

<!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="calchidden">
        <div id="count"> </div>
        <div id="icon"> </div>
        <button onclick="start()">請點我</button>
        <button onclick="clean()">清空頁面</button>
    </div>

    <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 == 11 ){ // 一個 = 是給值 二個 == 是判斷 
                i = 0; // i算到101時 i歸0
                document.getElementById("calchidden").style.display="none"; //影藏div

                stopcalc(); //停止時間計算
            }
        }
        
        function start() { //開始計算
            startcalc = setInterval(calc, 100)// 不停地調用calc函數 每0.1秒觸發
        }

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

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

這樣數完後目前畫面會變空白

新增輸入框

我們這次新增div後先影藏起來，div裡面有input跟按鈕，我們讓新增的div在數完數之後出現

<!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="calchidden">
        <div id="count"> </div>
        <div id="icon"> </div>
        <button onclick="start()">請點我</button>
        <button onclick="clean()">清空頁面</button>
    </div>

    <div id="show">
        <label >你好,</label>
        <label id="hello"></label>
        <input type="text" id="hellotext"> 
        <button onclick="changestring()">變更文字</button>
    </div>

    <script>
        var startcalc; 
        var i = 0; //累加用
        
        document.getElementById("show").style.display="none";
        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 == 11 ){ // 一個 = 是給值 二個 == 是判斷 
                i = 0; // i算到101時 i歸0
                document.getElementById("calchidden").style.display="none"; //影藏div
                document.getElementById("show").style.display=""; //顯現div
                stopcalc(); //停止時間計算
            }
        }
        
        function start() { //開始計算
            startcalc = setInterval(calc, 100)// 不停地調用calc函數 每0.1秒觸發
        }

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

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

如圖

抓到輸入值並且輸出到頁面上

input定義了id，這樣就可以抓到輸入值，像以下這樣

        function changestring(){
            document.getElementById("hellotext").value;

        }

在我們定義的按鈕裡抓到input的輸入值，等等用innerHTML打印在畫面上

        function changestring(){
          var x = document.getElementById("hellotext").value;
          document.getElementById("hello").innerHTML = x;

        }

如圖