Comment utiliser JS pour implémenter le champ de recherche Baidu
Cette fois, je vais vous montrer comment utiliser JS pour implémenter le champ de recherche Baidu. Quelles sont les précautions pour utiliser JS pour implémenter le champ de recherche Baidu. Ce qui suit est un cas pratique, prenons un. regarder.
Effet :
1. Lorsque vous entrez dans l'interface, appelez automatiquement la méthode pour obtenir l'heure actuelle et mettre à jour l'heure en temps réel.
2. Cliquez sur le changement de skin en tête de page pour changer automatiquement l'image d'arrière-plan
3. Lorsque la souris clique sur le champ de recherche, elle affichera automatiquement le dernier contenu de l'utilisateur recherché,
4. Lorsque la souris est placée sur le contenu recherché pour la dernière fois par l'utilisateur, le contenu du champ de recherche devient le contenu survolé par la souris
5. Lorsque vous appuyez sur Entrée dans le champ de recherche, il est automatiquement saisi dans le dernier contenu saisi, si le contenu cette fois est le même que le dernier contenu, il ne sera pas affiché
6. Cliquez sur le bouton Baidu pour saisir automatiquement le contenu dans le champ de recherche comme contenu de la dernière recherche
Interface :
Code html de l'interface :
<!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>code 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;}code 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%");//更改他的样式
}Croyez-le ou non Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez faire attention aux autres. articles connexes sur le site Web PHP chinois !
Lecture recommandée :
Comment utiliser vue pour enregistrer des composants
Un résumé de la façon d'utiliser les attributs data-* en H5
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Après 2 mois, le robot humanoïde Walker S peut plier les vêtements
Apr 03, 2024 am 08:01 AM
Rédacteur en chef du Machine Power Report : Wu Xin La version domestique de l'équipe robot humanoïde + grand modèle a accompli pour la première fois la tâche d'exploitation de matériaux flexibles complexes tels que le pliage de vêtements. Avec le dévoilement de Figure01, qui intègre le grand modèle multimodal d'OpenAI, les progrès connexes des pairs nationaux ont attiré l'attention. Hier encore, UBTECH, le « stock numéro un de robots humanoïdes » en Chine, a publié la première démo du robot humanoïde WalkerS, profondément intégré au grand modèle de Baidu Wenxin, présentant de nouvelles fonctionnalités intéressantes. Maintenant, WalkerS, bénéficiant des capacités de grands modèles de Baidu Wenxin, ressemble à ceci. Comme la figure 01, WalkerS ne se déplace pas, mais se tient derrière un bureau pour accomplir une série de tâches. Il peut suivre les commandes humaines et plier les vêtements
Baidu Apollo lance Apollo ADFM, le premier grand modèle au monde prenant en charge la conduite autonome L4
Jun 04, 2024 pm 08:01 PM
Le 15 mai, Baidu Apollo a organisé l'Apollo Day 2024 dans la vallée du robot automobile Baidu Luobo de Wuhan, démontrant de manière exhaustive les progrès majeurs de Baidu en matière de conduite autonome au cours des dix dernières années, apportant des avancées technologiques basées sur de grands modèles et une nouvelle définition de la sécurité des passagers. Plus grand réseau d'exploitation de véhicules autonomes au monde, Baidu a rendu la conduite autonome plus sûre que la conduite humaine. Grâce à cela, des modes de transport plus sûrs, plus confortables, plus écologiques et à faibles émissions de carbone passent d’un idéal à une réalité. Wang Yunpeng, vice-président du groupe Baidu et président de l'Intelligent Driving Business Group, a déclaré sur place : « Notre intention initiale de construire des véhicules autonomes est de satisfaire le désir croissant des gens de mieux voyager. Tellement beau, nous sommes heureux de voir
Introduction à la façon d'obtenir des coquillages Baidu Xiyang
Mar 28, 2024 am 09:11 AM
De nombreux utilisateurs à Xirang ne savent pas où se trouvent les obus et comment les obtenir. Certains joueurs recherchent depuis plusieurs heures mais ne parviennent toujours pas à les trouver. Ci-dessous, l'éditeur vous expliquera comment obtenir les obus Baidu Xirang. . Venez jeter un oeil. Comment obtenir Baidu Xirang Shell 1. Nous devons d’abord nous rendre dans la communauté, puis nous rendre à l’emplacement indiqué sur l’image ci-dessous. 2. Sélectionnez la destination ici et choisissez d'entrer au 188ème étage. 3. Après être entré au 188ème étage, vous verrez cette invite lorsque vous vous promenerez. Cliquez simplement sur J'ai compris. 4. L'emplacement de la coque peut être un peu difficile à trouver Juste derrière l'ascenseur 188, il y a un petit point lumineux qui représente la coque. 5. Vous devez utiliser un contrôleur VR pour récupérer les coquillages. Cliquez simplement sur le coquillage. Méthode de remboursement 1. Cliquez d'abord sur l'icône "Paramètres" dans le coin supérieur droit de la page et sélectionnez "
Entrée de la version Web Deepseek Entrée du site officiel Deepseek
Feb 19, 2025 pm 04:54 PM
Deepseek est un puissant outil de recherche et d'analyse intelligent qui fournit deux méthodes d'accès: la version Web et le site officiel. La version Web est pratique et efficace et peut être utilisée sans installation; Que ce soit des individus ou des utilisateurs d'entreprise, ils peuvent facilement obtenir et analyser des données massives via Deepseek pour améliorer l'efficacité du travail, aider la prise de décision et promouvoir l'innovation.
Comment rechercher les ressources d'autres personnes sur Alibaba Cloud Disk
Mar 30, 2024 am 10:31 AM
Alibaba Cloud Disk, cet outil de stockage populaire, nous aide non seulement à gérer efficacement les ressources personnelles, mais fournit également de nombreuses fonctions pratiques. De nombreux utilisateurs peuvent ne pas être en mesure de trouver les ressources du disque cloud lors de la recherche, ils souhaitent donc rechercher toutes les ressources sur l'ensemble du disque. Ci-dessous, l'éditeur de ce site répondra à cette question en détail et partagera la méthode de recherche spécifique des utilisateurs. voulez savoir, venez suivre cet article pour en savoir plus ! Comment rechercher les ressources d'autres personnes dans Alibaba Cloud Disk 1. Tout d'abord, recherchez le chemin spécifique du fichier de ressources dans le répertoire des dossiers d'Alibaba Cloud Disk pour trouver le dossier correspondant. 2. Utilisez ensuite la fonction de recherche de fichiers et saisissez les mots-clés que vous souhaitez rechercher pour trouver le contenu du fichier correspondant. 3. Ensuite, nous partageons le lien avec d'autres pour localiser et télécharger directement
Baidu Robin Li a dirigé une équipe pour visiter PetroChina pour discuter de l'intelligence de l'industrie pétrolière et gazière.
May 07, 2024 pm 06:13 PM
Selon les informations de ce site du 7 mai, le 6 mai, Robin Li, fondateur, président et PDG de Baidu, a dirigé une équipe pour visiter la China National Petroleum Corporation (ci-après dénommée « PetroChina ») à Pékin et a rencontré les directeurs de Le président de la China National Petroleum Corporation et le secrétaire du Parti, Dai Houliang, se sont entretenus. Les deux parties ont eu des échanges approfondis sur le renforcement de la coopération et la promotion de l'intégration profonde du secteur énergétique avec l'intelligence numérique. PetroChina accélérera la construction d'une China Petroleum Corporation numérique, renforcera la coopération avec le groupe Baidu, promouvra l'intégration approfondie du secteur de l'énergie avec l'intelligence numérique et contribuera davantage à assurer la sécurité énergétique nationale. Robin Li a déclaré que « l'émergence intelligente » et les capacités fondamentales de compréhension, de génération, de logique et de mémoire affichées par les grands modèles ont ouvert un espace d'imagination plus large pour la combinaison de la technologie de pointe et des activités pétrolières et gazières. Toujours
Il est rapporté que la version chinoise du téléphone mobile de la série Samsung Galaxy S24 « Search in Circle » prendra en charge la recherche Google.
Jun 01, 2024 am 09:54 AM
Selon les informations du 31 mai, le blogueur @ibinguniverse a annoncé aujourd'hui que la version chinoise du téléphone mobile de la série Samsung Galaxy S24 « Search in Circle » prendra en charge la recherche Google. Le blogueur n'a pas divulgué l'heure précise du lancement. Selon l'introduction précédente de Samsung, la série Samsung Galaxy S24 a été équipée de nombreuses capacités d'IA de haut niveau, de fonctions pratiques basées sur l'IA telles que la saisie, la traduction, l'enregistreur, les notes et les appareils photo, pour offrir aux utilisateurs une solution complète plus pratique et plus efficace. expérience. Contrairement à la version étrangère, la plupart des fonctions d'IA de la série Samsung Galaxy S24 sont fournies par des fabricants nationaux, tels que Baidu. Signalé précédemment, Galaxy AI intègre profondément plusieurs capacités du grand modèle Baidu Wenxin, qui peuvent fournir des fonctions d'appel et de traduction activées côté extrémité, ainsi qu'un résumé intelligent apporté par l'IA générative.
recommandation d'outil IA
Nov 29, 2024 am 11:08 AM
Cet article présente six outils d'IA populaires, notamment Douyin Doubao, Wenxin Yige, Tencent Zhiying, Baidu Feipiao EasyDL, Baidu AI Studio et iFlytek Spark Cognitive Large Model. Ces outils couvrent différentes fonctions telles que la création de texte, la génération d'images, le montage vidéo et le développement de modèles d'IA. Choisir le bon outil d’IA nécessite de prendre en compte des facteurs tels que les exigences fonctionnelles, le niveau technique et le budget. Ces outils offrent des solutions pratiques et efficaces aux particuliers et aux entreprises ayant besoin de l’assistance de l’IA.
