,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下" />

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript實(shí)現(xiàn)百度搜索框效果

 更新時(shí)間:2024年07月01日 15:06:04   作者:Cc_Pz  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)百度搜索框效果
,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

最近做了個(gè)百度搜索框今天給大家分享下。

效果:

  1.當(dāng)進(jìn)入界面時(shí),自動(dòng)調(diào)用方法,獲取當(dāng)前的時(shí)間,并且實(shí)時(shí)更新時(shí)間。

  2.點(diǎn)擊頁(yè)面頭部的換膚,自動(dòng)更換背景圖片

  3.鼠標(biāo)點(diǎn)擊搜索框的時(shí)候自動(dòng)顯示用戶上次搜索的內(nèi)容,

  4.當(dāng)鼠標(biāo)放在用戶上次搜索的內(nèi)容的時(shí)候搜索框的內(nèi)容變成鼠標(biāo)懸浮的內(nèi)容上

  5.在搜索框中按回車的時(shí)候自動(dòng)錄入為上次輸入的內(nèi)容中,若本次內(nèi)容和上次內(nèi)容相同則不顯示

  6.點(diǎn)擊百度一下按鈕自動(dòng)錄入搜索框中的內(nèi)容為上次搜索的內(nèi)容

界面:

界面html代碼:

css代碼:

*{margin: 0;padding: 0;}
body,html{width: 100%;height: 636px;background: url('../img/bj2.jpg') no-repeat;background-size:100% 100% }
.nav{width: 100%;height: 32px;background:rgba(0,0,0,0.3);padding-right:20px;padding-left:20px;box-sizing: border-box }
.nav .left{list-style: none;float: left}
.nav .left li{color:white;line-height: 32px;margin-right: 12px;font-size: 13px;float: left;}
.nav .left li a{color:white;}
.nav .left li a:hover{cursor: pointer}
.nav .right{list-style: none;float: right;}
.nav .right li a{color:white;line-height: 32px;margin-left: 12px;font-size: 13px;opacity:1;}
.nav .right li{float: left;}
#logo{margin: 0px auto;display: block;}
.baidu_box{width: 646px;height: 44px;margin:0 auto;position: relative;margin-top: 20px; }
.baidu_box #seek{height: 40px;width: 538px;float: left;text-indent: 0.6em;font-size: 16px;}
.baidu_box #baidu{width: 104px;height: 44px;float: left;line-height: 44px;font-size:16px;text-align: center;background: url('../img/an_bg.jpg') no-repeat;background-size: 100% 100%;}
.baidu_box #baidu:hover{cursor: pointer}
.baidu_box .icon{position: absolute;top: 12px;left: 490px;}
.baidu_box .icon:hover{cursor: pointer}
.baidu_box ul{width: 541px;float: left;display: none;}
.baidu_box ul p{width: 542px;line-height: 40px;list-style: none;display: none;text-indent: 0.6em;background: white}
.baidu_box ul p:hover{cursor: pointer;background: url('../img/an_bg.jpg') no-repeat;background-size: 100% 100%;}
.buttom{margin: 0 auto;width: 500px;height: 40px;margin-top:210px;}
.buttom li {list-style: none;float: left;margin-left: 20px;}
.buttom li a {line-height: 40px;color: #525252;}

js代碼:

//百度搜索框
var baidu = document.getElementById('baidu'); //獲取百度按鈕名字
var seekArray = new Array (); //創(chuàng)建新數(shù)組;用來(lái)存放用戶上一次搜索的問(wèn)題
var seek = document.getElementById('seek'); //獲取百度搜索框
var p = document.getElementsByTagName('p'); //獲取下拉標(biāo)簽
baidu.onclick = baiDu;//給百度按鈕創(chuàng)建onclick事件
function baiDu(){
 var seeked = seek.value; //獲取用戶在搜索框中搜索的內(nèi)容
 if((seeked != seekArray[0]) && (seeked != seekArray[1])){ //判斷數(shù)組內(nèi)不能出現(xiàn)重復(fù)的值,若重復(fù)則不能添加到數(shù)組中
 seekArray.unshift(seeked); //將用戶添加的內(nèi)容放入到新創(chuàng)建的內(nèi)數(shù)組中
 }
 seekArray.length = 3;  //將數(shù)組的長(zhǎng)度定死為3 ;即顯示搜索框顯示的內(nèi)容就是為3
 for(var x=0;x<seekArray.length;x++){ //將數(shù)組中的東西放入到我們的搜索框下菜單中
 if((seekArray[x] != undefined)){ //判斷用戶上次搜索的東西,假如為空就不顯示
  p[x].innerHTML = seekArray[x];
 }
 }
}

//搜索框獲焦/失焦的狀態(tài)
seek.onfocus = function(){
 for(var x of p){
 x.style.display = 'block';
 }
 p[0].parentNode.style.display = 'block'; //
}
seek.onblur = function(){
 p[0].parentNode.style.display = 'none';
 for(var x of p){
 x.style.display = 'none';
 }
}
seek.onkeydown = function(Ent){
 // console.log(baiDu);
 if(Ent.keyCode == 13){ //當(dāng)在input框中敲回車的時(shí)候
 baiDu();  //觸發(fā)baiDu()
 }
}

//點(diǎn)擊用戶搜索過(guò)的新聞搜索框直接顯示
for(var x of p){
 x.onmouseover = look ; //遍歷所有的li并且給每個(gè)li添加鼠標(biāo)懸浮事件
}
function look(){
 seek.value = this.innerHTML;
}

//獲取當(dāng)前時(shí)間
function dates(){
 var now = document.getElementById('sj');
 var time = new Date;
 var hour = time.getHours();
 var mins = time.getMinutes();
 if(parseInt(mins)<10){
 mins = '0'+mins;
 }
 now.innerHTML = hour +':'+mins;
}

//點(diǎn)擊換背景
var bg = document.getElementById('bg');//獲取id為dg的標(biāo)簽
bg.onclick = function bgImg(){  //給他添加點(diǎn)擊事件
 var bo = document.getElementById('bo'); //獲取body
 var i = parseInt(Math.random()*7);  //寫個(gè)隨機(jī)數(shù)字
 bo.setAttribute("style","background:url('img/bj"+(i+1)+".jpg') no-repeat;background-size:100% 100%");//更改他的樣式
}

這就是我寫的百度搜索框,假如大家有啥不懂的,歡迎下邊留言!!

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript比較兩個(gè)日期相差天數(shù)的方法

    javascript比較兩個(gè)日期相差天數(shù)的方法

    這篇文章主要介紹了javascript比較兩個(gè)日期相差天數(shù)的方法,涉及javascript針對(duì)日期的轉(zhuǎn)換與數(shù)學(xué)運(yùn)算相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
    2015-07-07
  • JavaScript 選中文字并響應(yīng)獲取的實(shí)現(xiàn)代碼

    JavaScript 選中文字并響應(yīng)獲取的實(shí)現(xiàn)代碼

    當(dāng)鼠標(biāo)選擇一段文字時(shí),對(duì)這個(gè)事件產(chǎn)生響應(yīng),并且將選中的文字傳遞出去。
    2011-08-08
  • 詳解微信小程序回到頂部的兩種方式

    詳解微信小程序回到頂部的兩種方式

    這篇文章主要介紹了詳解微信小程序回到頂部的兩種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Visual Studio中js調(diào)試的方法圖解

    Visual Studio中js調(diào)試的方法圖解

    這篇文章主要介紹了Visual Studio中JS調(diào)試的方法,需要的朋友可以參考下
    2014-06-06
  • 詳解javascript獲取url信息的常見(jiàn)方法

    詳解javascript獲取url信息的常見(jiàn)方法

    本篇文章主要對(duì)javascript獲取url信息的常見(jiàn)方法進(jìn)行介紹,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧
    2016-12-12
  • JavaScript代理模式原理與用法實(shí)例詳解

    JavaScript代理模式原理與用法實(shí)例詳解

    這篇文章主要介紹了JavaScript代理模式原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript代理模式基本概念、原理、用法與操作注意事項(xiàng),需要的朋友可以參考下
    2020-03-03
  • 百度小程序自定義通用toast組件

    百度小程序自定義通用toast組件

    這篇文章主要介紹了百度小程序自定義通用toast組件,百度小程序的toast僅支持在頁(yè)中展示,不能自定義位置、字體大小、在單個(gè)文本中增加icon等需求;因此自定義一個(gè)全局可通用的Toast,需要的朋友可以參考下
    2019-07-07
  • JavaScript實(shí)現(xiàn)仿淘寶商品購(gòu)買數(shù)量的增減效果

    JavaScript實(shí)現(xiàn)仿淘寶商品購(gòu)買數(shù)量的增減效果

    最近接了個(gè)項(xiàng)目,要開發(fā)一個(gè)地方的O2O租書項(xiàng)目,使用的是asp.net mvc技術(shù),其中咋圖書詳情頁(yè),用戶可以輸入借閱的數(shù)量,器實(shí)現(xiàn)此功能的方法是使用了js來(lái)控制數(shù)量的增減和校驗(yàn),對(duì)js實(shí)現(xiàn)商品數(shù)量的增減功能感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01
  • 淺談JS中String()與 .toString()的區(qū)別

    淺談JS中String()與 .toString()的區(qū)別

    下面小編就為大家?guī)?lái)一篇淺談JS中String()與 .toString()的區(qū)別。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-10-10
  • Javascript oop設(shè)計(jì)模式 面向?qū)ο缶幊毯?jiǎn)單實(shí)例介紹

    Javascript oop設(shè)計(jì)模式 面向?qū)ο缶幊毯?jiǎn)單實(shí)例介紹

    這篇文章主要介紹了Javascript oop設(shè)計(jì)模式 面向?qū)ο缶幊毯?jiǎn)單實(shí)例介紹的相關(guān)資料,這里附有實(shí)例代碼幫助大家學(xué)習(xí)理解,需要的朋友可以參考下
    2016-12-12

最新評(píng)論

山阳县| 浙江省| 屏南县| 集安市| 临清市| 宜城市| 昌都县| 昭通市| 新化县| 革吉县| 彰化县| 丰县| 海原县| 杂多县| 玉门市| 宽甸| 开阳县| 扎兰屯市| 垫江县| 永顺县| 略阳县| 怀来县| 福贡县| 林甸县| 阳朔县| 金秀| 江西省| 屏东市| 崇阳县| 正蓝旗| 昂仁县| 江川县| 寿阳县| 石屏县| 柳江县| 屯留县| 辉县市| 林口县| 澄城县| 阳新县| 古蔺县|