JS를 사용하여 Baidu 검색창을 구현하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

php中世界最好的语言

May 23, 2018 pm 03:34 PM

javascript 찾다 바이두

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

효과:

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

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

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

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

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

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

인터페이스:

인터페이스 html code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>百度一下，你就知道</title>
 <link rel="shortcut icon" type="imges/x-icon" href="img/favicon.ico">　　<!-- 页面标题的图标 -->
 <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body onload="dates()" id="bo">　　<!-- 当页面加载时调用函数 -->
 <p class="nav">
  <ul class="left">
   <li>时间：</li>
   <li id="sj"></li>
   <li>|</li>
   <li><a id="bg">换肤</a></li>
   <li><a>消息</a></li>
  </ul>
  <ul class="right">
   <li><a href="#">新闻</a></li>
   <li><a href="#">hao123</a></li>
   <li><a href="#">地图</a></li>
   <li><a href="#">视频</a></li>
   <li><a href="#">贴吧</a></li>
   <li><a href="#">学术</a></li>
   <li><a href="#">登陆</a></li>
   <li><a href="#">注册</a></li>
  </ul>
 </p>
 <img src="img/logo.png" alt="" id="logo">
 <p class="baidu_box">
  <input type="text" name="" value=" " id="seek">
  <img src="img/xj.png" alt="" class="icon">
  <p id="baidu">百度一下</p>
  <ul>
   <p>十九大后 习大大反腐不歇脚</p>
   <p>张一山杨紫互怼</p>
   <p>土耳其客机被吊起</p>
  </ul>
 </p>
 <ul class="buttom">
  <li><a href="#">把百度设为首页</a></li>
  <li><a href="#">关于百度</a></li>
  <li><a href="#">About Baidu</a></li>
  <li><a href="#">百度推广</a></li>
 </ul>
 <script type="text/javascript" src=&#39;js/index.js&#39;></script>
 <script>
  setInterval('dates()',1000)　　//定时器，每1秒调用下函数
 </script>
</body>
</html>

로그인 후 복사

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;x++){ //将数组中的东西放入到我们的搜索框下菜单中
  if((seekArray[x] != undefined)){  //判断用户上次搜索的东西，假如为空就不显示
   p[x].innerHTML = seekArray[x];
  }
 }
}
//搜索框获焦/失焦的状态
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){  //当在input框中敲回车的时候
  baiDu();    //触发baiDu()
 }
}
//点击用户搜索过的新闻搜索框直接显示
for(var x of p){
 x.onmouseover = look ; //遍历所有的li并且给每个li添加鼠标悬浮事件
}
function look(){
 seek.value = this.innerHTML;
}
//获取当前时间
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;
}
//点击换背景
var bg = document.getElementById('bg');//获取id为dg的标签
bg.onclick = function bgImg(){   //给他添加点击事件
 var bo = document.getElementById('bo');  //获取body
 var i = parseInt(Math.random()*7);   //写个随机数字
 bo.setAttribute("style","background:url('img/bj"+(i+1)+".jpg') no-repeat;background-size:100% 100%");//更改他的样式
}

로그인 후 복사

이 글을 읽으셨다고 생각합니다. 사례 방법을 마스터하셨으니 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 읽어보세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7530

Cakephp 튜토리얼

1379

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

2개월 만에 휴머노이드 로봇 '워커S' 옷 개기 가능 Apr 03, 2024 am 08:01 AM

기계력 보고서 편집자: 우신(Wu Xin) 국내판 휴머노이드 로봇+대형 모델팀이 옷 접기 등 복잡하고 유연한 재료의 작업 작업을 처음으로 완료했습니다. OpenAI 멀티모달 대형 모델을 접목한 Figure01이 공개되면서 국내 동종업체들의 관련 진전이 주목받고 있다. 바로 어제, 중국의 "1위 휴머노이드 로봇 주식"인 UBTECH는 Baidu Wenxin의 대형 모델과 긴밀하게 통합되어 몇 가지 흥미로운 새로운 기능을 보여주는 휴머노이드 로봇 WalkerS의 첫 번째 데모를 출시했습니다. 이제 Baidu Wenxin의 대형 모델 역량을 활용한 WalkerS의 모습은 이렇습니다. Figure01과 마찬가지로 WalkerS는 움직이지 않고 책상 뒤에 서서 일련의 작업을 완료합니다. 인간의 명령을 따르고 옷을 접을 수 있습니다.

DeepSeek 웹 버전 입구 DeepSeek 공식 웹 사이트 입구 Feb 19, 2025 pm 04:54 PM

DeepSeek은 웹 버전과 공식 웹 사이트의 두 가지 액세스 방법을 제공하는 강력한 지능형 검색 및 분석 도구입니다. 웹 버전은 편리하고 효율적이며 설치없이 사용할 수 있습니다. 개인이든 회사 사용자이든, DeepSeek를 통해 대규모 데이터를 쉽게 얻고 분석하여 업무 효율성을 향상시키고 의사 결정을 지원하며 혁신을 촉진 할 수 있습니다.

Baidu Xiyang Shells 획득 방법 소개 Mar 28, 2024 am 09:11 AM

시랑에는 포탄이 어디에 있는지, 어떻게 얻는지 모르는 사용자가 많습니다. 일부 플레이어는 몇 시간 동안 검색했지만 여전히 찾을 수 없습니다. 아래에서 편집자가 바이두 시랑 포탄을 얻는 방법을 알려드리겠습니다. . 와서 보세요. Baidu Xirang Shell을 얻는 방법 1. 먼저 커뮤니티에 접속한 후 아래 사진의 위치로 와야 합니다. 2. 이곳에서 목적지를 선택하고 188층 입장을 선택하세요. 3. 188층에 입장하신 후 돌아다니시면 이런 안내가 나옵니다. I Got It을 클릭하시면 됩니다. 4. 껍데기의 위치는 찾기가 조금 어려울 수 있습니다. 188 엘리베이터 바로 뒤에는 껍데기라는 작은 빛나는 점이 있습니다. 5. 껍질을 집으려면 VR 컨트롤러를 사용해야 합니다. 껍질을 클릭하기만 하면 됩니다. 상환 방법 1. 먼저 페이지 오른쪽 상단에 있는 "설정" 아이콘을 클릭하고 "

바이두 아폴로, L4 자율주행을 지원하는 세계 최초 대형 모델 '아폴로 ADFM' 출시 Jun 04, 2024 pm 08:01 PM

5월 15일, Baidu Apollo는 우한 Baidu Carrot Auto Robot Zhixing Valley에서 Apollo Day 2024를 개최하여 지난 10년 동안 Baidu의 자율 주행 분야의 주요 발전을 종합적으로 시연하고 대형 모델을 기반으로 한 기술 도약과 승객 안전에 대한 새로운 정의를 가져왔습니다. 세계 최대 자율주행차 운영 네트워크 바이두는 사람이 운전하는 것보다 자율주행을 더 안전하게 만들었습니다. 덕분에 더 안전하고, 더 편안하고, 친환경적이고, 저탄소 여행 방식이 이상에서 현실로 바뀌고 있습니다. 바이두 그룹 부사장이자 지능형 운전 비즈니스 그룹 사장인 왕윤펑(Wang Yunpeng)은 현장에서 "자율주행차를 만드는 우리의 원래 의도는 더 나은 여행에 대한 사람들의 점점 커지는 갈망을 충족시키는 것입니다. 사람들의 만족은 우리의 원동력입니다. 왜냐하면 안전, 너무 아름다워요, 만나서 반가워요

Alibaba Cloud Disk에서 다른 사람의 리소스를 검색하는 방법 Mar 30, 2024 am 10:31 AM

널리 사용되는 저장 도구인 Alibaba Cloud Disk는 개인 리소스를 효율적으로 관리하는 데 도움이 될 뿐만 아니라 다양한 편리한 기능을 제공합니다. 많은 사용자들이 검색 시 클라우드 디스크 리소스를 찾을 수 없기 때문에 전체 디스크에 있는 모든 리소스를 검색하고 싶어할 수 있습니다. 따라서 아래에서는 이 사이트의 편집자가 이 질문에 대해 자세히 답변하고 구체적인 검색 방법을 공유합니다. 더 알고 싶으시다면 이 기사를 따라가서 자세히 알아보세요! Alibaba Cloud Disk에서 다른 사람의 리소스를 검색하는 방법 1. 먼저 Alibaba Cloud Disk의 폴더 디렉터리에서 리소스 파일의 특정 경로를 검색하여 해당 폴더를 찾습니다. 2. 그런 다음 파일 검색 기능을 사용하여 찾고자 하는 키워드를 입력하여 해당 파일 내용을 찾으십시오. 3. 그런 다음 링크를 다른 사람들과 공유하여 직접 찾고 다운로드합니다.

Baidu Robin Li는 팀을 이끌고 PetroChina를 방문하여 석유 및 가스 산업의 정보를 논의했습니다. May 07, 2024 pm 06:13 PM

7일 해당 사이트 소식에 따르면 지난 5월 6일 바이두 창업자이자 회장 겸 CEO인 로빈 리가 팀을 이끌고 베이징에 있는 중국국영석유공사(이하 '페트로차이나')를 방문해 중국 국영기업 이사들을 만났다. 중국국영석유공사(China National Petroleum Corporation) 회장 겸 당 서기 Dai Houliang이 회담을 가졌습니다. 양측은 협력을 강화하고 에너지 산업과 디지털 인텔리전스의 심층적 통합을 촉진하기 위해 심도 있는 교류를 가졌습니다. PetroChina는 디지털 China Petroleum Corporation의 건설을 가속화하고 Baidu Group과의 협력을 강화하며 에너지 산업과 디지털 인텔리전스의 심층적 통합을 촉진하고 국가 에너지 안보 보장에 더 큰 기여를 할 것입니다. 로빈 리(Robin Li)는 대형 모델이 보여주는 '지능적 출현'과 이해, 생성, 논리, 기억의 핵심 역량이 첨단 기술과 석유 및 가스 사업의 결합을 위한 더 넓은 상상력의 공간을 열었다고 말했습니다. 언제나

삼성전자 갤럭시S24 시리즈 휴대폰 '서치인서클(Search in Circle)' 중국판이 구글 검색을 지원할 것으로 알려졌다. Jun 01, 2024 am 09:54 AM

31일 뉴스에 따르면 블로거 @ibinguniverse는 오늘 삼성 갤럭시 S24 시리즈 휴대폰 중국 버전 '서치 인 서클(Search in Circle)'이 구글 검색을 지원한다는 소식을 전했습니다. 블로거는 구체적인 출시 시간을 공개하지 않았습니다. 삼성의 이전 소개에 따르면 삼성 갤럭시 S24 시리즈는 입력, 번역, 녹음, 메모, 카메라 등 AI 기반의 실용적인 기능과 높은 수준의 AI 기능을 탑재해 사용자에게 보다 편리하고 효율적인 종합 서비스를 제공한다. 경험. 해외 버전과 달리 삼성 갤럭시 S24 시리즈의 AI 기능은 대부분 바이두 등 국내 제조사에서 제공하고 있다. 이전에 보고된 Galaxy AI는 Baidu Wenxin 대형 모델의 여러 기능을 심층적으로 통합하여 최종 지원 통화 및 번역 기능은 물론 생성 AI가 제공하는 지능형 요약을 제공할 수 있습니다.

NetEase Cloud에서 주변 사람을 검색하는 방법_NetEase Cloud에서 주변 사람을 검색하는 방법 Mar 25, 2024 pm 02:41 PM

1. NetEase Cloud Music 앱을 열고 하단의 내를 클릭한 후 상단의 개인 정보 표시줄을 클릭하세요. 2. 다음을 클릭하세요. 3. 다음 페이지에서 페이지 하단의 [사용자 더보기]를 클릭하세요. 4. [주변사람]을 클릭하여 입장하세요. 참고: 이 문서에서는 Huawei mate40pro 휴대폰을 예로 들어 설명하며 EMUI11 시스템, NetEase Cloud Music V8.0.00 버전 및 기타 Android 휴대폰에 적합합니다.

See all articles

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제