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

笔记 专栏收录该内容
83 篇文章 0 订阅

你好,我是悦创。

最近跆拳道内部比赛需要一个比赛倒计时和加分扣分的功能。

所以,我们使用 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>

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。QQ、微信在线,随时响应!V:Jiabcdefh

在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

AI悦创

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值