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 函数或程序的事件. 比如说,当用户单击 ...
随机推荐
- 网络协议 HTTP入门学习
概述 Web 的诞生,源于三大技术的诞生,它们都是当年 Web 之父 Tim Berners-Lee 自己 开发的,世界上第一个网站诞生的时间是 1991 年,三大技术的诞生也就是在此之前的不久: 1 ...
- python中的图像数据库PIL
from PIL import Image im = Image.open("图片路径") im.function() 常用的函数: 1.im.crop(x,y,x1,y1) 对图 ...
- 最小生成树（kruskal算法）
首先明确三个概念: 1.最小生成树的特点? 答:假设某个连通网络由n个顶点组成,则其生成树必含n个顶点和n-1条边,而最小生成树的n-1条有个要求:总和最小. 2.并查集的运用? 答:在该问题中,首先 ...
- DS博客作业02—线性表
1.思维导图及学习体会 1.1第一章绪论知识点思维导图 1.2.谈谈你对线性表的认识及学习体会. 线性表最重要的就是对指针的操作,插入删除都是看指针的指向进行操作以达到改变节点,以达到目的的.对于上学 ...
- data_summarize.pl data目录文本时长汇总脚本
#!/usr/bin/env perl # Copyright 2018 Jarvan Wang if (@ARGV != 1) { #print STDERR "Usage: keywor ...
- 【vue】渲染大量数据时性能优化
对应vue渲染大量数据时可以考虑下面几点: 1. 异步渲染组件:因为组件渲染太多,影响页面的渲染时间,所有可以延迟组件渲染,可以考虑v-if处理 2. 可以使用虚拟滚动的组件:参考使用这个插件 vue ...
- 417 事件、监听、jQuery、轮播手动
am:通用事件 a链接事件阻止默认行为 return false HTML元素大都包含了自己的默认行为,例如:超链接.提交按钮等.我们可以通过在绑定事件中加上return false来阻止它的默认行为 ...
- Ansible-----include
什么是include 在ansible中,我们可以通过include,在一个playbook中包含另一个文件,以便实现代码的重复利用. include_tasks模块 include_tasks模块用 ...
- 百度杯”CTF比赛 2017 二月场 没错！就是文件包含漏洞。
题目源码: 文件包含漏洞的话,看一下 你么可以使用php://input 伪协议,执行代码(参考了大佬WP)这里使用了POSTMAN, 目录下还有一个dle345aae.php文件,呢么用cat命令打 ...
- 论文学习笔记--无缺陷样本产品表面缺陷检测 A Surface Defect Detection Method Based on Positive Samples
文章下载地址:A Surface Defect Detection Method Based on Positive Samples 第一部分 论文中文翻译 摘要:基于机器视觉的表面缺陷检测和分类可 ...