关于html:JavaScript创建按钮实现数字自加1

39次阅读

共计 782 个字符，预计需要花费 2 分钟才能阅读完成。

你好，我是悦创。

最近跆拳道外部较量须要一个较量倒计时和加分扣分的性能。

所以，咱们应用 HTML 先实现。

大抵步骤：

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>