JavaScript创建按钮，实现数字自加1-流沙团队
原创JavaScript创建按钮，实现数字自加1-流沙团队
原创
AI悦创
发布于 2021-11-29 21:04:02
发布于 2021-11-29 21:04:02
你好，我是悦创。
最近跆拳道内部比赛需要一个比赛倒计时和加分扣分的功能。
所以，我们使用 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>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读