怎样使用JS实现百度搜索框
这次给大家带来怎样使用JS实现百度搜索框，使用JS实现百度搜索框的注意事项有哪些，下面就是实战案例，一起来看一下。
效果:
1.当进入界面时，自动调用方法，获取当前的时间，并且实时更新时间。
2.点击页面头部的换肤，自动更换背景图片
3.鼠标点击搜索框的时候自动显示用户上次搜索的内容，
4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上
5.在搜索框中按回车的时候自动录入为上次输入的内容中，若本次内容和上次内容相同则不显示
6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容
界面：
界面html代码：
<!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='js/index.js'></script>
<script>
setInterval('dates()',1000) //定时器，每1秒调用下函数
</script>
</body>
</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 (); //创建新数组;用来存放用户上一次搜索的问题
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中文网其它相关文章！
推荐阅读：
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
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
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 "
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.
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
Cara mencari sumber orang lain pada Cakera Awan Alibaba
Mar 30, 2024 am 10:31 AM
Cakera Awan Alibaba, alat storan popular ini, bukan sahaja membantu kami mengurus sumber peribadi dengan cekap, tetapi juga menyediakan banyak fungsi yang mudah. Ramai pengguna mungkin tidak dapat mencari sumber cakera awan semasa mencari, jadi mereka ingin mencari semua sumber dalam keseluruhan cakera Jadi di bawah, editor laman web ini akan menjawab soalan ini secara terperinci dan berkongsi kaedah carian tertentu ingin tahu, sila datang dan ikuti artikel ini untuk mengetahui lebih lanjut! Cara mencari sumber orang lain dalam Cakera Awan Alibaba 1. Mula-mula, cari laluan khusus fail sumber dalam direktori folder Cakera Awan Alibaba untuk mencari folder yang sepadan. 2. Kemudian gunakan fungsi carian fail dan masukkan kata kunci yang anda ingin cari untuk mencari kandungan fail yang berkaitan. 3. Kemudian kami berkongsi pautan dengan orang lain untuk terus mencari dan memuat turun
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.
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.
