【DOM练习】百度历史搜索栏

最新推荐文章于 2024-09-04 20:18:34 发布

weixin_30782293

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhongyanzhiyan/p/8324420.html

版权

HTML：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>百度一下</title>
 6         <link rel="shortcut icon" type="image/x-icon" href="img/bitbug_favicon.ico" /> 
 7         <link rel="stylesheet" href="css/new_file.css" />
 8     </head>
 9     <body>
10         <div>
11             <center><img src="img/fq19lch55hgln85xom6ve85gejvkofd3.gif" /></center>
12             <span><input type="text" id="text" placeholder="邢坤的Cookies记录栏"><img src="img/1logo (3).png" id="logo"></span>
13             <button>百度一下</button>
14             <ul >
15                 <li></li>
16                 <li></li>
17                 <li></li>
18                 <li></li>
19                 <li></li>
20             </ul>
21         </div>
22         <script type="text/javascript" src="js/new_file.js" ></script>
23     </body>
24 </html>

CSS：

 1 *{margin: 0 auto;padding: 0px;list-style: none;}
 2 div{text-align: left;margin: 180px auto;width:605px;height: 100px;}
 3 button{width: 100px;height:42px;float: left;outline: none;background: #227DFF;border:0;color:#fff;letter-spacing:3px;text-align: center;}
 4 button:hover{cursor: pointer;}
 5 input{width: 460px;height: 40px;font-size:20px;background: #fff;outline: none;padding-left:5px;box-sizing:border-box;padding-right: 10px;border: 0;}
 6 ul{width: 500px;font-size:20px;;float: left ;}
 7 li{width:100%;background: #fff;box-sizing:border-box;overflow:hidden;padding-left: 6px;padding-top: 4px;padding-right: 200px;}
 8 li:hover{background: #DDDDDD;cursor: pointer;}
 9 .li{border: 1px solid #ddd;}
10 img{ width:400px ;height:200px;margin-bottom: 20px;}
11 #logo{width: 40px; height: 40px;float: right;}
12 #logo:hover{transform:rotateY(360deg);transition: 1s;}
13 span{width: 500px;height: 40px;background: #fff;border:solid 1px #227DFF;float: left ;}

JS：

  1             var btn=document.querySelector("button");
  2             var arr=document.querySelectorAll("li");
  3             var ul=document.querySelector("ul");
  4             var flag=1;
  5             panduan();
  6             getCookies();
  7             
  8             
  9             
 10             //，按钮被单击
 11 //            btn.οnclick=function (e){
 12 //                e.stopPropagation()
 13 //                e.cancelBubble
 14 //                var zhi=document.querySelector("input").value;
 15 //                if(zhi==""){return}
 16 //                if(flag<arr.length){
 17 //                    arr[flag].setAttribute("class","li");
 18 //                }
 19 //                
 20 //                for(var i=arr.length-1; i>=0;i--){
 21 //                    if(i==0){
 22 //                        arr[i].innerText=zhi;
 23 //                    }else{
 24 //                        arr[i].innerText=arr[i-1].innerText
 25 //                    }
 26 //                }
 27 //                panduan();
 28 //                flag++;    
 29 //            }
 30             
 31             
 32             
 33             //cookies版本，按钮被单击
 34             btn.οnclick=function (e){
 35                 e.stopPropagation()
 36                 e.cancelBubble
 37                 var zhi=document.querySelector("input").value;
 38                 if(zhi==""){return}
 39                 flag=(flag<=arr.length)?flag:1;    //三目
 40                 document.cookie=flag+"="+zhi;    //存入cookies
 41 
 42                 getCookies();        //拿到cookies
 43                 panduan();
 44                 flag++;
 45             }
 46             
 47             
 48             //拿到cookies
 49             function getCookies(){
 50                 var ck=document.cookie.split(";").reverse();
 51                 for(var b=1;b<ck.length;b++){
 52                     arr[b-1].innerText=ck[b].replace(/\d=/, "");
 53                 }
 54             }
 55             
 56             
 57             
 58             //模拟失焦li消失效果
 59             document.onclick = function(){
 60                 for(x of arr){
 61                     x.setAttribute("style","display: none;");
 62                 }
 63             }
 64             
 65             
 66             //阻止冒泡
 67             function MaoPao(e){
 68                 e.stopPropagation();
 69                 e.cancelBubble;
 70             }
 71             
 72             document.querySelector("input").οnclick=function(e){
 73                 MaoPao(e);
 74                 getCookies();
 75                 panduan();
 76             }
 77             ul.οnclick=function(e){
 78                 MaoPao(e);
 79             }
 80             for(x of arr){
 81                 x.οnclick=function(e){
 82                     MaoPao(e);
 83                 }
 84             }
 85             
 86             
 87             //历史记录框的样式判断
 88             function panduan(){
 89                 var arr=document.querySelectorAll("li");
 90                 for(x of arr){
 91                     if(x.innerHTML==""){
 92                         x.setAttribute("style","display: none;");
 93                     }else{
 94                         x.setAttribute("style","display: block;");
 95                         x.setAttribute("class","li");
 96                         x.setAttribute("onclick","danji(this)");
 97                     }
 98                 }
 99             }
100             
101             
102             //当用户选择历史记录时
103             function danji(ge){
104                 document.querySelector("input").value=ge.innerText;
105             }
106             
107 
108             
109             //按键监控
110             document.onkeyup = function (e) {
111                 var code = e.charCode || e.keyCode; 
112                 if (code == 13) {
113                     btn.click();
114                 }  
115             } 
116

转载于:https://www.cnblogs.com/zhongyanzhiyan/p/8324420.html

weixin_30782293

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【DOM练习】百度历史搜索栏

HTML： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>百度一下</title> 6 <link rel="shortcut i...
复制链接

扫一扫