JavaScript創建按鈕,實現數字自加1!!


大致步驟:

1、寫一個p標簽,指定一個id選擇器,輸入數字!

2、寫一個input標簽,指定type屬性的屬性值為button,創建一個按鈕,加入onclick事件!

3、為p標簽和input標簽指定相關的CSS樣式(可以省略)

4、用js創建一個自加的函數,在函數中用document對象的getElementById()方法,選中p標簽。

5、通過innerHTML獲取p標簽的內容,實現自加!!

 

實現代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自加</title>
    <style>
            body {
                text-align: center;
            }
            p,#ipt,#btn {
                font-size: 50px;
            }
            #ipt {
                width: 100px;
                margin-bottom: 10px;
            }
            #ipt,#btn {
                height: 100px;
                padding: 0px 20px;
            }
        </style>
        <script>
           function numPlus() {
                var p = document.getElementById('num');
                p.innerHTML++;
           }
        </script>
</head>
<body>
        <p id="num">1</p>
        <input type="button" id="btn" value="click +1" onclick="numPlus()" />
</body>
</html>

效果演示:

 

0


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM