写的匆忙，示意一下，有待完善。把以下代码复制到文本文件中，把文件扩展名改为.html就可以运行了。

<html>

<head>

    <style type="text/css">

        .res

        {

            color: Red;

        }

    </style>

    <script src="jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var oldKey = "";

        var index = -1;

        var pos = new Array();

        var oldCount = 0;

        function search(flg) {

            if (!flg) {

                index++;

                index = index == oldCount ? 0 : index;

            }

            else {

                index--;

                index = index < 0 ? oldCount - 1 : index;

            }

            $(".result").removeClass("res");

            $("#toresult").remove();

            var key = $("#key").val(); //取key值

            if (!key) {

                oldKey = "";

                return; //key为空则退出

            }

            if (oldKey != key) {

                //重置

                index = 0;

                $(".result").each(function () {

                    $(this).replaceWith($(this).html());

                });

                pos = new Array();

                $("body").html($("body").html().replace(new RegExp(key, "gm"), "<span id='result" + index + "' class='result'>" + key + "</span>")); // 替换

                $("#key").val(key);

                oldKey = key;

                $(".result").each(function () {

                    pos.push($(this).offset().top);

                });

                oldCount = $(".result").length;

            }

            $(".result:eq(" + index + ")").addClass("res");

            $("body").scrollTop(pos[index]);

        }

    </script>

</head>

<body>

    <div style="position: fixed; right: 20px; top: 0;">

        <input id="key" type="text" style="width: 100px;" />

        <input type="button" value="下一个" onclick="search()" />

        <input type="button" value="上一个" onclick="search(1)" />

    </div>

    <div style="height: 50px;">

    </div>

    <div style="height: 200px;">

        1待搜索的文本。

    </div>

    <div style="height: 200px;">

        2待搜索的文本。

    </div>

    <div style="height: 200px;">

        3待搜索的文本。

    </div>

    <div style="height: 200px;">

        4待搜索的文本。

    </div>

    <div style="height: 200px;">

        5待搜索的文本。

    </div>

    <div style="height: 200px;">

        10美丽的家乡。

    </div>

    <div style="height: 200px;">

        11美丽的家乡。

    </div>

    <div style="height: 200px;">

        12美丽的家乡。

    </div>

    <div style="height: 200px;">

        13美丽的家乡。

    </div>

    <div style="height: 200px;">

        14美丽的家乡。

    </div>

    <div style="height: 200px;">

        15美丽的家乡。

    </div>

</body>

</html>

模拟浏览器搜索功能(Ctrl + F)的更多相关文章

  1. 前端页面模拟浏览器搜索功能Ctrl+F实现

    <html> <head> <style type="text/css"> .res { color: Red; } .result{ back ...

  2. 利用api模拟百度搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. UltraEdit （Ctrl + F） 查找、（Ctrl + R）替换功能失效

    环境: Windows 7 Service Pack 1 X64 工具: UltraEdit Version 21 症状: UltraEdit (Ctrl + F) 查找.(Ctrl + R)替换功能 ...

  4. idea 模糊搜索 ctrl + f（单词不完整搜索不到的解决办法）

    1,现象描述,笔者在用 idea 的 ctrl + f 搜索文件的内容时,发现了很神奇的问题,就是字符串必须输入完整才能搜索到,输入一半,哪怕是个字母输入了9个也搜不到 2,可以发现,就差一个字母 h ...

  5. 原生javascript实现 下拉框搜索功能

    由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...

  6. python--selenium简单模拟百度搜索点击器

    python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...

  7. idea 光标变成粗体且当前文件搜索功能无法使用的问题

    今天安装了idea最新版,安装完成后发现光标变成了粗体,并且快捷键在使用时出现了问题,比如:ctrl+F搜索功能无法使用 经过反复修改配置也无法改善情况,后来一次重启看到下面小窗弹出有关vim的一个提 ...

  8. Python使用mechanize模拟浏览器

    Python使用mechanize模拟浏览器 之前我使用自带的urllib2模拟浏览器去进行訪问网页等操作,非常多站点都会出错误,还会返回乱码.之后使用了 mechanize模拟浏览器,这些情况都没出 ...

  9. java模拟浏览器包selenium整合了htmlunit，火狐浏览器，IE浏览器，opare浏览器驱

    //如果网页源码中有些内容是js渲染过来的,那你通过HttpClient直接取肯定取不到,但是这些数据一般都是通过异步请求传过来的(一般都是通过ajax的get或者post方式).那么你可以通过火狐浏 ...

随机推荐

  1. Codeforces Beta Round #17 C. Balance DP

    C. Balance 题目链接 http://codeforces.com/contest/17/problem/C 题面 Nick likes strings very much, he likes ...

  2. java 反射： 当Timestamp类型的属性值为null时，设置默认值

    import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Metho ...

  3. 使用cxf开发webservice应用时抛出异常

    在使用cxf开发webservice应用时,报出了类似下面的错误 JAXB: [javax.xml.bind.UnmarshalException: unexpected element (uri:& ...

  4. C# 選擇本機檔案並上傳

    參考自:http://www.dotblogs.com.tw/puma/archive/2008/11/07/5910.aspxhttp://www.codeproject.com/Articles/ ...

  5. winform C#获得Mac地址,IP地址,子网掩码,默认网关

    1.添加程序集 2.引入命名空间 using System.Management; 3.方法 ManagementClass mc = new ManagementClass("Win32_ ...

  6. WinForm 批量设置指定控件中的控件状态

    在开发中常遇到当点击某个按钮的时候,禁用文本框或按钮的的状态,以防止误操作,下面的代码是我已批量设置指定控件中的按钮状态的代码,同理可以延伸出很多操作. /// <summary> /// ...

  7. 在linux下挂载、卸载U盘

    首先你得保证你的U盘的格式是fat格式. 先进入/mnt/目录新建一个usb目录 cd /mnt/ mkidr usb 先fdisk -l,然后插上U盘,fdisk -l 查看是否有新的硬盘添加上来了 ...

  8. IIS出现The specified module could not be found解决方法

    打开IIS 信息服务,在左侧找到自己的计算机,点右键,选择属性,在主属性中选编辑,打开“目录安全性”选项卡,单击“匿名访问和验证控制”里的“编辑”按钮,在弹出的对话框中确保只选中了“匿名访问”和“集成 ...

  9. android SDK Manager 上载失败

    android SDK Manager 下载失败如题,利用android SDK Manager 无法下载各个版本的SDK,是最近无法连接上谷歌的服务器吗?我用了网上说的在C:\WINDOWS\sys ...

  10. 使用SQL联合查询来构建临时vo对象的应用

    联合查询: 表1: team球队表 表2:schedule 赛程表 需要数据: 球队名称.主队ID.主队名称.客队ID.客队名称.胜负情况 方法1. Object数组取出列和数值 import jav ...