ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は Baidu 検索ボックス効果を実装します
JavaScript は Baidu 検索ボックス効果を実装します
- PHPzオリジナル
- 2016-05-16 15:59:091465ブラウズ
この記事では主に Baidu 検索ボックスの効果を実現するための JavaScript を詳しく紹介します。興味のある方は参考にしてください。
今日、Baidu 検索ボックスを作成しました。 。
効果:
1. インターフェイスに入るときに、メソッドを自動的に呼び出して現在時刻を取得し、リアルタイムで時刻を更新します。
2. ページ先頭のスキン変更をクリックすると、背景画像が自動的に変更されます
3. 検索ボックスをクリックすると、ユーザーが最後に選択したコンテンツが自動的に表示されます検索対象、
4 .ユーザーが最後に検索したコンテンツ上にマウスを置くと、検索ボックスの内容がマウスでホバーしたコンテンツに変わります
5. Enter を押すと検索ボックスに、最後に入力したコンテンツに自動的に入力されます。このコンテンツが最後に入力したコンテンツと同じ場合は、表示されません。
6. Baidu ボタンをクリックして、コンテンツを自動的に入力します。最後の検索の内容としての検索ボックス
インターフェイス:
インターフェイス 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%");//更改他的样式
}
これはBaidu 検索ボックスに書きました。何かわからないことがあれば、以下にメッセージを残してください。
以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。全員が PHP 中国語 Web サイトを購読するようにします。
【おすすめ関連チュートリアル】
1. JavaScript ビデオチュートリアル
2. JavaScript オンラインマニュアル
3.ブートストラップ チュートリアル
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。