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

简介: 最近跆拳道内部比赛需要一个比赛倒计时和加分扣分的功能。所以,我们使用 HTML 先实现。

大致步骤:


1、写一个 p 标签,指定一个 id 选择器,输入数字!


2、写一个 input 标签,指定type属性的属性值为 button,创建一个按钮,加入 onclick 事件!


3、为 p 标签和 input 标签指定相关的 CSS 样式(可以省略)


4、用 js 创建一个自加的函数,在函数中用 document 对象的 getElementById() 方法,选中 p 标签。


5、通过 innerHTML 获取 p 标签的内容,实现自加!!


实现代码如下:1.png2.png


目录
相关文章
|
8月前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
64 1
|
8月前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
70 1
|
8月前
|
JavaScript 前端开发 算法
JavaScript中的排他算法实现按钮单选
JavaScript中的排他算法实现按钮单选
58 0
|
前端开发 JavaScript 容器
|
JavaScript 前端开发
使用JavaScript,点击按钮一个打开新的窗体
使用JavaScript,点击按钮一个打开新的窗体
|
4月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
5月前
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
5月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
47 2
|
5月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
33 1
|
5月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
26 1
下一篇
开通oss服务