script跨域之360搜索

時間 2019-12-09

標籤 script 搜索简体版

原文原文鏈接

思考：html

佈局：jquery

1，flex元素上下左右居中，內部元素橫向排列；web

div{
             /* 100vh = viewport height*/
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
        }

2，input輸入框與input type=「button」按鈕對齊，給屬性值vertical-align:top;json

3,input輸入框去除默認樣式 {border:none;outline:none;}app

js原理解析，理解註釋ide

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>模擬360搜索</title>
  6     <style>
  7 body{padding:0;margin:0;overflow:hidden;}
  8         ul,li{margin:0;padding:0;}
  9         ul{border:1px solid #ccc;border-top:0;width:522px;margin-left:-110px;}
 10         li{list-style:none;padding:5px;text-align:left;text-indent:10px;cursor:pointer;}
 11         .main{
 12              /* 100vh = viewport height*/
 13             display: flex;
 14             justify-content: center;
 15             align-items: center;
 16             flex-direction: row;
 17         }
 18         .skin-search-input{
 19             width:500px;
 20             background: #fff;
 21             height: 34px;
 22             padding: 4px 10px 4px 12px;
 23             vertical-align: top;
 24             border: 1px solid #ccc;
 25         }
 26         .keyword{
 27             background: #fff;
 28             border: none;
 29             color: #333;
 30             font-size: 16px;
 31             height: 30px;
 32             line-height: 30px\9;
 33             margin-top: 3px;
 34             outline: none;
 35             width:100%;
 36         }
 37         input[type=button]{
 38                                -webkit-appearance: none;
 39                                border: 0;
 40                                cursor: pointer;
 41                                font-size: 18px;
 42                                height: 44px;
 43                                outline: none;
 44                                vertical-align: top;
 45                                width: 110px;
 46                                background: #19b955;
 47                                color: #fff;
 48                            }
 49     </style>
 50     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
 51 </head>
 52 <body>
 53 
 54     <div class="main">
 55         <div class="skin-search-input">
 56             <input type="text" class="keyword">
 57         </div>
 58         <input type="button" value="搜一下">
 59     </div>
 60     <div align="center" class="message" style="display:none;">
 61         <ul>
 62         </ul>
 63     </div>
 64 
 65 <script>
 66     //若是頁面加載直接給li元素綁定事件，你是獲取不到li元素的。
 67     //解決方案，能夠用jq給咱們提供的事件委託
 68     $(".message>ul").on("mouseover","li",function () {
 69         this.style.background = "#efefef";
 70     });
 71     $(".message>ul").on("mouseout","li",function () {
 72         this.style.background = "white";
 73     });
 74 
 75     function getInfo(data) {//回調函數
 76 //解析數據，而後把message裏面的ul裏面的li元素的數據替換
 77         var results = data.result;
 78         var i;
 79         document.querySelector(".message>ul").innerHTML = "";
 80         for(i=0;i<results.length;i++){
 81             var li = document.createElement("li");
 82             li.innerHTML = results[i].word;
 83             console.log(li);
 84             document.querySelector(".message>ul").appendChild(li);
 85         }
 86     }
 87 
 88     //添加鍵盤事件
 89     document.querySelector(".keyword").onkeyup = function () {
 90         var keyword = this.value;
 91 
 92         //若是在輸入的時候有空格的話，這裏須要作判斷
 93         if(keyword.length>0){
 94             //我根據這個關鍵字去獲取數據，獲取到數據以後
 95             //加載到列表裏
 96             //顯示
 97             document.querySelector(".message").style.display = "block";
 98             //把關鍵字給360的這個搜索接口，讓它來給我結果
 99 
100             //使用script標籤去發送請求
101             var tag = document.createElement("script");
102             tag.src = "https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word="+keyword;
103             document.body.appendChild(tag);
104         }else{
105             document.querySelector(".message").style.display = "none";
106         }
107     }
108 </script>
109 </body>
110 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。