数据自增

功能：当点击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. (并查集 or BFS+二分)HDU5652

    点击打开链接 并查集: #include<cstdio> #define N 505 using namespace std; struct node { int x,y; }; char ...

  2. iOS-MVC详解

    MVC与模板概念的理解 MVC(Model View Controller)模型-视图-控制器 MVC本来是存在于Deskt op程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC 的 ...

  3. apache2将http自动指向https

    <VirtualHost *:80> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule (.*) https://%{HTTP_H ...

  4. github for windows 安装失败解决方案（亲测）

    早之前就有接触github,也在公司机子上装过,一路下来挺顺畅的.夏老师还纳闷他的机子装不上,我说,有鬼! 然而时隔一个月自己再来装,却在自己的本本上遇到鬼了. 然而网上论坛收了一堆,各种试.果断放弃 ...

  5. maker 2008年发表在genome Res

    http://gmod.org/wiki/MAKER_Tutorial 简单好用 identify repeats, to align ESTs and proteins to the genome, ...

  6. 理解HMM

    hidden markov model markov model: 把一个总随机过程看成一系列状态的不断转移, 其特性主要使用转移概率来表示. HMM:认为模型的状态是不可观测的(hidden), 能 ...

  7. Codeforces Round #373 (Div. 2) A B C 水 贪心 模拟(四舍五入进位)

    A. Vitya in the Countryside time limit per test 1 second memory limit per test 256 megabytes input s ...

  8. 隐马尔科夫模型(HMM)的概念

    定义隐马尔科夫模型可以用一个三元组(π,A,B)来定义:π 表示初始状态概率的向量A =(aij)(隐藏状态的)转移矩阵 P(Xit|Xj(t-1)) t-1时刻是j而t时刻是i的概率B =(bij) ...

  9. leetcode 123. Best Time to Buy and Sell Stock III ----- java

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  10. 4-1 yum源文件

    1.Yum源文件 <1>在Linux中,有这样一个目录 /etc/yum.repos.d/,里面有默认4个yum源文件, 其中Base是基本yum源文件,它是默认生效的 其他的几个默认都是 ...