JS模拟百度搜索框和选项卡的实现
目录
- 练习1
- 练习2，选项卡，详细代码如下：
练习1
实现搜索框内，输入相关数字，在下方显示相关内容，模拟百度搜索，详细代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 600px;
height: 500px;
margin: 0 auto;
}
.show {
display: none;
width: 200px;
height: 300px;
border: solid 1px black;
}
</style>
</head>
<body>
<div class="content">
<div class="serach">
<input type="text" id="val" placeholder="请输入课程" style="width:200px; height:30px;">
<input type="submit" id="sub">
</div>
<div class="show" id="show"></div>
</div>
<script>
//以数组为例，可以连接数据库，进行查询数据
let arr = ['web前端精英特训班 980元', 'HTML核心技术 199元', 'CSS核心技术 299元', 'Vue核心技术 599元',
'CSS+HTML核心技术 299元', 'web前端在线商城 99元', 'JavaScript核心技术 399元', 'JavaScript高级技术 899元'];
//先完成，展示区域的显示与隐藏
let input = document.getElementById('val');
let show = document.getElementById('show');
input.onkeyup = function () {
//当键盘抬起时触发
show.style.display = 'block';
//input.value和arr的每一项进行匹配 用indexOf()：方法可返回某个指定的字符串值在字符串中首次出现的位置， 匹配到返回下标，匹配不到返回-1
let str = '';
arr.forEach((item) => {//forEach（）中第一个元素item，代表数组中的元素，每一项
let res = item.indexOf(input.value);
if (res != -1) {
str += '<p>' + item + '</p>';
}
})
//判断input.value为空或者str数组中没有，给用户一个提示
if (!input.value || !str) {
show.innerHTML = '<p>暂无结果</p>';
} else {
show.innerHTML = str;
}
}
input.onblur = function () {
//失去焦点隐藏
show.style.display = 'none';
input.value = '';
}
</script>
</body>
</html>
结果：
点击搜索框时：
练习2，选项卡，详细代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
width: 100px;
height: 40px;
background-color: #ccc;
border: 1px solid #ccc;
float: left;
line-height: 40px;
/*设置行高等于height高度文字会垂直居中显示*/
text-align: center;
}
div {
width: 406px;
height: 406px;
border: 1px solid #ccc;
}
img {
width: 406px;
height: 406px;
display: none;
}
</style>
</head>
<body>
<ul>
<li>大菊</li>
<li>英短</li>
<li>美短</li>
<li>布偶</li>
</ul>
<div>
<img src="images/15.jpg" alt="" style="display: block;">
<img src="images/16.jpg" alt="">
<img src="images/17.jpg" alt="">
<img src="images/18.jpg" alt="">
</div>
<script>
//1.移动到那个选项卡上边，背景颜色要改变，对用的内容区域要显示
//移出时背景颜色恢复，对应内容区域隐藏
let li = document.getElementsByTagName('li');
let img = document.getElementsByTagName('img');
for (let i = 0; i < li.length; i++) {
//先进性元素数组的下标的设置 在js中获取数组的下标用 .index
li[i].index = i;
//移入时的属性
li[i].onmousemove = function () {
li[i].style.backgroundColor = 'yellow';
//先把所有的图片进行隐藏，再让对应的图片出现
for (let j = 0; j < img.length; j++) {
img[j].style.display = 'none';
}
img[this.index].style.display = 'block';
}
//移出时恢复原来的颜色
li[i].onmouseout = function () {
li[i].style.backgroundColor = '#eee';
}
}
</script>
</body>
</html>
结果：
file:///C:/Users/DELL/Pictures/Screenshots/屏幕截图(15).jpg
点击第二个选项卡时：
到此这篇关于JS模拟百度搜索框和选项卡的实现的文章就介绍到这了,更多相关JS模拟百度搜索框和选项卡内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
自动完成的搜索框javascript实现
在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局. 界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮. <div class="search"> <input type="text" value=""
-
JS仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋",还有闪烁的光标.当用户点击输入的时候,灰色字消失.当用户清空文本框的所有内容的时候,灰色字自动恢复. 接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件. 判断用户输入的事件有 oninput 和onpropertychange .当然,想必你能想到,由于浏览器兼容的问题,他们出现的场合有所不同. 正常浏览器支持onin
-
javascript搜索框效果实现方法
本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co
-
JavaScript实现百度搜索框效果
最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容 界面: 界面html代码: <!DOCTYPE html> <
-
JS+Ajax实现百度智能搜索框
首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert
-
JS模拟百度搜索框和选项卡的实现
目录 练习1 练习2,选项卡,详细代码如下: 练习1 实现搜索框内,输入相关数字,在下方显示相关内容,模拟百度搜索,详细代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
-
使用 Vue.js 仿百度搜索框的实例代码
整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s
-
JS实现百度搜索框关键字推荐
本文实例为大家分享了JS实现百度搜索框关键字推荐的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; } #txt { width: 3
-
JS实现百度搜索框
本文实例为大家分享了JS实现百度搜索框的具体代码,供大家参考,具体内容如下 实现原理 向输入框动态输入时关键词,将当前关键词作为问号参数后面的值,因为要跨域使用百度的接口,所以通过 JSONP 跨域创建 Ajax 请求.回调函数处理返回值. 尝试研究了一下百度的接口,发现原生的 XHR 接口参数有点复杂(百度应该是考虑了很多情况). 找了一个 2345 导航,在输入框随便输入一个字母 s,打开 Network,发现它也是向百度的一个地址发送了请求,其中问号后面的'&wd=s'发送的就是此关键词,
-
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
本文实例讲述了JS实现模拟百度搜索"2012世界末日"网页地震撕裂效果代码.分享给大家供大家参考,具体如下: 这是一款JS模拟百度搜索"2012世界末日"网页地震撕裂效果,本效果是模仿用户在百度输入"2012世界末日"后点击搜索后出来的网页效果,网页在震动,像是地震了,而后开始撕裂,然后显示出相关的文字说明,很酷的效果,希望大家可以学习借鉴. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-
-
基于JavaScript实现百度搜索框效果
本文实例为大家分享了js实现百度搜索框展示效果的具体代码,供大家参考,具体内容如下 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } input{
-
基于Vue.js 2.0实现百度搜索框效果
使用Vue.js 2.0 模仿百度搜索框效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum
-
JS实现仿google、百度搜索框输入信息智能提示的实现方法
本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu
-
JSONP跨域模拟百度搜索
目录 一.什么是JSONP 二.JSONP跨域请求 三.模拟百度搜索 四.JSONP缺点 一.什么是JSONP JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,在后来的Web服务中非常流行,JSONP看起来与JSON差不多,只不过是被包含在函数中调用的JSON,就像下面这样: callback({"name": "王欢"}); SONP由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面
-
js模拟百度模糊搜索的实例
废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } input{ display:block; list-style:none; } html,body{ color:#0