数据自增

功能：当点击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. codeforces round367 div2.C (DP)

    题目链接:http://codeforces.com/contest/706/problem/C #include<bits/stdc++.h> using namespace std; ...

  2. SQL语句建表、设置主键、外键、check、default、unique约束

    · 什么是数据库? 存放数据的仓库. · 数据库和数据结构有什么区别? 数据结构要解决在内存中操作数据的问题,数据库要解决在硬盘中操作数据的问题.数据结构研究一些抽象数据模型(ADT)和以及定义在该模 ...

  3. HDU 2157

    http://acm.hdu.edu.cn/showproblem.php?pid=2157 求A到B经过K个点的方案数 http://www.matrix67.com/blog/archives/2 ...

  4. HDU 4927

    http://acm.hdu.edu.cn/showproblem.php?pid=4927 直接模拟会超时,要在纸上写写推公式 A[n]*C(0,n-1)  - A[n-1]*C(1,n-1) + ...

  5. C# Listview 第一列不能居中

    /********************************************************************** * C# Listview 第一列不能居中 * 说明: ...

  6. Apache CXF 103 CXF Basics - partial

    本Spike记录中内容,如无特别指出,均引用[1]. 0 引言 0.1 基本的Web服务术语 XML 业界的结构化交换信息表示的事实上的标准. XML namespace是在XML文档中提供唯一的命名 ...

  7. Spring-IOC之前世今生

    没使用IOC之前 贯用工厂模式调用 bean组件 可类比为: 去商场买东西,你是先想好自己要买什么了,然后去寻找商品(逛商场的同学不要扯皮啊2333) 用了IOC之后 可类比为: 所有网上购物,所有的 ...

  8. linux查找webshell

    原文出处:http://my.oschina.net/longquan/blog/155905 首先认识一下小马,一般大马容易暴露,骇客都会留一手,把小马加入正常PHP文件里面 <?php ev ...

  9. html5的发展历程

    20年磨一剑,HTML5作为下一代Web标准,她的语义之美.人性之美.简单之美.实用之美……如同一场革命,将Web从内容平台推向标准化的应用平台,并一统各在平台阵营的标准.2008年,HTML5发布首 ...

  10. ros与下位机通信常用的c++ boost串口应用--22

    摘要: 原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/ 一.首先移植c++ boost 库: 1. 先去 Boost官网 下载最新的Boost版本, 我 ...