数据自增

功能：当点击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. Bootstrap全局css

    HTML中的所有标题标签,<h1>到<h6>均可使用.另外,还提供了.h1到.h6类,为的是给内联(inline)属性的文本赋予标题的样式.在标题内还可以包含<small ...

  2. iOS log第三方库之间的对比

  3. 6、SQL基础整理（日期时间数据类型，转换函数）

    日期时间数据类型 *系统常量: @@DATEFIRST(返回当前时间) DATEADD 增加时间 语法:DATEADD (datepart , number , date ) select DATEA ...

  4. session 和 cookie 的区别和联系

    二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有没 ...

  5. HDU 4819 Mosaic(13年长春现场 二维线段树)

    HDU 4819 Mosaic 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4819 题意:给定一个n*n的矩阵,每次给定一个子矩阵区域(x,y,l) ...

  6. java 函数 运算符

    1. 函数的重载:多个函数名相同,根据参数列表(个数,类型)选择执行不同函数,不能按返回值类型区分. 2. 运算符: / /两头都是int类型 则做求商运算,如果一头有小数就做正常的除运算 5/2 / ...

  7. xp 安装 win7 64

    1.Win7文件准备 (1)下载Win7 的ISO文件到本机硬盘中 (2)用UltraISO等软件加载ISO文件,将win7目录下的bootmgr和boot文件夹复制到C盘根目录下,并在C盘 根目录下 ...

  8. TCP三次握手连接与四次握手断开

    http://blog.csdn.net/whuslei/article/details/6667471(三次握手与四次握手) 1. TCP的三次握手最主要是防止已过期的连接再次传到被连接的主机. 如 ...

  9. flexbox的术语

    在详细阅读这篇文章之前,我们很有必要先了解flexbox的几个常用术语,这样有助于大家对后文的理解. 伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素 ...

  10. Spring的声明试事务

    1 在配置文件中加入: <!-- 配置事务管理器 --> <bean id="transactionManager" class="org.spring ...