亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS模擬百度搜索框和選項卡的實現(xiàn)

 更新時間:2022年03月31日 10:33:25   作者:dengfengling999  
本文主要介紹了JS模擬百度搜索框和選項卡的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

練習1

實現(xiàn)搜索框內(nèi),輸入相關數(shù)字,在下方顯示相關內(nèi)容,模擬百度搜索,詳細代碼如下:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 600px;
            height: 500px;
 
            margin: 0 auto;
        }
 
        .show {
            display: none;
            width: 200px;
            height: 300px;
            border: solid 1px black;
        }
    </style>
</head>
 
<body>
    <div class="content">
        <div class="serach">
            <input type="text" id="val" placeholder="請輸入課程" style="width:200px; height:30px;">
            <input type="submit" id="sub">
        </div>
        <div class="show" id="show"></div>
    </div>
 
    <script>
        //以數(shù)組為例,可以連接數(shù)據(jù)庫,進行查詢數(shù)據(jù)
        let arr = ['web前端精英特訓班 980元', 'HTML核心技術 199元', 'CSS核心技術 299元', 'Vue核心技術 599元',
            'CSS+HTML核心技術 299元', 'web前端在線商城 99元', 'JavaScript核心技術 399元', 'JavaScript高級技術 899元'];
 
        //先完成,展示區(qū)域的顯示與隱藏
        let input = document.getElementById('val');
        let show = document.getElementById('show');
        input.onkeyup = function () {
            //當鍵盤抬起時觸發(fā)
            show.style.display = 'block';
            //input.value和arr的每一項進行匹配 用indexOf():方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置, 匹配到返回下標,匹配不到返回-1
            let str = '';
            arr.forEach((item) => {//forEach()中第一個元素item,代表數(shù)組中的元素,每一項
                let res = item.indexOf(input.value);
                if (res != -1) {
                    str += '<p>' + item + '</p>';
                }
            })
            //判斷input.value為空或者str數(shù)組中沒有,給用戶一個提示
            if (!input.value || !str) {
                show.innerHTML = '<p>暫無結(jié)果</p>';
            } else {
                show.innerHTML = str;
            }
 
 
        }
        input.onblur = function () {
            //失去焦點隱藏
            show.style.display = 'none';
            input.value = '';
        }
    </script>
</body>
 
</html>

結(jié)果:

點擊搜索框時:

 練習2,選項卡,詳細代碼如下:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
 
        ul {
            overflow: hidden;
        }
 
        li {
            width: 100px;
            height: 40px;
            background-color: #ccc;
            border: 1px solid #ccc;
            float: left;
            line-height: 40px;
            /*設置行高等于height高度文字會垂直居中顯示*/
            text-align: center;
        }
 
        div {
            width: 406px;
            height: 406px;
            border: 1px solid #ccc;
        }
 
        img {
            width: 406px;
            height: 406px;
            display: none;
        }
    </style>
</head>
 
<body>
    <ul>
        <li>大菊</li>
        <li>英短</li>
        <li>美短</li>
        <li>布偶</li>
    </ul>
    <div>
        <img src="images/15.jpg" alt="" style="display: block;">
        <img src="images/16.jpg" alt="">
        <img src="images/17.jpg" alt="">
        <img src="images/18.jpg" alt="">
    </div>
 
    <script>
        //1.移動到那個選項卡上邊,背景顏色要改變,對用的內(nèi)容區(qū)域要顯示
        //移出時背景顏色恢復,對應內(nèi)容區(qū)域隱藏
        let li = document.getElementsByTagName('li');
        let img = document.getElementsByTagName('img');
        for (let i = 0; i < li.length; i++) {
            //先進性元素數(shù)組的下標的設置 在js中獲取數(shù)組的下標用 .index
            li[i].index = i;
 
            //移入時的屬性
            li[i].onmousemove = function () {
                li[i].style.backgroundColor = 'yellow';
 
                //先把所有的圖片進行隱藏,再讓對應的圖片出現(xiàn)
                for (let j = 0; j < img.length; j++) {
                    img[j].style.display = 'none';
                }
                img[this.index].style.display = 'block';
            }
            //移出時恢復原來的顏色
            li[i].onmouseout = function () {
                li[i].style.backgroundColor = '#eee';
            }
        }
 
    </script>
</body>
 
</html>

 結(jié)果:

file:///C:/Users/DELL/Pictures/Screenshots/屏幕截圖(15).jpg

點擊第二個選項卡時:

 到此這篇關于JS模擬百度搜索框和選項卡的實現(xiàn)的文章就介紹到這了,更多相關JS模擬百度搜索框和選項卡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • JS高級調(diào)試技巧:捕獲和分析 JavaScript Error詳解

    JS高級調(diào)試技巧:捕獲和分析 JavaScript Error詳解

    前端工程師都知道 JavaScript 有基本的異常處理能力。我們可以 throw new Error(),瀏覽器也會在我們調(diào)用 API 出錯時拋出異常。但估計絕大多數(shù)前端工程師都沒考慮過收集這些異常信息
    2014-03-03
  • 基于js?+?html2canvas實現(xiàn)網(wǎng)頁放大鏡功能

    基于js?+?html2canvas實現(xiàn)網(wǎng)頁放大鏡功能

    最近接到任務,需實現(xiàn)【網(wǎng)頁】放大鏡的效果,百度搜索?【js?放大鏡】關鍵字,千篇一律的都是一些仿淘寶/京東等電商網(wǎng)站中查看規(guī)格大圖的效果實現(xiàn),根本無法滿足我的需求,于是自己花了點時間調(diào)研實現(xiàn),在這里分享給大家,感興趣的朋友可以參考下
    2023-12-12
  • javascript使用appendChild追加節(jié)點實例

    javascript使用appendChild追加節(jié)點實例

    這篇文章主要介紹了javascript使用appendChild追加節(jié)點的方法,實例分析了appendChild()函數(shù)增加結(jié)點的使用技巧,需要的朋友可以參考下
    2015-01-01
  • JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實現(xiàn)

    JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實現(xiàn)

    本文主要介紹了JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • 一文詳解Javascript內(nèi)存機制與垃圾回收

    一文詳解Javascript內(nèi)存機制與垃圾回收

    這篇文章主要給大家詳細介紹了Javascript的內(nèi)存機制與垃圾回收,文中又詳細的代碼示例,對我們學習Javascript有一定的幫助,需要的同學可以借鑒閱讀
    2023-06-06
  • JS簡單數(shù)組排序操作示例【sort方法】

    JS簡單數(shù)組排序操作示例【sort方法】

    這篇文章主要介紹了JS簡單數(shù)組排序操作,結(jié)合實例形式分析了javascript使用sort方法進行數(shù)組排序的相關操作技巧,需要的朋友可以參考下
    2019-05-05
  • 微信小程序使用第三方庫Immutable.js實例詳解

    微信小程序使用第三方庫Immutable.js實例詳解

    Immutable 是 Facebook 開發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改,是的應用開發(fā)更簡單,允許使用函數(shù)式編程技術,比如惰性評估。微信小程序無法直接使用Immutable.js,下面就來說說微信小程序如何使用第三方庫Immutable.js。
    2016-09-09
  • layui 上傳圖片 返回圖片地址的方法

    layui 上傳圖片 返回圖片地址的方法

    今天小編就為大家分享一篇layui 上傳圖片 返回圖片地址的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS獲取和修改元素樣式的實例代碼

    JS獲取和修改元素樣式的實例代碼

    下面小編就為大家?guī)硪黄狫S獲取和修改元素樣式的實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • Javascript 一些需要注意的細節(jié)(必看篇)

    Javascript 一些需要注意的細節(jié)(必看篇)

    下面小編就為大家?guī)硪黄狫avascript 一些需要注意的細節(jié)(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論