Maison > Article > interface Web > Explication détaillée du cas d'implémentation de la fonction d'effet du champ de recherche JS Baidu
Explication détaillée du cas d'implémentation de la fonction d'effet du champ de recherche JS Baidu
- php中世界最好的语言original
- 2018-05-12 15:35:282758parcourir
Cette fois, je vais vous apporter une explication détaillée du cas d'implémentation de la fonction d'effet de boîte de recherche JS Baidu. Quelles sont les précautions pour l'implémentation de la fonction d'effet de boîte de recherche JS Baidu. jetons un coup d'oeil.
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 :
Explication détaillée de l'utilisation du routage imbriqué avec vue et de la redirection 404
Explication détaillée du modèle angulaire méthode de formulaire piloté
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript