【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 ...
随机推荐
- C# - 什么是事件绑定？
今天在学习C#时碰到了一个新词:“绑定事件”,不知道是什么东西? 请各位C#前辈指点!!!
- Telephone Lines [POJ3662] [二分答案]
Description Farmer John打算将电话线引到自己的农场,但电信公司并不打算为他提供免费服务.于是,FJ必须为此向电信公司支付一定的费用. FJ的农场周围分布着N(1 <= N ...
- 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第5章编程练习7
#include <iostream>#include <cstring>const MAXSIZE=100;using namespace std;int main (){ ...
- [LeetCode] Card Flipping Game 翻卡片游戏
On a table are N cards, with a positive integer printed on the front and back of each card (possibly ...
- [Codeforces Round #438][Codeforces 868C. Qualification Rounds]
题目链接:868C - Qualification Rounds 题目大意:有\(n\)个题目,\(k\)个人,每个人可能做过这\(n\)个题里的若干道,出题方要在这\(n\)个题目里选若干个出来作为 ...
- 变量类型-Dict
教程:一:字典的创建 1:字典的介绍------>d = {key1:value1, key2:values2} (1)dictionary(字典) 是 Python 中最有用的数 ...
- Python练手例子（5）
25.求1+2!+3!+...+20!的和. 程序分析:此程序只是把累加变成了累乘. #python3.7 n = 0 s = 0 t = 1 for n in range(1, 21): t *= ...
- 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]
第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...
- 微信小程序采坑
wx.request() complete回调函数执行时机问题 代码执行顺序有时候会严重影响用户体验:比如项目中请求数据时显示loading的图标,请求完成后不管失败还是成功都要把loading图标隐 ...
- JAVA RPC (七) 手把手从零教你写一个生产级RPC之client请求
上节说了关于通用请求代理,实际上对spring的bean引用都是通过koalasClientProxy来实现的,那么在代理方法中才是我们实际的发送逻辑,咱们先看一下原生的thrift请求是什么样的. ...