This article mainly introduces the effect of JavaScript to realize Baidu search box in detail. It has certain reference value. Interested friends can refer to it.
I recently made a Baidu search box for you today. Share it.
Effect:
1. When entering the interface, the method is automatically called to obtain the current time and update the time in real time.
2. Click the skin change at the head of the page to automatically change the background image
3. When the mouse clicks on the search box, it will automatically display the content the user last searched for,
4 .When the mouse is placed on the content the user last searched for, the content of the search box changes to the content hovered by the mouse
5. When pressing Enter in the search box, it is automatically entered into the last entered content. , if this content is the same as the last content, it will not be displayed
6. Click the Baidu button to automatically enter the content in the search box as the last searched content
Interface:
Interface html code:
<!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="/static/imghwm/default1.png" data-src="img/logo.png" class="lazy" alt="" id="logo"> <p class="baidu_box"> <input type="text" name="" value=" " id="seek"> <img class="icon lazy" src="/static/imghwm/default1.png" data-src="img/xj.png" alt="" > <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 code:
*{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 code:
//百度搜索框
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%");//更改他的样式
}Related recommendations:
JavaScript implements real-time image preview function
The above is the detailed content of JavaScript implements Baidu search box effect. For more information, please follow other related articles on the PHP Chinese website!
JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AMThe power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.
The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AMIntroduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr
Node.js Streams with TypeScriptApr 30, 2025 am 08:22 AMNode.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe
Python vs. JavaScript: Performance and Efficiency ConsiderationsApr 30, 2025 am 12:08 AMThe differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.
The Origins of JavaScript: Exploring Its Implementation LanguageApr 29, 2025 am 12:51 AMJavaScript originated in 1995 and was created by Brandon Ike, and realized the language into C. 1.C language provides high performance and system-level programming capabilities for JavaScript. 2. JavaScript's memory management and performance optimization rely on C language. 3. The cross-platform feature of C language helps JavaScript run efficiently on different operating systems.
Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AMJavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.
The Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AMThe future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.
Python vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AMBoth Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Notepad++7.3.1
Easy-to-use and free code editor
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Dreamweaver CS6
Visual web development tools
