大致步骤:

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!!的更多相关文章

  1. JavaScript插件——按钮

    Bootstrap3.0学习第二十四轮(JavaScript插件——按钮)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  4. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  5. javascript创建css、js,onload触发callback兼容主流浏览器的实现

    http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...

  6. django之创建第12个项目-加载图片

    百度云盘:django之创建第12个项目-加载图片 1.setting配置 #静态文件相关配置 # URL prefix for static files. # Example: "http ...

  7. Object-c 创建按钮

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //动态创建我们自己的按钮 //1.创建按钮(UIB ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. JS事件 什么是事件?JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

随机推荐

  1. 网络协议 HTTP入门学习

    概述 Web 的诞生,源于三大技术的诞生,它们都是当年 Web 之父 Tim Berners-Lee 自己 开发的,世界上第一个网站诞生的时间是 1991 年,三大技术的诞生也就是在此之前的不久: 1 ...

  2. python中的图像数据库PIL

    from PIL import Image im = Image.open("图片路径") im.function() 常用的函数: 1.im.crop(x,y,x1,y1) 对图 ...

  3. 最小生成树(kruskal算法)

    首先明确三个概念: 1.最小生成树的特点? 答:假设某个连通网络由n个顶点组成,则其生成树必含n个顶点和n-1条边,而最小生成树的n-1条有个要求:总和最小. 2.并查集的运用? 答:在该问题中,首先 ...

  4. DS博客作业02—线性表

    1.思维导图及学习体会 1.1第一章绪论知识点思维导图 1.2.谈谈你对线性表的认识及学习体会. 线性表最重要的就是对指针的操作,插入删除都是看指针的指向进行操作以达到改变节点,以达到目的的.对于上学 ...

  5. data_summarize.pl data目录文本时长汇总脚本

    #!/usr/bin/env perl # Copyright 2018 Jarvan Wang if (@ARGV != 1) { #print STDERR "Usage: keywor ...

  6. 【vue】渲染大量数据时性能优化

    对应vue渲染大量数据时可以考虑下面几点: 1. 异步渲染组件:因为组件渲染太多,影响页面的渲染时间,所有可以延迟组件渲染,可以考虑v-if处理 2. 可以使用虚拟滚动的组件:参考使用这个插件 vue ...

  7. 417 事件、监听、jQuery、轮播手动

    am:通用事件 a链接事件阻止默认行为 return false HTML元素大都包含了自己的默认行为,例如:超链接.提交按钮等.我们可以通过在绑定事件中加上return false来阻止它的默认行为 ...

  8. Ansible-----include

    什么是include 在ansible中,我们可以通过include,在一个playbook中包含另一个文件,以便实现代码的重复利用. include_tasks模块 include_tasks模块用 ...

  9. 百度杯”CTF比赛 2017 二月场 没错!就是文件包含漏洞。

    题目源码: 文件包含漏洞的话,看一下 你么可以使用php://input 伪协议,执行代码(参考了大佬WP)这里使用了POSTMAN, 目录下还有一个dle345aae.php文件,呢么用cat命令打 ...

  10. 论文学习笔记--无缺陷样本产品表面缺陷检测 A Surface Defect Detection Method Based on Positive Samples

    文章下载地址:A Surface Defect Detection Method Based on Positive Samples 第一部分  论文中文翻译 摘要:基于机器视觉的表面缺陷检测和分类可 ...