• 模拟浏览器搜索功能(Ctrl + F)


    写的匆忙,示意一下,有待完善。把以下代码复制到文本文件中,把文件扩展名改为.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=" 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>
  • 相关阅读:
    springMVC学习笔记五(拦截器详解)
    springMVC学习笔记六(注解方式实现控制器)
    springMVC学习笔记四(数据类型转换和数据验证)
    springMVC学习笔记二(dispatcherServlet)
    springMVC学习笔记三(controller控制器)
    springMVC学习笔记一(hello world)
    mybatis学习笔记四(与spring3集成)
    扩展欧几里得————《数论》
    2017 多校赛 第二场
    POJ 2566 尺取法(进阶题)
  • 原文地址:https://www.cnblogs.com/s0611163/p/3971049.html
Copyright © 2020-2023  润新知