JavaScript创建按钮，实现数字自加1！！
大致步骤：
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
JavaScript创建按钮，实现数字自加1！！的更多相关文章
- JavaScript插件——按钮
Bootstrap3.0学习第二十四轮(JavaScript插件——按钮) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 使用 Canvas 和 JavaScript 创建逼真的下雨效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- javascript创建css、js，onload触发callback兼容主流浏览器的实现
http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...
- django之创建第12个项目-加载图片
百度云盘:django之创建第12个项目-加载图片 1.setting配置 #静态文件相关配置 # URL prefix for static files. # Example: "http ...
- Object-c 创建按钮
@implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //动态创建我们自己的按钮 //1.创建按钮(UIB ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- JS事件 什么是事件？JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...
随机推荐
- react图工具集成
背景 调查了react下的图工具库, 并继承到项目中, 经过调研列出如下两个图工具库,可以同时使用. data-ui react-c3js 在一个工具中没有所需的图时候, 可以使用另一个替代. dat ...
- 学习string,stringBuffer时遇到的问题
今天学习string和stringBuffer.了解了两者的区别,然后去看java api都有啥方法.stringBuffer类有indexOf方法,于是写了下面的代码 String str = &q ...
- javac编译多个java文件以及-cp、-classp、-sourcepath
//编译多个文件 javac path_of_file_a/a.java path_of_file_b/b.java path_of_file_c/c.java -cp(classpath) 与 ...
- 【6】学习C++之类的实例化及访问
类就像一张图纸,如果不去实例化,制造出相应的零件,用处就不会那么大. 实例化类有两种,一个是从栈中实例化对象: class TV { public: ]; int type; void changeV ...
- APK改之理 手游修改改编安卓程序工具安装使用教程
APK改之理 手游修改改编安卓程序工具安装使用教程 --APK破解付费程序 apk改之理是pc平台上一款非常好用的apk反编译工具,他将反编译以及签名等功能集中在一起,并且拥有非常人性化的操作界面,如 ...
- day 21 - 2 练习
三级菜单 menu = { '北京': { '海淀': { '五道口': { 'soho': {}, 'google': {}, '网易': {} }, '中关村': { '爱奇艺': {}, '汽车 ...
- Spring Cloud 2-Hystrix DashBoard仪表盘(五)
Spring Cloud Hystrix DashBoard 1.监控系统配置 pom.xml application.yml Application.java 2.被监控服务配置 pom.xml ...
- 如何用java实现一个p2p种子搜索(4)-种子获取
种子获取 在上一篇中我们已经可以获取到dht网络中的infohash了,所以我们只需要通过infohash来获取到种子,最后获取种子里面的文件名,然后和获取到的infohash建立对应关系,那么我们的 ...
- 测试highlightjs主题1
package top.shaoxiu.scheduleTask; import org.springframework.scheduling.annotation.EnableScheduling; ...
- SQL08 清空日志文件语句
--1.先查询数据的日志文件的名称 USE lwlz_zhiluo GO SELECT name FROM SYS.database_files WHERE type_desc='LOG' --2.执 ...