【JavaScript_DOM 百度搜索框】
今天给大家带来的事一个简单的百度的历史搜索框,大家在搜索东西的时候,百度会自动给你显示你最近搜索过的一些东西,那这个拿js怎么做呢?
我们一起来学习吧
这是一个HTML页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="images/x-icon" href="favicon.ico">
<title>百度一下,你就知道</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<header>
<div class="hea_left">
<a href="#">太原:</a>
<a href="#"><img src="img/a1.png"/ class="weather"> 7℃</a>
<a href="#"><span class="gr">轻度</span></a>
<a href="#">105 |</a>
<a href="#" class="a1">换肤</a>
<a href="#" class="a1">消息提示</a>
<a href="#" class="a1">显示频道</a>
</div>
<div class="hea_rig">
<a href="#" class="a2">新闻</a>
<a href="#" class="a2">hao 123</a>
<a href="#" class="a2">地图</a>
<a href="#" class="a2">视频</a>
<a href="#" class="a2">贴吧</a>
<a href="#" class="a2">学术</a>
<a href="#" class="a2">登陆</a>
<a href="#" class="a2">设置</a>
<a href="#" class="a3">更多产品</a>
</div>
</header>
<div id="logo">
<img src="img/superlogo.png"/>
</div>
<div class="box">
<input type="text" name="" id="inp" value=""/>
<div class="xj"></div>
<button id="but" onclick="onclickBut()">百度一下</button>
<ul>
<li>中共十九届二中全会公报公布</li>
<li>特朗普就任一周年 美国联邦政府正式“关门”</li>
<li>医生拄着拐杖做手术:病人多医生少,能做就做</li>
</ul>
</div>
<div class="footer">
<a href="" class="foot_a">设为首页</a>
<span class="foot_text">@2018 Baidu</span>
<a href="" class="foot_a">使用百度前必读</a>
<a href="" class="foot_a">意见反馈</a>
<span class="foot_text">京ICP证030173号</span>
<img src="img/copy_rignt_24.png"/>
<br />
<img src="img/icon-police.png" class="beian"/><span class="foot_text">京公网安备11000002000001号</span>
</div>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
这是一个Css页面:
*{padding:;margin:;}
body,html{width: 100%;height: 100%;background: url(../img/12.jpg) no-repeat;background-size:100% 100%; overflow: hidden;}
a{text-decoration: none;color: #fff;}
header{width: 100%;height: 32px;background-color: rgba(15,25,50,.3);line-height: 32px;padding-left:10px;font-size: 14px;}
.hea_left{float: left;}
.hea_rig{float: right;}
.gr{color: #badc00;font-weight: bold;}
.a1{margin-left: 10px;text-decoration: underline;font-size: 12px;}
.a2{margin-right: 20px;text-decoration: underline;font-size: 14px;font-weight: bold;}
.a3{display: block;float: right;width: 100px;height: 32px;background: #398bfb;text-align: center;line-height: 32px;}
#logo{width: 350px;height: 148px;margin: 6% auto;margin-bottom:2%;}
#logo img{cursor: pointer;width: 100%;height: 100%;}
.box{width: 660px;height: 300px;margin: 0 auto;position: relative; }
.xj{cursor: pointer;width: 24px;height: 22px;position: absolute;right:140px;top: 10px;background: url(../img/pir.png);background-size: 100% 100%;}
.xj:hover{background: url(../img/xj.png);background-size: 100% 100%;}
#inp{box-sizing: border-box;width: 536px;height: 45px;border: none;text-indent: 1em;}
#but{width: 120px;height: 45px;background: url(../img/an_bg.jpg) no-repeat;background-size: 100% 100%;border: none;margin-left:-4px;margin-top:-4px ;cursor:pointer;}
#but:focus{background: url(../img/an1_bg.jpg) no-repeat;background-size: 100% 100%;}
ul{width: 536px;background: #fff;display: none;}
li{list-style: none;line-height: 40px;text-indent: 1em;}
li:hover{background: #eee;cursor: pointer;}
.footer{width:100%;text-align: center;}
.foot_a{margin-right: 4px;text-decoration: underline;font-size: 12px;}
.foot_text{color: #fff;font-size: 12px;}
.beian{display: inline-block;margin-right: 6px;vertical-align: middle;}
最后就是js的代码了 ,方法有很多哦
//方法1
var but = document.getElementById("but"); //获取button百度按钮框
var arr = document.getElementsByTagName('li'); //获取要显示的li
var inp = document.getElementById("inp"); //获要输入的内容的input
var ul = document.getElementsByTagName('ul')[0]; //获取ul
function onclickBut(){ //
for (var i=2;i>=0;i--){
if(i==0){
arr[i].innerHTML=inp.value;
}else{
arr[i].innerHTML=arr[i-1].innerHTML;
}
}
//将百度作为连接,传入value的内容,并跳入新的页面
window.location.href ="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+inp.value;
} //input和button聚焦和失焦的状态
inp.onfocus = but.onfocus = function(){
ul.style.display = 'block';
}
inp.onblur = but.onblur = function(){
ul.style.display = 'none';
}
//在input框中回车时
inp.onkeydown = function(Ent){
if(Ent.keyCode == 13){
onclickBut();
}
}
//点击输入过的value内容直接在input框显示
for(var x of arr){
x.onmousedown = look ;
}
function look(){
inp.value = this.innerHTML;
} //数组
// var a = new Array();
// var but = document.getElementById("but");
// var inp = document.getElementById("inp");
// var lis = document.getElementsByTagName('li');
//
// but.onfocus = function(){
// var inps = inp.value;
// a.unshift(inps);
// a.length = 3;
// console.log(a);
// for(i=0;i<a.length;i++){
// if(a[i]!=undefined)
// lis[i].innerHTML = a[i];
// }
// }
我只是简略的写了一些,如果你有更好的方法记得我们一起探讨哦~~~
另外,以上代码如果哪里我bug随时欢迎帮我指正,谢谢
【JavaScript_DOM 百度搜索框】的更多相关文章
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
- JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- React实现最完整的百度搜索框
import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决
--------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...
- JS---DOM---案例:模拟百度搜索框
模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...
- js实现百度搜索框滑动固定顶部
现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...
- typecho博客组插件:openSug.js百度搜索框下拉提示免费代码
Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...
随机推荐
- 数据分析与展示——Pandas数据特征分析
Pandas数据特征分析 数据的排序 将一组数据通过摘要(有损地提取数据特征的过程)的方式,可以获得基本统计(含排序).分布/累计统计.数据特征(相关性.周期性等).数据挖掘(形成知识). .sort ...
- Python学习日记:day4
列表 li=['alex',[1,2,3] ,'wusir','egon','女神','taibai']#列表 l1 = li[0] print(l1)#alex l2 = li[1] print ( ...
- Spark源码剖析(一):如何将spark源码导入到IDEA中
由于近期准备深入研究一下Spark的核心源码,所以开了这一系列用来记录自己研究spark源码的过程! 想要读源码,那么第一步肯定导入spark源码啦(笔者使用的是IntelliJ IDEA),在网上找 ...
- 【Zookeeper】源码分析之服务器(三)之LeaderZooKeeperServer
一.前言 前面分析了ZooKeeperServer源码,由于QuorumZooKeeperServer的源码相对简单,于是直接分析LeaderZooKeeperServer. 二.LeaderZooK ...
- Python的HTTP服务实例
1.前言 今天需要实现一个Pyhton的http服务,与Web的JS进行交换. 2.实例代码 支持HEAD.GET.POST方法,将参数转换为JSON格式,返回结果以JSON字符串返回. import ...
- 转:Siri之父:语音交互或将主导未来十年发展
http://zhinengjiaohu.juhangye.com/201709/weixin_5664458.html Siri之父Adam Cheyer认为,语音交互很可能是未来十年内计算技术的一 ...
- 历年NOIP选题题解汇总
联赛前上vijos板刷往年联赛题,使用在线编辑编写代码,祝我rp++. 废话不多说,挑比较有意思的记一下. 题目是按照年份排序的,最早只到了03年. 有些题目因为 我还没写/很早之前写的忘了 所以就没 ...
- bzoj 3675: [Apio2014]序列分割
Description 小H最近迷上了一个分隔序列的游戏.在这个游戏里,小H需要将一个长度为n的非负整数序列分割成k+1个非空的子序列.为了得到k+1个子序列,小H需要重复k次以下的步骤: 1.小H首 ...
- java实现发送邮件服务器,SMTP协议发送邮件
1.采用SMTP的邮件发送协议.准备:在网易注册一个邮箱,进入设置开启SMTP/pop3协议 2.接下来就是java代码实现了,下面都有注释,就不多做解释了. public class mail { ...
- 《MYSQL》----字符串的复杂函数,检索的七-天-排-重
接到了一个新的需求,拿到需求的时候瞬间有点头大,因为实在是有些棘手. 我们这个系统本身是个接口系统,总接口数大概在200个左右.外部会有很多用户在 不同的时间拿着不同参数去调我们的这些接口,用户的调集 ...