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 函数或程序的事件. 比如说,当用户单击 ...
随机推荐
- mysql 关联表修改数据
UPDATE t1 INNER JOIN t2 ON t1.c1=t2.c1 SET t1.c2=value WHERE t1`removed`=0 AND t2`removed`=0 AND t1 ...
- python之map，filter
map和filter是python里面比较重要的BIF,map的主要作用就是对集合里面的每一个元素进行处理,filter的作用就是过滤集合,具体功能如下 t =lambda x:x%2 list(fi ...
- JS中JSON和string字符串相互转换
在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法. JSON.stringify(obj)将JSO ...
- C#多线程处理
创建多线程,并带参数! using System; using System.Collections; using System.Collections.Generic; using System.I ...
- mysql 8.0~MGR多成员读一致性
一 背景:当在读节点多成员查询时可能导致数据不一致 二 三种场景 1 读多写少 AFTER 2 读写相当 AFTER_AND_BEFORE 3 读少写多 BEFORE三 数据不一致 ...
- 产品研发不等待 i.MX6Q全新推出增强版本 官方店铺下单双重优惠
迅为全新推出PLUS版本的i.MX6Q方案,版本介绍:它是NXP公司全新推出的i.MX6Q增强版新品,显著增强了图形和存储器性能,面向较高图形性能的先进消费电子.汽车和工业多媒体应用的多核平台.
- Python学习笔记-SQLSERVER的大批量导入以及日常操作（比executemany快3倍）
环境 : python3.6 / win10 / vs2017 / sqlserver2017 一.需要安装的包pymssql pip install pymssql 二.pymssql模块的介绍 p ...
- ABP core学习之二 IIS部署.NET CORE
本文是关于IIS部署.NET CORE的总结,以后有碰到问题将陆续添加 IIS部署.NET CORE总结 一.服务器环境 首先确定自己项目的core版本,然后下载对应的包在服务器上安装 下载地址: h ...
- 【easy】530. Minimum Absolute Difference in BST
找BST树中节点之间的最小差值. /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode ...
- C++中public/protect/private三种访问权限控制
一.成员访问权限控制 1.public (1)public成员变量可以被成员函数访问 [访问性] (2)public成员可以被实体对象访问 [访问性] (3)public成员可以成为子类成员 [ ...