当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript创建按钮，实现数字自加1！！

JavaScript创建按钮，实现数字自加1！！

2019年03月04日  | 移动技术网IT编程  | 我要评论

大致步骤：

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网