欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

歡迎來(lái)到入門(mén)教程網(wǎng)!

CSS/HTML

當(dāng)前位置:主頁(yè) > 網(wǎng)頁(yè)制作 > CSS/HTML >

html頁(yè)面中完成查找功能

來(lái)源:本站原創(chuàng)|時(shí)間:2020-01-10|欄目:CSS/HTML|點(diǎn)擊: 次

最近在搞一個(gè)被很多人改了的框架,天天看代碼看的頭的暈了,不過(guò)感覺(jué)進(jìn)步還挺大的,自己做了一個(gè)后臺(tái)可配置前臺(tái)查看兩個(gè)庫(kù)不同數(shù)據(jù)范圍的東西,還挺滿(mǎn)意,那天拿出來(lái)分享一下,今天先說(shuō)一個(gè)這幾天做的功能,就是html頁(yè)面的查找功能。

這個(gè)功能主要是實(shí)現(xiàn)在查找框內(nèi)輸入字符,之后按后面的上一個(gè)下一個(gè)按鈕,會(huì)自動(dòng)把查詢(xún)區(qū)域內(nèi)的匹配字符用特殊的樣式標(biāo)記,之后可以繼續(xù)按上一個(gè)下一個(gè)按鈕把按照順序?yàn)g覽匹配字符,并把當(dāng)前匹配的字符用另一種樣式與其他匹配字符加以區(qū)別。

前臺(tái)顯示大概是這個(gè)樣子:

html是這樣:

 <div class="container" style="z-index: 999" id="searchDiv">
        <div class="keyword-search">
            查找:
            <input id="key" type="text" style="width: 200px;" placeholder="關(guān)鍵詞" />
            <a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a>
            <a href="javascript:void(0);" class="next" onclick='wordSearch()'><i class="c-icon"></i></a>
        </div>
    </div>

script代碼:

  <script>//搜索功能
        var oldKey0 = "";
        var index0 = -1;var oldCount0 = 0;
        var newflag = 0;
        var currentLength = 0;
        function wordSearch(flg) {
            var key = $("#key").val(); //取key值
            if (!key) {
                return; //key為空則退出
            }
            getArray();
            focusNext(flg);
        }
        function focusNext(flg) {
            if (newflag == 0) {//如果新搜索,index清零
                index0 = 0;
            }
            if (!flg) {
                if (oldCount0 != 0) {//如果還有搜索
                    if (index0 < oldCount0) {//左邊如果沒(méi)走完,走左邊
                        focusMove(index0);
                        index0++;
                    } else if (index0 == oldCount0) {//都走完了
                        index0 = 0;
                        focusMove(index0);
                        index0++;
                    }
                    else {
                        index0 = 0;//沒(méi)確定
                        focusMove(index0);
                        index0++;
                    }
                }
            } else {
                if (oldCount0 != 0) {//如果還有搜索
                    if (index0 <= oldCount0 && index0 > 0) {//左邊如果沒(méi)走完,走左邊
                        index0--;
                        focusMove(index0);
                    } else if (index0 == 0) {//都走完了
                        index0 = oldCount0;
                        index0--
                        focusMove(index0);
                    }
                }
            }
        }
        function getArray() {
            newflag = 1;
            $(".contrast .result").removeClass("res");
            var key = $("#key").val(); //取key值
            if (!key) {
                oldKey0 = "";
                return; //key為空則退出
            }
            if (oldKey0 != key || $(".current").length != currentLength) {
                //重置
                index0 = 0;
                var index = 0;
                $(".contrast .result").each(function () {
                    $(this).replaceWith($(this).html());
                });
                pos0 = new Array();
                if ($(".contrast-wrap").hasClass("current")) {
                    currentLength = $(".current").length;
                    $(".current .contrast").each(function () {
                        $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替換
                    });
                } else {
                    $(".contrast-wrap").addClass('current');
                    currentLength = $(".current").length;
                    $(".contrast").each(function () {
                        $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替換
                    });
                }
                //$("#key").val(key);
                oldKey0 = key;
                //$(".contrast .result").each(function () {
                //    $(this).parents('.contrast-wrap').addClass('current');
                //    pos0.push($(this).offset().top);
                //});
                // pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
                oldCount0 = $(".contrast .result").length;
                newflag = 0;
            }
        }
        function focusMove(index0) {
            $(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');
            $(".contrast .result:eq(" + index0 + ")").addClass("res");
            var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
            var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
            $(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);
            if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
                $("html, body").animate({ scrollTop: top - 200 }, 200);
            } else {
                $("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);
            }
        }
        $('#key').change(function () {
            if ($('#key').val() == "") {
                index0 = 0;
                $(".contrast .result").each(function () {
                    $(this).replaceWith($(this).html());
                });
                oldKey0 = "";
            }
        });
    </script>

接下來(lái)記一下實(shí)現(xiàn)原理:

首先先把上一次的查詢(xún)結(jié)果清除掉,然后根據(jù)key的值,用正則表達(dá)式把區(qū)域內(nèi)所有匹配的字符全都加上特殊的樣式,比如方法中就全部加了一個(gè)類(lèi)名為result的span標(biāo)簽,用odKey0變量記錄key的值(下次再進(jìn)入先比較如果一樣的話(huà)說(shuō)明是要看下一個(gè)或者上一個(gè)的內(nèi)容,就不用在進(jìn)入用正則表達(dá)式匹配了),oldCount0記錄總共查詢(xún)出來(lái)的個(gè)數(shù),newflag置0(如果不是初次查詢(xún)newflag為1)。

接著進(jìn)入getNext方法,flg表示用戶(hù)按下的是上一個(gè)還是下一個(gè)按鈕,用index0記錄當(dāng)前查看的是哪一個(gè)匹配字符,與oldCount0比較,確定是遞增或遞減還是置0(如果大于oldCount0或者小于0,就要重新開(kāi)始)。

focusMove方法就是使頁(yè)面定位到當(dāng)前元素的操作。

學(xué)到的jquery方法:

eq() 選擇器:選擇器選取帶有指定 index 值的元素。例如:$(".contrast .result:eq(1)"),就是選擇類(lèi)名contrast元素中的第二個(gè)類(lèi)名為result的元素。

parents()方法:元素的所有父元素。$("p").parents('.contrast-wrap'),p元素所有類(lèi)名為contrast-wrap的元素。

replace()方法:用指定的html內(nèi)容替換被選元素,注意是把被選元素的元素也替換掉。

offset()方法:返回或設(shè)置匹配元素相對(duì)于文檔的偏移(位置)。

scrollTop()方法:返回或設(shè)置匹配元素的滾動(dòng)條的垂直位置。

總結(jié)

以上所述是小編給大家介紹的html頁(yè)面中完成查找功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持!

上一篇:DIV的失去焦點(diǎn)(blur)實(shí)現(xiàn)方法

欄    目:CSS/HTML

下一篇:HTML實(shí)現(xiàn)2列布局(左側(cè)寬度固定,右側(cè)自適應(yīng))的方法示例

本文標(biāo)題:html頁(yè)面中完成查找功能

本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/9521.html

網(wǎng)頁(yè)制作CMS教程網(wǎng)絡(luò)編程軟件編程腳本語(yǔ)言數(shù)據(jù)庫(kù)服務(wù)器

如果侵犯了您的權(quán)利,請(qǐng)與我們聯(lián)系,我們將在24小時(shí)內(nèi)進(jìn)行處理、任何非本站因素導(dǎo)致的法律后果,本站均不負(fù)任何責(zé)任。

聯(lián)系QQ:835971066 | 郵箱:835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有