写的匆忙，示意一下，有待完善。把以下代码复制到文本文件中，把文件扩展名改为.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. SSAS建模遇到的问题集锦

    1:维度和度量的数据类型一定要一致 2:度量值的类型不能为字符型,因为执行SUM等操作时会报错 3:当度量值中存在着维度表中不存在的Key时,处理的时候设置维度键错误为忽略,如下图所示 4:SSAS多 ...

  2. CountDownLatch线程阻塞用法实例

    在编写多线程的工作中,有个常见的问题:主线程(main) 启动好几个子线程(task)来完成并发任务,主线程要等待所有的子线程完成之后才继续执行main的其它任务. 默认主线程退出时其它子线程不会停, ...

  3. 调用axis2开发的接口遇到的问题

    第1个异常 [org.apache.struts.actions.DispatchAction] – Dispatch[/myservice/NgCallServiceInfo]  to method ...

  4. mysql数据库导入和导出

    Mysql数据中,使用时,总是会碰见导入和导出情况,所以如何正确的导入导出,非常重要!下面根据工作中用到的方法,会不管补充: 导入: 直接在Mysql中导入: mysql>use databas ...

  5. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  6. Linux连续执行多条命令

    引自:这里 每条命令使用";"隔开,则无论前边的命令执行成功与否都会继续执行下一条命令这里,故意将第二条命令中的echo多写了一个o,命令执行出错,但并不影响后续命令的执行可以这么 ...

  7. Generating a new ASP.NET session in the current HTTPContext

    void regenerateId() { System.Web.SessionState.SessionIDManager manager = new System.Web.SessionState ...

  8. 即将放出ITSEC第一期所有培训视频

    课程大概被分为三个章节 客户端安全培训 安全工具培训 服务端安全培训   部分PPT                         详细课程表 FireBug代码调试工具使用:工具介绍 FireBu ...

  9. java数据库连接池性能对比

    这个测试的目的是验证当前常用数据库连接池的性能. testcase Connection conn = dataSource.getConnection(); PreparedStatement st ...

  10. 清除SQL数据库的日志

    ALTER DATABASE [Fuliu_Test] SET RECOVERY SIMPLEALTER DATABASE [Fuliu_Test] SET RECOVERY FULLDBCC SHR ...