数据自增

功能：当点击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. 作业1-我的第一个博客&GuiHub简单练习

    自我介绍                   姓名:苗中峰(不要问有什么含义,翻着字典取的名,翻到什么字就取了什么字)                               性别:男(不解释) ...

  2. 30道四则运算<1>

    #include<iostream> using namespace std; #define random()(rand()%100) class shuzi //shuzi类的功能是产 ...

  3. 【转】Polymer API开发指南 (一)（翻译）

    原文转自:http://segmentfault.com/blog/windwhinny/1190000000592324 翻译的不好,轻拍 Polymer是google的一款前端开发框架,其基于Sh ...

  4. VS.net中快捷键收缩和展开代码段

    i. Ctrl-M-O   折叠所有方法 ii. Ctrl-M-P   展开所有方法并停止大纲显示(不可以再折叠了) iii. Ctrl-M-M   折叠或展开当前方法 iv. Ctrl-M-L展开所 ...

  5. Debian下安装Firefox与flash简介

    Debian下安装Firefox与flash简介 由于Debian在Firefox的版权上出现了问题,导致官方发布的Debian系统不能使用默认的Firefox浏览器,最后官方重编的Firefox改名 ...

  6. （基础篇）PHP字符串操作

    PHP是弱类型语言,所以其它类型的数据一般可以直接应用于字符串操作函数里,而自动转换成字符串类型,进行处理,如: echo substr("1234567", 1, 3);  和 ...

  7. Python小爬虫-自动下载三亿文库文档

    新手学python,写了一个抓取网页后自动下载文档的脚本,和大家分享. 首先我们打开三亿文库下载栏目的网址,比如专业资料(IT/计算机/互联网)http://3y.uu456.com/bl-197?o ...

  8. DEF2015丨腾讯优测携专业云测试服务，亮相中国（成都）数字娱乐节

    近年来,随着APP的大量涌出,“软件质量保证”这个话题又被拉进了人们的视野.作为备受用户信赖的移动云测试平台,腾讯优测受邀参加11月19日-21日由GMGC主办的中国(成都)数字娱乐节(简称DEF20 ...

  9. 199. Binary Tree Right Side View

    Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...

  10. public static void main(String[] args){}函数诠释

    public static void main(String[] args){}函数诠释 主函数的一般写法如下: public static void main(String[] args){-} 下 ...