【DOM练习】百度历史搜索栏
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度一下</title>
<link rel="shortcut icon" type="image/x-icon" href="img/bitbug_favicon.ico" />
<link rel="stylesheet" href="css/new_file.css" />
</head>
<body>
<div>
<center><img src="img/fq19lch55hgln85xom6ve85gejvkofd3.gif" /></center>
<span><input type="text" id="text" placeholder="邢坤的Cookies记录栏"><img src="img/1logo (3).png" id="logo"></span>
<button>百度一下</button>
<ul >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="js/new_file.js" ></script>
</body>
</html>
CSS：
*{margin: 0 auto;padding: 0px;list-style: none;}
div{text-align: left;margin: 180px auto;width:605px;height: 100px;}
button{width: 100px;height:42px;float: left;outline: none;background: #227DFF;border:0;color:#fff;letter-spacing:3px;text-align: center;}
button:hover{cursor: pointer;}
input{width: 460px;height: 40px;font-size:20px;background: #fff;outline: none;padding-left:5px;box-sizing:border-box;padding-right: 10px;border: 0;}
ul{width: 500px;font-size:20px;;float: left ;}
li{width:100%;background: #fff;box-sizing:border-box;overflow:hidden;padding-left: 6px;padding-top: 4px;padding-right: 200px;}
li:hover{background: #DDDDDD;cursor: pointer;}
.li{border: 1px solid #ddd;}
img{ width:400px ;height:200px;margin-bottom: 20px;}
#logo{width: 40px; height: 40px;float: right;}
#logo:hover{transform:rotateY(360deg);transition: 1s;}
span{width: 500px;height: 40px;background: #fff;border:solid 1px #227DFF;float: left ;}
JS：
var btn=document.querySelector("button");
var arr=document.querySelectorAll("li");
var ul=document.querySelector("ul");
var flag=1;
panduan();
getCookies();
//，按钮被单击
// btn.onclick=function (e){
// e.stopPropagation()
// e.cancelBubble
// var zhi=document.querySelector("input").value;
// if(zhi==""){return}
// if(flag<arr.length){
// arr[flag].setAttribute("class","li");
// }
//
// for(var i=arr.length-1; i>=0;i--){
// if(i==0){
// arr[i].innerText=zhi;
// }else{
// arr[i].innerText=arr[i-1].innerText
// }
// }
// panduan();
// flag++;
// }
//cookies版本，按钮被单击
btn.onclick=function (e){
e.stopPropagation()
e.cancelBubble
var zhi=document.querySelector("input").value;
if(zhi==""){return}
flag=(flag<=arr.length)?flag:1; //三目
document.cookie=flag+"="+zhi; //存入cookies
getCookies(); //拿到cookies
panduan();
flag++;
}
//拿到cookies
function getCookies(){
var ck=document.cookie.split(";").reverse();
for(var b=1;b<ck.length;b++){
arr[b-1].innerText=ck[b].replace(/\d=/, "");
}
}
//模拟失焦li消失效果
document.onclick = function(){
for(x of arr){
x.setAttribute("style","display: none;");
}
}
//阻止冒泡
function MaoPao(e){
e.stopPropagation();
e.cancelBubble;
}
document.querySelector("input").onclick=function(e){
MaoPao(e);
getCookies();
panduan();
}
ul.onclick=function(e){
MaoPao(e);
}
for(x of arr){
x.onclick=function(e){
MaoPao(e);
}
}
//历史记录框的样式判断
function panduan(){
var arr=document.querySelectorAll("li");
for(x of arr){
if(x.innerHTML==""){
x.setAttribute("style","display: none;");
}else{
x.setAttribute("style","display: block;");
x.setAttribute("class","li");
x.setAttribute("onclick","danji(this)");
}
}
}
//当用户选择历史记录时
function danji(ge){
document.querySelector("input").value=ge.innerText;
}
//按键监控
document.onkeyup = function (e) {
var code = e.charCode || e.keyCode;
if (code == 13) {
btn.click();
}
}
【DOM练习】百度历史搜索栏的更多相关文章
- 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
- js 函数声明方式以及javascript的历史
1.function xx(){} 2.匿名方式 window.onload=function(){dslfjdslfkjdslf}; 3.动态方式 var demo=new Function ...
- 在QTP中使用DOM
大家对DOM应该都不陌生,它在网页制作中有广泛的应用.如果我们想在QTP中使用DOM模型需要通过Page对象的Object属性来实现.注意,QTP11才有良好的DOM支持操作,这里用百度首页做例子. ...
- html5 的百度地图连接
在一些网站上,我们经常会看到一些地址会有一个图标的形式展现,当你点击的时候就会加载一个你点击区域的地图出来,很神奇的一个功能,在之前是没有这样功能的,都是直接写上地址,你要去的话自己找去吧,现在有了这 ...
- (2017.10.10) 我对 JavaScript 历史的认识
关于 JavaScript 的历史和来由相信学过 JavaScript 的小伙伴都能说出一二.我看过一些入门书籍第一章或者前言部分都有介绍,但是一直没捋清这段历史.今天通过两个问题,来加深我对 Jav ...
- 20155326刘美岑 Exp6 信息收集与漏洞扫描
20155326刘美岑 Exp6 信息收集与漏洞扫描 实验后回答的问题 (1)哪些组织负责DNS,IP的管理. 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地 ...
- JS开发HTML5游戏《神奇的六边形》（一）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
- Javascript系列之js简介
JavaScript是一种网络客户端脚本语言,javascript有三个组成部分: 1)核心(ECMAScript)---描述了语言的基本语法和对象 2)文档对象模型(DOM)---描述了处理网页内容 ...
- 【Web探索之旅】第四部分：Web程序员
内容简介 1.第四部分第一课:什么是Web程序员? 2.第四部分第二课:如何成为Web程序员? 3.第四部分第三课:成为优秀Web程序员的秘诀 第四部分:Web程序员(完结篇) 大家好.终于来到了[W ...
随机推荐
- BOM 浏览器对象模型_window.navigator
window.navigator 对象 包含浏览器和系统信息的 Navigator 对象. 通过这个属性 了解用户的环境信息 window.navigator.userAgent 返回浏览器的 Use ...
- Servlet 参数
1.应用参数,在web.xml配置,所有Servlet共用 <context-param> <param-name>driver</param-name> < ...
- 添加spring-boot-devtools热部署报错
使用的eclipse部署的spring boot,百度了下,大部分的问题都是说IDE工具使用热部署无法成功的解决方案,看了很懵逼 <!-- 热部署模块 --> <dependency ...
- 终于明白了 C# 中 Task.Yield 的用途
最近在阅读 .NET Threadpool starvation, and how queuing makes it worse 这篇博文时发现文中代码中的一种 Task 用法之前从未见过,在网上看了 ...
- java_爬虫_从腾讯视频播放界面爬取视频真实地址
由于想在微信公众号里爬一点儿考研的视频 花了差不多一天的时间把这个爬虫做好(其实也不算爬虫吧,就算个能批量处理的地址解析器,半个爬虫) 不多说,进正题 (本文适合有java基础的同学,没基础的用客户端 ...
- mysql中各种日期数据类型及其所占用的空间
DATETIME,8字节: DATE,3字节: TIMESTAMP,4字节: YEAR,1字节: TIME,3字节:
- centos下设置nodejs开机启动
node环境的安装便不再赘述了,网上有很多教程,也非常简单. 上一篇博客介绍了用nginx代理nodejs.这一篇是使用pm2实现nodejs的自动重启. 什么是pm2? 如官网介绍的,pm2是nod ...
- 【转】tars源码漫谈第1篇------tc_loki.h (牛逼哄哄的loki库)
loki库是C++模板大牛Andrei写的, 里面大量运用模板的特性, 而tc_loki.h借用了loki库的部分代码, 形成了一个基本的文件tc_loki.h, 来看看: #ifndef __TC_ ...
- 匹配字符串中的s开头的单词，并替换
String s="now it's sping,but today is so cold!"; String a=s.replaceAll("s\\w+",& ...
- nodejs启动web项目
1.在根目录路径下输入 npm install ,会自动下载所需的包 2.安装完成对应的包以后,npm start,会自动打开浏览器