写的匆忙，示意一下，有待完善。把以下代码复制到文本文件中，把文件扩展名改为.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. BZOJ 2648: SJY摆棋子 kdtree

    2648: SJY摆棋子 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=2648 Description 这天,SJY显得无聊.在家自己玩 ...

  2. ASP lable标签显示过长，自动换行。

    <asp:Label ID="lab_BeforPostR" runat="server" CssClass="labSty" Wid ...

  3. [转载] A set of top Computer Science blogs

    This started out as a list of top Computer Science blogs, but it more closely resembles a set: the o ...

  4. （转）新手必看：HighCharts几个基础问答

    转自:http://bbs.hcharts.cn/article-21-1.html

  5. System.Diagnostics.Stopwatch

    System.Diagnostics.Stopwatch 注意:此类在 .NET Framework 2.0 版中是新增的.MSDN Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量 ...

  6. mac 自动配置java版本

    首先输入命令:vi .bash_profile ,添加如下内容: # Mac默认 JDK (Mac默认自带了一个jdk6版本) export JAVA_6_HOME=`/usr/libexec/jav ...

  7. Python--将内容写入文本文件中

    #-*- coding: utf-8 -*- import sys __cfg__version__ = 'debug' # release if __name__ == '__main__': pr ...

  8. 将j-ui(dwz)套用到thinkphp注意事项

    目前我用的 thinkphp 版本是  3.1.3 J-UI  dwz 版本好像是 1.4 现在 j-ui有 thinkphp的例子了,请尽量以他们原创为主,我这里都是一些自己搜集和自己钻研的土办法, ...

  9. Codeforces Round #236 (Div. 2) C. Searching for Graph（水构造）

    题目大意 我们说一个无向图是 p-interesting 当且仅当这个无向图满足如下条件: 1. 该图恰有 2 * n + p 条边 2. 该图没有自环和重边 3. 该图的任意一个包含 k 个节点的子 ...

  10. 在没安装OFFICE的服务器SSIS中进行EXCEL的ETL操作！

    由于OFFICE 2010的安装包比较庞大,如果仅仅为了在服务器中实现操作EXCEL,完全没有必要安装整个OFFICE,是否可以不装OFFICE也实现与OFFICE文件的互相操作呢?答案是肯定的,在S ...