【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 ...
随机推荐
- nohup & 及端口查看
ps -aux | grep processName | grep -v grep | awk '{print $2}' a:显示所有程序 u:以用户为主的格式来显示 x:显示所有程序,不以终端机来区 ...
- 一种常见的maven打包后同名文件冲突错误
在使用一些开源框架的时候(比如spark.hadoop.lucene等),偶尔会见到说找不到某个具体实现类或者某个配置(比如spark的akka配置)不见了. 部分例子如下: [Lucene]An S ...
- vue学习：安装及创建项目
1.先安装npm 参考链接:https://www.cnblogs.com/Hao-Killer/p/7235398.html 查看npm版本:在终端输入:npm -v 2.在安装vue # 安装vu ...
- React_生命周期
初始化 ReactDOM.render(jsx, 原生 DOM 对象): 组件类定义 static defaultProps = {} static propTypes = {} constructo ...
- [LeetCode] Number of Matching Subsequences 匹配的子序列的个数
Given string S and a dictionary of words words, find the number of words[i] that is a subsequence of ...
- 19.3.20 cmd操作：1.dir查看当前文件夹内的文件；2.alt+space+c关闭cmd窗口
cmd操作记录: 1.dir:查看当前文件夹内的所有文件: 2.alt+space+c:关闭打开的cmd窗口:
- LeetCode 871 - 最低加油次数 - [贪心+优先队列]
汽车从起点出发驶向目的地,该目的地位于出发位置东面 target 英里处. 沿途有加油站,每个 station[i] 代表一个加油站,它位于出发位置东面 station[i][0] 英里处,并且有 s ...
- Java 线程池比较
小结: 1. 高级面试题总结—线程池还能这么玩? - 这个时代,作为程序员可能要学习小程序 - CSDN博客https://blog.csdn.net/androidstarjack/article/ ...
- Win64/Linux 上PyMouse安装
目录 windows64安装Pymouse Linux安装 PyMouse ubuntu PyMouse用法 windows64安装Pymouse 只安装PyMouse,会提示缺少相应的组键. 找到安 ...
- LeetCode 653 Two Sum IV - Input is a BST 解题报告
题目要求 Given a Binary Search Tree and a target number, return true if there exist two elements in the ...