Dom实例:数据自增及搜索框

数据自增

功能:当点击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>
时间: 2024-09-29 04:20:19

Dom实例:数据自增及搜索框的相关文章

向DataGrid数据表格增加查询搜索框

向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext.request.contextPath}/OfferServlet",//servlet路径 columns:[[ {field:'offerid',title:'商品ID',width:100}, {field:'offername',title:'商品名称',width:100}, {field

利用XML的dom进行数据的增删改查

import java.io.FileOutputStream; import javax.swing.event.DocumentListener; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import javax.xml.transform.T

模拟百度搜索框

在使用百度搜索是,页面会根据我们输入的内容自动匹配一些候选内容. 实现的主要过程主要是: 1.用户在输入一个字符结束后,在onkeyup事件中获取用户输入的内容. 2.根据获取到的内容向服务器发送请求,匹配到相似的数据,存到数组中. 3.判断数组是否有内容,如果有数据,就在搜索框下面遍历匹配到的内容(候选项). 首先,要写好页面布局 html部分 <html> <head> <meta http-equiv="Content-Type" content=&

EasyUI之搜索框searchbox

1.实例背景 EasyUI中searchbox搜索框,输入值后点击搜索图标,可以打印出值 2.实例源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI之搜索框searchbox</title> <link rel="stylesheet" href="../themes/black/easyui

搜索框关键字智能匹配实例代码实例

搜索框关键字智能匹配实例代码实例:只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="auth

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

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

Android 依据EditText搜索框ListView动态显示数据

依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layout,包括一个EditText搜索框和一个ListView 2.创建一个数据集mData,用于ListView的Adapter的创建 3.加入EditText的文本改变的监听器 4.利用notifyDataSetChanged()动态更新ListView 第一步:创建一个搜索框 这个还是比較easy的

Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码(百度首页搜索录入框及登录链接)

此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkText.tagName 的实战实例源代码演示 Selenium 元素定位的 8 种方法,源代码测试通过日期为:2015-01-26 00:18,请知悉.注意:其中通过 tagName 定位元素时,返回的是一个 WebElement 的数组,需要根据实际的测试需求对其进行进一步的处理. 希望能对初学 S

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

根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layout,包含一个EditText搜索框和一个ListView 2.创建一个数据集mData,用于ListView的Adapter的创建 3.添加EditText的文本改变的监听器 4.利用notifyDataSetChanged()动态更新ListView 第一步:创建一个搜索框 这个还是比较容易的,这