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 函数或程序的事件. 比如说,当用户单击 ...
随机推荐
- git使用方法收藏
基本的提交:https://www.cnblogs.com/jackchensir/p/8306448.html 菜鸟教程: http://www.runoob.com/git/git-basic-o ...
- Linux下批量杀掉 包含某个关键字的 程序进程
有时候因为一些情况,需要把 linux 下符合某一项条件的所有进程 kill 掉,又不能用 killall 直接杀掉某一进程名称包含的所有运行中进程(我们可能只需要杀掉其中的某一类或运行指定参数命令的 ...
- SQL server存储过程，触发器，游标相关实例
use MySchool go alter proc P_stu as select AVG(StudentResult)as 平均分 from Result select * from Result ...
- Windows 查找txt后缀 文件复制
Windows 查找文件 并且复制目录 for /f "delims==" %a in ('dir /b /s F:\F\*.TXT')do copy /-y "%a&q ...
- c#自定义Attribute获取接口实现
一般的接口实现多态 定义接口 interface Ipeople { void say(); } 定义实现的类 public class man : Ipeople { public void say ...
- 【vue】函数式组件
在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明: <template functional> <div class="cell& ...
- vue swiper中的大坑
mounted() { var self = this; for (var i = 0; i < self.$refs.mySwiper.swiper.pagination.bullets.le ...
- hibernate查询出的实体，set值后，自动更新到数据
如图: 故事背景:(p.s.我们的项目没有正确配置事务xml文件,未明原因导致事务定义的规则不起作用)获取一个资讯对象,调用该对象的set方法设置其中的content字段,然后把修改后的实体丢到官网首 ...
- python&JSONP（Jquery篇）
采用Jquery发送跨域请求: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- .Net 入门资料推荐 （编辑中）
1.首先推荐 网易云课堂上的一个付费课程:常老师带你学ASP.NET MVC ,价格199元 2. 一个.net的框架,ABP,中文介绍如下 http://www.cnblogs.com/farb/p ...