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 函数或程序的事件. 比如说,当用户单击 ...
随机推荐
- 使用Docker安装SonarQube
需先安装docker和docker-compose.见:https://www.cnblogs.com/hackyo/p/9280042.html 在任意目录下新建文件docker-compose.y ...
- JAVA集合1--总体框架
JAVA集合是JAVA提供的工具包,包含了常用的数据结构:集合.链表.栈.队列.数组.映射等.JAVA集合工具包的位置是java.util.* JAVA集合主要可以分为4个部分:List.Set.Ma ...
- 分页之 skip（pageindex*(index-1).take(size).Tolist();
grdView.DataSource = Select().Skip(pageSize * (start - 1)).Take(rows).ToList();这个分页性能上并不高下面是我的分页 1 2 ...
- 解决MySQL Access denied for user 'root'@'IP地址' 问题
1.mysql -u root -p 登陆进MYSQL: 2.执行以下命令: GRANT ALL PRIVILEGES ON *.* TO 'your name'@'%' IDENTIFIED BY ...
- 工作经验-Oracle定时数据备份
Oracle database 11g express edition http://www.oracle.com/technetwork/cn/products/express-edition/do ...
- json基础小结
定义:json是一种前后端数据传送的格式规定json对象,json字符串 (区别 json字符串是有json格式的字符串)1.创建(两中json结构,一种是对象,一种是数组)json对象:var ao ...
- 使用Github时遇到问题的解决方法
记录了一些我在使用Github时遇到问题的解决方法 git中报unable to auto-detect email address 错误的解决办法 问题描述: 执行 git commit -m &q ...
- oracle ORA-02292: 违反完整约束条件
我是处于工作中没用过oracle的状态,这不,记录下这个小小的问题.哈哈. 表是公司的平台组定义的.前几天为了测试程序,想删掉一些记录,然后使用delete语句,出现这个东东:oracle ORA-0 ...
- FATAL ERROR: please install the following Perl modules before executing
运行安装mysql 报错 [root@localhost mysql-mult]# ./scripts/mysql_install_db --defaults-file=conf/3306my.cn ...
- json中的json.dumps()
Json简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...