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;605px;height: 100px;} 3 button{ 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{ 460px;height: 40px;font-size:20px;background: #fff;outline: none;padding-left:5px;box-sizing:border-box;padding-right: 10px;border: 0;} 6 ul{ 500px;font-size:20px;;float: left ;} 7 li{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{ 400px ;height:200px;margin-bottom: 20px;} 11 #logo{ 40px; height: 40px;float: right;} 12 #logo:hover{transform:rotateY(360deg);transition: 1s;} 13 span{ 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.onclick=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.onclick=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").onclick=function(e){ 73 MaoPao(e); 74 getCookies(); 75 panduan(); 76 } 77 ul.onclick=function(e){ 78 MaoPao(e); 79 } 80 for(x of arr){ 81 x.onclick=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