JS를 사용하여 Baidu 검색창을 구현하는 방법

이번에는 JS를 사용하여 바이두 검색창을 구현하는 방법과 JS를 사용하여 바이두 검색창을 구현하는 경우의 주의 사항은 무엇인지 알아보겠습니다.

효과:

　1. 인터페이스에 들어가면 자동으로 메소드가 호출되어 현재 시간을 얻어 실시간으로 업데이트합니다.

　2. 페이지 헤드의 스킨변경을 클릭하면 배경이미지가 자동으로 변경됩니다

　3. 검색창에 마우스를 클릭하면 사용자가 마지막으로 검색한 내용이 자동으로 표시됩니다

　4. 사용자가 마지막으로 검색한 내용 위에 마우스가 위치합니다. 검색창의 내용이 마우스가 가리킨 내용이 될 때

　5. 검색창에서 Enter 키를 누르면 마지막에 입력한 내용으로 자동 입력됩니다. 현재 콘텐츠가 마지막 콘텐츠와 동일할 경우 표시되지 않습니다

　6 .바이두 버튼을 클릭하면 마지막 검색 콘텐츠로 검색창에 자동으로 입력됩니다

인터페이스:

인터페이스 html code:

nbsp;html>


 <meta>
 <title>百度一下，你就知道</title>
 <link>　　<!-- 页面标题的图标 -->
 <link>

　　<!-- 当页面加载时调用函数 -->
 <p>
  </p>

   
• 时间：
   
•    
• |
   
• 换肤
   
• 消息
  

  

   
• 新闻
   
• hao123
   
• 地图
   
• 视频
   
• 贴吧
   
• 学术
   
• 登陆
   
• 注册
  

     

        

百度一下

  

   

十九大后 习大大反腐不歇脚

   

张一山杨紫互怼

   

土耳其客机被吊起

  

   

  
• 把百度设为首页
  
• 关于百度
  
• About Baidu
  
• 百度推广
 

 <script></script>  <script> setInterval(&#39;dates()&#39;,1000)　　//定时器，每1秒调用下函数 </script>

css code:

*{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 code:

//百度搜索框
var baidu = document.getElementById('baidu'); //获取百度按钮名字
var seekArray = new Array (); //创建新数组;用来存放用户上一次搜索的问题
var seek = document.getElementById('seek'); //获取百度搜索框
var p = document.getElementsByTagName('p'); //获取下拉标签
baidu.onclick = baiDu;//给百度按钮创建onclick事件
function baiDu(){
 var seeked = seek.value;  //获取用户在搜索框中搜索的内容
 if((seeked != seekArray[0]) && (seeked != seekArray[1])){ //判断数组内不能出现重复的值，若重复则不能添加到数组中
  seekArray.unshift(seeked);  //将用户添加的内容放入到新创建的内数组中
 }
 seekArray.length = 3;   //将数组的长度定死为3 ;即显示搜索框显示的内容就是为3
 for(var x=0;x<seekarray.length seek.onfocus seek.onblur seek.onkeydown for function var bg.onclick><p> 이 글을 읽으셨다고 생각합니다. 사례 방법을 마스터하셨으니 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 읽어보세요! </p>
<p>추천 자료: </p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-397860.html" target="_blank">vue를 사용하여 구성 요소를 등록하는 방법</a><br></p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-397852.html" target="_blank"> H5에서 data-* 속성을 사용하는 방법 요약</a><br></p></seekarray.length>

위 내용은 JS를 사용하여 Baidu 검색창을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!