数据自增

功能：当点击add按扭后，div标签中的数据自动+1，实现网页的动态化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

        <div id="kong">孔扎根的博文</div>

        <ul>

            <li>第1篇</li>

            <li>第2篇</li>

            <li>第3篇</li>

            <li>第4篇</li>

            <li>第5篇</li>

        </ul>

        <div class="top">

            来条分隔线吧

            <div>不要</div>

            <div>要</div>

        </div>

        <div class="top">

            去掉分隔线吧

        </div>

        <div id="num">1</div>

            <input type="button" value="add1" onclick="add()">

            <hr>

            密码:<input type="text" value="123">

    <script type="text/javascript">

        function add(){

//        取到name=num的标签列表

        names = document.getElementById('num');

        v_name = names.innerText;

//反回的值是文本类型的 string

        console.log(typeof(names.innerText));

        v_name = parseInt(v_name);

        v_name+=1;

//            实现id=num的值自动加1的效果

        names.innerText=v_name;

        }

    </script>

</body>

</html>

　　搜索框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>搜索框</title>

</head>

<body>

    <!--定义一个文本框并设置默认值，绑定两个事件，分别为：获取焦点(onfocus)和失去焦点(onblur)-->

    <input type="text" id="serch" value="请输入关键字" onfocus="Focs()" onblur="Fblu()">

    <script type="text/javascript">

//        获取焦点后，文本框内容为空

        function Focs(){

            var nid = document.getElementById('serch');

            var value = nid.value;

            if (value == '请输入关键字'){

                nid.value=''

            }

        }

//        失去焦点后，文本框内容重现

        function Fblu(){

            var nid = document.getElementById('serch');

            var value = nid.value;

            if (value.trim() == ''){

                nid.value='请输入关键字'

            }

        }

    </script>

</body>

</html>

　　跑马灯:

HTML标题首字不断地移动到行尾。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>欢迎各位大侠光临</title>

</head>

<body>

    <script type="text/javascript">

        function Go(){

//            获取文档标题

            var tit = document.title;

//            字符串的第一个值移到最后一个

            var new_tit = tit.slice(1,tit.length) + tit.charAt(0);

            document.title=new_tit;

        }

//        每秒执行一次

        setInterval('Go()',1000)

    </script>

</body>

</html>

　　

Dom实例：数据自增、搜索框及跑马灯的更多相关文章

  1. 微信小程序开发之带搜索记录的搜索框

    实现功能:点击搜索框,有搜索记录时以下拉菜单显示,点击下拉子菜单,将数据赋值到搜索框,点击搜索图标搜索,支持清空历史记录,可手动输入和清空查询关键字, UI: wxml: <!--查询历史记录数 ...

  2. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  3. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  4. 前端基础之BOM和DOM(响应式布局、计时器、搜索框、select联动)

    一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...

  5. 前端基础之BOM和DOM和三个小示例(计时器、搜索框、select联动)

    一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...

  6. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  7. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

  8. Android 根据EditText搜索框ListView动态显示数据

    根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layou ...

  9. bootStrap-table服务器端后台分页的使用，以及自定义搜索框的实现，前端代码到数据查询超详细讲解

    关于分页,之前一直纯手写js代码来实现,最近又需要用到分页,找了好多最终确定bootstrap-table,正好前端页面用的是bootstrap. 首先下载BootStrap-table的js和CSS ...

随机推荐

  1. Longest Substring Without Repeating Characters ---- LeetCode 003

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  2. Unity3D 创建动态的立方体图系统

    Unity3D 创建动态的立方体图系统 这一篇主要是利用上一篇的Shader,通过脚本来完成一个动态的立方体图变化系统. 准备工作如下: 创建一个新的场景.一个球体.提供给场景一个平行光,准备2个立方 ...

  3. 【转】Fiddler 教程

    原文转自:http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html Fiddler是最强大最好用的Web调试工具之一,它能记录所有 ...

  4. PostgreSQL高可用性、负载均衡、复制与集群方案介绍

    目录[-] 一.高可用性.负载均衡.复制的几个方案比较: 二.多节点集群方案比较 9.3官方文档(中文):http://58.58.27.50:8079/doc/html/9.3.1_zh/high- ...

  5. 基于tcpdump实例讲解TCP/IP协议

    前言 虽然网络编程的socket大家很多都会操作,但是很多还是不熟悉socket编程中,底层TCP/IP协议的交互过程,本文会一个简单的客户端程序和服务端程序的交互过程,使用tcpdump抓包,实例讲 ...

  6. [sql server发布订阅]after触发器执行失败造成复制不成功

    结论: (以插入而例) 发布端的数据插入成功 订阅段的数据不会插入 实验 创建一张新表 create table test_subscriber (id int, mark varchar(2),in ...

  7. DEDE调用频道封面{dede:field:content/}内容方法

    DEDE怎样在首页调用频道封面页{dede:field:content/}内容的方法,当我们用 织梦DEDECMS 做网站的时候,首页往往会加上关于我们或者企业简介之类的文字,在栏目里 当我们用织梦D ...

  8. c 函数及指针学习 10

    标准库函数 1算数运算stdlib.h 2随机数stdlib.h 3字符串转化stdlib.h 4数学函数 math.h 5日期和时间 time.h 6信号 signal.h 7打印可变参数列表std ...

  9. 转：bash: /dev/null: Permission denied

    普通用户登录:bash: /dev/null: Permission denied 2012-12-07 16:01:36|  分类: linux |举报 |字号 订阅     Last login: ...

  10. 【转】Android使用Log4j例子

    Step 1 Download Log4J library from http://logging.apache.org/log4j/1.2/download.html Step 2 Configur ...