大致步骤：

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. java(11)带参数的方法

    一.java中的包(package) 1.1 包,对应到磁盘中的文件夹 1.2 新建一个class,默认保存在缺省包中 1.3 声明包的关键字:package package语句,置顶位置 1.4 导 ...

  2. 解决 to_csv('****',encoding='utf-8')生成文件乱码

    今天通过to_csv()方法生成csv文件时,发现打开文件都是乱码,后面通过查找资料发现encoding参数要改为“utf_8_sig”才行,“utf-8”是不行的

  3. 0ctf 2019 zero_task

    一个条件竞争的洞,以前没有接触过.比赛完研究了wp复现下. new_thread结构体如下 new_thread: thread_area size0x8 thread_area+0x8 size 0 ...

  4. Eclipse 配置Tomcat 服务器

    第一部分:eclipse环境下如何配置tomcat 1.下载并成功安装Eclipse和Tomcat 2.打开Eclipse,单击“window”菜单,选择下方的“Preferences” . 选择好自 ...

  5. php递归实现一维数组转为指定树状结构 --- 省市区处理

    ### 这两天脑壳痛,一时短路,想不到准备利用递归实现这个需求,最后还是要请教同事,回来自己在实现了一遍,并记录下来 ### 原数据: // { // 广东省: { // 广州市: [ // &quo ...

  6. mysql 从一个表查询数据插入另一个表或当前表

    mysql insert into 表明(uid,lng,lat) SELECT uuid,lng,lat FROM 表明

  7. ollydbg入门记录

    1.软件窗口说明 OllyDBG 中各个窗口的名称如下图.简单解释一下各个窗口的功能, 反汇编窗口:显示被调试程序的反汇编代码,标题栏上的地址.HEX 数据.反汇编.注释可以通过在窗口中右击出现的菜单 ...

  8. python的numpy库的学习

    1.创建 array(序列类型).asarray.arange.ones.ones_like.zeros.zeros_like.empty.empty_like.eye.identity 2.运算 两 ...

  9. 如何给PDF文件制作书签

    书本阅读的时候我们有时候会制作一些漂亮的书签,那么电子文档也是有书签的,要怎么制作小伙伴们都知道吗?应该会有许多的小伙伴还不知道,今天就为大家分享一下电子文件如何添加书签的.就以PDF这个现在常用的电 ...

  10. Keil相关问题

    1.keil重选则器件 2. 移植FREERTOS出错 .\Objects\RTOSDemo.axf: Error: L6406E: No space in execution regions wit ...