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练习】百度历史搜索栏的更多相关文章

  1. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

  2. js 函数声明方式以及javascript的历史

    1.function  xx(){} 2.匿名方式   window.onload=function(){dslfjdslfkjdslf}; 3.动态方式  var demo=new Function ...

  3. 在QTP中使用DOM

    大家对DOM应该都不陌生,它在网页制作中有广泛的应用.如果我们想在QTP中使用DOM模型需要通过Page对象的Object属性来实现.注意,QTP11才有良好的DOM支持操作,这里用百度首页做例子. ...

  4. html5 的百度地图连接

    在一些网站上,我们经常会看到一些地址会有一个图标的形式展现,当你点击的时候就会加载一个你点击区域的地图出来,很神奇的一个功能,在之前是没有这样功能的,都是直接写上地址,你要去的话自己找去吧,现在有了这 ...

  5. (2017.10.10) 我对 JavaScript 历史的认识

    关于 JavaScript 的历史和来由相信学过 JavaScript 的小伙伴都能说出一二.我看过一些入门书籍第一章或者前言部分都有介绍,但是一直没捋清这段历史.今天通过两个问题,来加深我对 Jav ...

  6. 20155326刘美岑 Exp6 信息收集与漏洞扫描

    20155326刘美岑 Exp6 信息收集与漏洞扫描 实验后回答的问题 (1)哪些组织负责DNS,IP的管理. 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地 ...

  7. JS开发HTML5游戏《神奇的六边形》（一）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  8. Javascript系列之js简介

    JavaScript是一种网络客户端脚本语言,javascript有三个组成部分: 1)核心(ECMAScript)---描述了语言的基本语法和对象 2)文档对象模型(DOM)---描述了处理网页内容 ...

  9. 【Web探索之旅】第四部分：Web程序员

    内容简介 1.第四部分第一课:什么是Web程序员? 2.第四部分第二课:如何成为Web程序员? 3.第四部分第三课:成为优秀Web程序员的秘诀 第四部分:Web程序员(完结篇) 大家好.终于来到了[W ...

随机推荐

  1. S0.3 直方图

    目录 直方图(一) 直方图概念 直方图分类 直方图优点 直方图应用 opencv3直方图产生函数cvCalcHist() 画图函数 完整示例 直方图(一) 直方图概念 直方图是图像中像素强度分布的图形 ...

  2. jdk1.8.0_40 +maven+tomcat7.0+mysql8.0详细安装教程

    (一)  jdk的安装 1.下载jdk推荐下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213 ...

  3. css实现连续数字和英文的自动换行的方法

    1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:brea ...

  4. Eclipse导出自己的项目（仅供自己保留方式war包）

    War: Jar包:

  5. 配置 Tomcat 以服务方式自动运行

    接手一台用 Tomcat 跑着 Java Web 应用的 Linux CentOS 服务器,通过镜像的方式更换服务器后站点无法访问,发现是因为 Tomcat 不能在服务器启动后自动启动,于是基于 in ...

  6. CPU漏洞补丁KB4056892 卸载及忽略办法

    2018.1.4微软发布了针对intel CPU漏洞的补丁 KB4056892 性能降低不说, 针对一般平民根本没多大意义, 另外还会导致一些软件无法正常使用, (我是使用蓝叠经典版, 启动就会蓝屏) ...

  7. MongoDB Schema Design

    Normalization: ...... Relationships: One-to-One relationship: 1-to-many: many-to-many:

  8. Linux netfilter 学习笔记

    https://blog.csdn.net/lickylin/article/details/33321905

  9. yii的数据库相关操作

    获取某一列数据 self::find()->where(['pid'=>$this->id])->select('id')->column(); 更新操作 $model- ...

  10. pandas（二）

    层级索引: index=[('a',2010),('b',2011),('c',2010'),('a',2012),('e',2010),('f',2011)] age=[18,17,18,16,18 ...