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詳解
前端工程師都知道 JavaScript 有基本的異常處理能力。我們可以 throw new Error(),瀏覽器也會在我們調(diào)用 API 出錯時拋出異常。但估計絕大多數(shù)前端工程師都沒考慮過收集這些異常信息2014-03-03基于js?+?html2canvas實現(xiàn)網(wǎng)頁放大鏡功能
最近接到任務,需實現(xiàn)【網(wǎng)頁】放大鏡的效果,百度搜索?【js?放大鏡】關鍵字,千篇一律的都是一些仿淘寶/京東等電商網(wǎng)站中查看規(guī)格大圖的效果實現(xiàn),根本無法滿足我的需求,于是自己花了點時間調(diào)研實現(xiàn),在這里分享給大家,感興趣的朋友可以參考下2023-12-12javascript使用appendChild追加節(jié)點實例
這篇文章主要介紹了javascript使用appendChild追加節(jié)點的方法,實例分析了appendChild()函數(shù)增加結(jié)點的使用技巧,需要的朋友可以參考下2015-01-01JavaScript數(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-08Javascript 一些需要注意的細節(jié)(必看篇)
下面小編就為大家?guī)硪黄狫avascript 一些需要注意的細節(jié)(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07