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 函数或程序的事件. 比如说,当用户单击 ...
随机推荐
- CSS3 Background-origin
Background-origin是CSS3为Background扩展的第三个属性,从Background-origin字面上不难发现是指背景图片的原点,其实background-origin主要就是 ...
- python复习2
在操作字符串时,我们经常遇到str和bytes的互相转换.为了避免乱码问题,应当始终坚持使用UTF-8编码对str和bytes进行转换.
- Mysql查看登录用户以及修改密码和创建用户以及授权（转载）
本文转自(https://www.cnblogs.com/manzb/p/6491924.html) 1.mysql查看当前登录用户,当前数据库: select user(); select data ...
- SqlServer如何获取存储过程的返回值
1.Output参数返回值 1 CREATE PROCEDURE [dbo].[upInformation]( 2 @age int , 3 @id bigint OUTPUT 4 ) 5 AS 6 ...
- python使用pip 18以上版本离线安装package
在内网办公环境,常常需要使用离线安装python的软件包. 一般都会先在互联网的电脑上下载,再拷贝到内网办公机器上进行离线安装. 一般来说,我是这样做的: 1.拷贝和外网电脑上版本一致,且32位或64 ...
- Gitlab_ansible_jenkins三剑客⑤jenkins Pipeline-job的使用
Pipeline-job的使用 创建Pipeline任务 找到root用户的id 编写pipeline脚本 #!groovy pipeline{ agent {node {label 'master' ...
- C++ opentracing zipkin
Useful page : https://github.com/openzipkin/b3-propagation & other official websites Steps to ru ...
- Light OJ 1266 - Points in Rectangle
题目 Link 就是查询矩形内有多少个点. 分析 二维树状数组维护就好了,. Code #include <bits/stdc++.h> const int maxn = 1000 + 1 ...
- 龙芯yl8089无声音的解决方案
网上搜索到的解决方法都是卸载pulseaudio,但这种方法比较暴力不能从根本上解决问题. 经过一段时间的排查,我发现最终问题出现在resample-method上. 由于内核内CS5536 AC97 ...
- nginx实现https的配置文件
server { listen ; server_name testplatform.itegou.com; proxy_set_header X-Forwarded-Host $host; prox ...