实例讲解JS如何实现百度搜索功能
本文主要和大家介绍js实现百度搜索功能，代码分为html部分和css折叠样式部分，具体实现代码大家参考下本文，希望能帮助到大家。
今天我们来用JS实现百度搜索功能，下面上代码：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--百度iocn图标-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" rel="external nofollow" type="image/x-icon"/>
<title>百度一下,你就知道</title>
<link rel="stylesheet" href="css/baidu.css" rel="external nofollow" />
<script src="js/H.js"></script>
</head>
<body onload="onloads(),randomBack()">
<p class="box">
<p class="box_log">
<p class="box_log_img">
<img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
</p>
</p>
<p class="box_text">
<p class="box_text_content">
<input type="text" name="text" id="text" value="" autofocus="autofocus"/>
<input type="button" name="bdyx" id="btn" value="百度一下" />
<ul id="search">
<li class="li1" id="0" onclick="iptShow(this.id)"></li>
<li class="li1" id="1" onclick="iptShow(this.id)"></li>
<li class="li1" id="2" onclick="iptShow(this.id)"></li>
<li class="li1" id="3" onclick="iptShow(this.id)"></li>
<li class="li1" id="4" onclick="iptShow(this.id)"></li>
<li class="li1" id="5" onclick="iptShow(this.id)"></li>
<li class="li1" id="6" onclick="iptShow(this.id)"></li>
<li class="li1" id="7" onclick="iptShow(this.id)"></li>
<li class="li1" id="8" onclick="iptShow(this.id)"></li>
<li class="li1" id="9" onclick="iptShow(this.id)"></li>
</ul>
</p>
</p>
</p>
<script type="text/javascript" src="js/index.js" ></script>
</body>
</html>CSS层叠样式部分：
body{/*清除浏览器自带样式*/
margin: 0;
padding: 0;
/*background-repeat: no-repeat;*/
min-width: 1200px;
}
.box{/*最大的盒子*/
width: 100%;
height: 100%;
/*background: yellow;*/
/*height: 636px;*/
}
.box_log{/*log盒子*/
width: 100%;
height: 250px;
text-align: center;
}
.box_log_img{
margin:0 auto;
width: 300px;
height: 150px;
}
.box_log img{
width: 300px;
height: 150px;
margin-top: 38px;
margin-bottom: 19px;
}
.box_text{/*text搜索框盒子大小*/
width: 100%;
height: 36px;
}
.box_text_content{
width: 640px;
height: 36px;
margin: 0 auto;
}
#text{ /*input框的样式*/
width: 540px;
height: 36px;
box-sizing: border-box;
margin-top: 3px;
text-indent: 4px;
outline: none;
}
.log_img{/*input框中的小相机*/
position: absolute;
left: 62%;
top: 35.5%;
}
#btn{ /*按钮的样式*/
width: 100px;
height: 36px;
background: #3385FF;
border: 0px;
letter-spacing: 1px;
color: white;
margin-left: -5px;
font-size: 15px;
box-sizing: border-box;
transform: translateY(1.5px);
box-sizing: border-box;
}
#btn:hover{ /*当按钮hover的样式*/
cursor: pointer;
}
#search{ /*搜索框的样式*/
width: 540px;
margin: 0;
padding: 0;
list-style: none;
display: none;
border: 1px solid #E3E5E4;
}
#search li{ /*搜索框li的大小颜色*/
line-height: 36px;
background: white;
}
#search li:hover{ /*当li hover的样式*/
background: #F0F0F0;
}
.li1{ /*li中的值缩进*/
text-indent: 4px;
}JS部分：
var otext = document.getElementById("text"); //获取input框
ose = document.querySelector("#search"); //通过类名选择器 选择到search框
lis = document.getElementsByClassName("li1"); //获取所有的li
otext.onkeyup = function(){ //当在input框中键盘弹起发生事件
ose.style.display = otext.value?"block":"none"; /*三目运算符,如果otext.value的值部位空,则block。*/
var osc = document.createElement("script"); /*创建一个script标签*/
osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";
/*srcipt的src值引入百度的url,然后将otext文本框中输入的内容连接到url,在后面在运行自己的方法*/
document.body.appendChild(osc);
/*将创建好的script标签元素放入body中*/
/*input框中按下回车根据input的值跳转页面*/
if(event.keyCode==13){
/*将百度作为连接,传入input的值,并跳入新的页面*/
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
}
}
var count = 0;
var search = 0;
var arr = ose.children; /*获取ose下的所有li*/
function houxiaowei(json){
var jsonLength = 0; /*json长度的初始值*/
// console.log(json.s);
for(var x in json.s){ /*将循环的次数变成json的长度*/
jsonLength++;
}
// console.log(jsonLength);
for(var i=0;i<lis.length;i++){
if(jsonLength==0){ /*如果遍历出的长度等于0,li的值为空*/
arr[i].innerHTML = null;
}else{
if(json.s[i]!=null){/*如果json[i]的值不等于空,则将它的值放入li中*/
arr[i].innerHTML = json.s[i];
}
}
}
if(count==lis.length-1){
count=0;
search=0;
}
count++;
search++;
}
/*单击li中的值显示在input框中*/
function iptShow(thisId){
otext.value = arr[thisId].innerHTML;
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
}
otext.onclick = function(e){
ose.style.display = "block";
var e = event || window.event;
e.stopPropagation(); //阻止冒泡事件,除了IE8及以下不兼容,其他浏览器都兼容
e.cancelBubble=true; //阻止冒泡事件,IE8及以下兼容
// alert(e);
}
/*单击body中的任意地方隐藏li*/
document.body.onclick = function(){
ose.style.display = "none";
}
/*单击百度btn的时候触发,并跳到新的连接*/
var btn = document.querySelector("#btn");
cookies = [];
btn.onclick = function(){
/*获取当前input的值*/
var otext = document.getElementById("text").value;
/*将百度作为连接,传入input的值,并跳入新的页面*/
if(otext=="" || otext==null){
window.location.href = "http://127.0.0.1:8020/%E7%99%BE%E5%BA%A6/%E7%99%BE%E5%BA%A6%E9%A6%96%E9%A1%B5.html?__hbt=1516599867084";
}else{
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext
}
}
/*加载页面input为空*/
function onloads(){
var s = otext.value = null;
$myId("text").focus();
}
function randomBack(){
var randomBk = parseInt(Math.random()*545);
document.body.style.background = "url(https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/"+randomBk+".jpg?2)";
document.body.style.backgroundSize = "100%";
}‘“搜索功能的实现源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，这个链接,其中”wd”的值为input框中需要搜索的值,它会返回一个json对象。&cb的值是一个方法或者是函数，它用来将json中的值提取出来放入li中。
相关推荐：
Atas ialah kandungan terperinci 实例讲解JS如何实现百度搜索功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1675
14
1429
52
1333
25
1278
29
1257
24
2 bulan kemudian, robot humanoid Walker S boleh melipat pakaian
Apr 03, 2024 am 08:01 AM
Editor Laporan Kuasa Mesin: Wu Xin Versi domestik robot humanoid + pasukan model besar menyelesaikan tugas operasi bahan fleksibel yang kompleks seperti melipat pakaian buat kali pertama. Dengan pelancaran Figure01, yang mengintegrasikan model besar berbilang modal OpenAI, kemajuan berkaitan rakan domestik telah menarik perhatian. Baru semalam, UBTECH, "stok robot humanoid nombor satu" China, mengeluarkan demo pertama robot humanoid WalkerS yang disepadukan secara mendalam dengan model besar Baidu Wenxin, menunjukkan beberapa ciri baharu yang menarik. Kini, WalkerS, diberkati oleh keupayaan model besar Baidu Wenxin, kelihatan seperti ini. Seperti Rajah01, WalkerS tidak bergerak, tetapi berdiri di belakang meja untuk menyelesaikan satu siri tugasan. Ia boleh mengikut perintah manusia dan melipat pakaian
Baidu Apollo mengeluarkan Apollo ADFM, model besar pertama di dunia yang menyokong pemanduan autonomi L4
Jun 04, 2024 pm 08:01 PM
Pada 15 Mei, Baidu Apollo mengadakan Hari Apollo 2024 di Wuhan Baidu Carrot Auto Robot Zhixing Valley, secara menyeluruh menunjukkan kemajuan utama Baidu dalam pemanduan autonomi sepanjang sepuluh tahun yang lalu, membawa lonjakan teknologi berdasarkan model besar dan definisi baharu keselamatan penumpang rangkaian operasi kenderaan autonomi terbesar di dunia, Baidu telah menjadikan pemanduan autonomi lebih selamat daripada pemanduan manusia. Terima kasih kepada ini, kaedah perjalanan yang lebih selamat, lebih selesa, hijau dan rendah karbon bertukar daripada ideal kepada realiti. Wang Yunpeng, naib presiden Kumpulan Baidu dan presiden Kumpulan Perniagaan Pemanduan Pintar, berkata di tempat kejadian: "Niat asal kami membina kenderaan autonomi adalah untuk memuaskan keinginan orang ramai untuk perjalanan yang lebih baik. Kepuasan orang ramai adalah penggerak kami. Kerana keselamatan, Begitu cantik, kami gembira melihat
Baidu Robin Li mengetuai pasukan melawat PetroChina untuk membincangkan perisikan industri minyak dan gas
May 07, 2024 pm 06:13 PM
Menurut berita dari laman web ini pada 7 Mei, pada 6 Mei, Robin Li, pengasas, pengerusi dan Ketua Pegawai Eksekutif Baidu, mengetuai pasukan untuk melawat China National Petroleum Corporation (selepas ini dirujuk sebagai "PetroChina") di Beijing dan bertemu dengan pengarah Pengerusi Perbadanan Petroleum Nasional China dan Setiausaha Parti Dai Houliang mengadakan perbincangan. Kedua-dua pihak mengadakan pertukaran mendalam mengenai pengukuhan kerjasama dan menggalakkan integrasi mendalam industri tenaga dengan kecerdasan digital. PetroChina akan mempercepatkan pembinaan Perbadanan Petroleum China digital, mengukuhkan kerjasama dengan Kumpulan Baidu, menggalakkan integrasi mendalam industri tenaga dengan kecerdasan digital, dan membuat sumbangan yang lebih besar untuk memastikan keselamatan tenaga negara. Robin Li berkata bahawa "kemunculan pintar" dan keupayaan teras pemahaman, penjanaan, logik, dan ingatan yang dipaparkan oleh model besar telah membuka ruang yang lebih luas untuk imaginasi untuk gabungan teknologi termaju dan perniagaan minyak dan gas. Sentiasa
DeepSeek Web Versi Pintu Masuk Laman Web Rasmi DeepSeek
Feb 19, 2025 pm 04:54 PM
DeepSeek adalah alat carian dan analisis pintar yang kuat yang menyediakan dua kaedah akses: versi web dan laman web rasmi. Versi web adalah mudah dan cekap, dan boleh digunakan tanpa pemasangan; Sama ada individu atau pengguna korporat, mereka dapat dengan mudah mendapatkan dan menganalisis data besar-besaran melalui DeepSeek untuk meningkatkan kecekapan kerja, membantu membuat keputusan dan menggalakkan inovasi.
Dilaporkan bahawa telefon mudah alih Samsung Galaxy S24 siri versi Cina 'Cari dalam Bulatan' akan menyokong carian Google
Jun 01, 2024 am 09:54 AM
Menurut berita pada 31 Mei, blogger @ibinguniverse mengumumkan hari ini bahawa telefon bimbit siri Samsung Galaxy S24 versi Cina "Cari dalam Bulatan" akan menyokong carian Google. Blogger tidak mendedahkan masa pelancaran tertentu. Menurut pengenalan Samsung sebelum ini, siri Samsung Galaxy S24 telah dilengkapi dengan banyak keupayaan AI peringkat tinggi, fungsi praktikal berasaskan AI seperti input, terjemahan, perakam, nota dan kamera, untuk menyediakan pengguna dengan komprehensif yang lebih mudah dan cekap. pengalaman. Berbeza daripada versi luar negara, kebanyakan fungsi AI bagi siri Samsung Galaxy S24 disediakan oleh pengeluar domestik, seperti Baidu. Sebelum ini dilaporkan, Galaxy AI menyepadukan dengan mendalam pelbagai keupayaan model besar Baidu Wenxin, yang boleh menyediakan fungsi panggilan dan terjemahan yang didayakan bahagian hujung, serta ringkasan pintar yang dibawa oleh AI generatif.
Pengenalan kepada cara mendapatkan Kerang Baidu Xiyang
Mar 28, 2024 am 09:11 AM
Terdapat ramai pengguna di Xirang yang tidak tahu di mana cengkerang berada dan cara mendapatkannya Beberapa pemain telah mencari selama beberapa jam tetapi masih tidak menemuinya Di bawah, editor akan membawa anda cara mendapatkan cengkerang Baidu Xirang Datang dan lihat. Bagaimana untuk mendapatkan Baidu Xirang Shell 1. Mula-mula kita perlu datang ke komuniti, dan kemudian datang ke lokasi dalam gambar di bawah. 2. Pilih destinasi di sini dan pilih untuk memasuki tingkat 188. 3. Selepas memasuki tingkat 188, anda akan melihat gesaan ini apabila berjalan-jalan. Hanya klik I Got It. 4. Lokasi cangkerang mungkin agak sukar dicari Di belakang lif 188, terdapat titik kecil bercahaya iaitu cangkerang. 5. Anda perlu menggunakan pengawal VR untuk mengambil cengkerang. Hanya klik pada cangkerang. Kaedah penebusan 1. Mula-mula klik ikon "Tetapan" di penjuru kanan sebelah atas halaman dan pilih "
Baidu Wenxin Big Model 4.0 Turbo terbuka kepada perusahaan, dengan pengurangan harga sebanyak 70% berbanding versi umum Wenxin Yiyan 4.0
Jul 11, 2024 pm 07:14 PM
Menurut berita dari laman web ini pada 5 Julai, Baidu mengeluarkan versi Wenxin Large Model 4.0 Turbo baharu di Persidangan Pembangun Pembelajaran Dalam WAVESUMMIT pada 28 Jun. Berbanding dengan model besar Wenxin versi 4.0, Turbo mempunyai kelajuan tindak balas yang lebih pantas dan keupayaan mendapatkan semula yang lebih kukuh. Pada Persidangan Kecerdasan Buatan Dunia 2024 hari ini, Naib Presiden Baidu Xie Guangjun berkata bahawa Wenxinyiyan 4.0 Turbo secara rasmi telah dibuka sepenuhnya kepada perusahaan Harganya ialah 0.03 yuan/ribu Token untuk input dan 0.06 yuan/ribu Token untuk output “Jika mengikut 3 : 1 Berdasarkan statistik panjang input dan output, pengurangan harga versi umum Wenxin Yiyan 4.0 ialah 70%. "Baidu berkata berdasarkan model besar asas yang berkuasa, model besar Wenxin terus mencipta inovasi.
cadangan alat ai
Nov 29, 2024 am 11:08 AM
Artikel ini memperkenalkan enam alatan AI yang popular, termasuk Douyin Doubao, Wenxin Yige, Tencent Zhiying, Baidu Feipiao EasyDL, Baidu AI Studio dan iFlytek Spark Cognitive Large Model. Alat ini merangkumi fungsi yang berbeza seperti penciptaan teks, penjanaan imej, penyuntingan video dan pembangunan model AI. Memilih alat AI yang betul memerlukan pertimbangan faktor seperti keperluan fungsi, tahap teknikal dan belanjawan kos. Alat ini menyediakan penyelesaian yang mudah dan cekap untuk individu dan perniagaan yang memerlukan bantuan AI.
