思考：

布局：

1，flex元素上下左右居中，内部元素横向排列；

div{

             /* 100vh = viewport height*/

            display: flex;

            justify-content: center;

            align-items: center;

            flex-direction: row;

        }

2，input输入框与input type=“button”按钮对齐，给属性值vertical-align:top;

3,input输入框去除默认样式 {border:none;outline:none;}

js原理解析，理解注释

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>模拟360搜索</title>

     <style>

 body{padding:0;margin:0;overflow:hidden;}

         ul,li{margin:0;padding:0;}

         ul{border:1px solid #ccc;border-top:0;width:522px;margin-left:-110px;}

         li{list-style:none;padding:5px;text-align:left;text-indent:10px;cursor:pointer;}

         .main{

              /* 100vh = viewport height*/

             display: flex;

             justify-content: center;

             align-items: center;

             flex-direction: row;

         }

         .skin-search-input{

             width:500px;

             background: #fff;

             height: 34px;

             padding: 4px 10px 4px 12px;

             vertical-align: top;

             border: 1px solid #ccc;

         }

         .keyword{

             background: #fff;

             border: none;

             color: #333;

             font-size: 16px;

             height: 30px;

             line-height: 30px\9;

             margin-top: 3px;

             outline: none;

             width:100%;

         }

         input[type=button]{

                                -webkit-appearance: none;

                                border: 0;

                                cursor: pointer;

                                font-size: 18px;

                                height: 44px;

                                outline: none;

                                vertical-align: top;

                                width: 110px;

                                background: #19b955;

                                color: #fff;

                            }

     </style>

     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

 </head>

 <body>

     <div class="main">

         <div class="skin-search-input">

             <input type="text" class="keyword">

         </div>

         <input type="button" value="搜一下">

     </div>

     <div align="center" class="message" style="display:none;">

         <ul>

         </ul>

     </div>

 <script>

     //如果页面加载直接给li元素绑定事件，你是获取不到li元素的。

     //解决方案，可以用jq给我们提供的事件委托

     $(".message>ul").on("mouseover","li",function () {

         this.style.background = "#efefef";

     });

     $(".message>ul").on("mouseout","li",function () {

         this.style.background = "white";

     });

     function getInfo(data) {//回调函数

 //解析数据，然后把message里面的ul里面的li元素的数据替换

         var results = data.result;

         var i;

         document.querySelector(".message>ul").innerHTML = "";

         for(i=0;i<results.length;i++){

             var li = document.createElement("li");

             li.innerHTML = results[i].word;

             console.log(li);

             document.querySelector(".message>ul").appendChild(li);

         }

     }

     //添加键盘事件

     document.querySelector(".keyword").onkeyup = function () {

         var keyword = this.value;

         //如果在输入的时候有空格的话，这里需要做判断

         if(keyword.length>0){

             //我根据这个关键字去获取数据，获取到数据之后

             //加载到列表里

             //显示

             document.querySelector(".message").style.display = "block";

             //把关键字给360的这个搜索接口，让它来给我结果

             //使用script标签去发送请求

             var tag = document.createElement("script");

             tag.src = "https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word="+keyword;

             document.body.appendChild(tag);

         }else{

             document.querySelector(".message").style.display = "none";

         }

     }

 </script>

 </body>

 </html>

script跨域之360搜索的更多相关文章

  1. jsonp跨域请求360数据乱码解决办法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. vue中的跨域问题

    https://segmentfault.com/a/1190000011072725(原文)   使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题 注(api很重 ...

  3. ajax 跨域的问题 用js绕过跨域

    之前遇到一个ajax跨域的问题,搜索了很多方法才找到解决方案,也怪自己  菜鸟一个 这些经验还是要慢慢来的 尤其是最近来回顾一下 竟然发现自己忘记了  所以还是把它记下来啊 免得到时候忘记 这个方法原 ...

  4. JS跨域

    //2011-7-25 (function(){ //闭包 function load_script(xyUrl, callback){ var head = document.getElements ...

  5. ajax跨域jsonp

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  6. jQuery的jsonp跨域是这么回事.

    实现跨域请求的有iframe,img,script中的src属性.那么jquery是如何解决跨域请求的呢? 一:项目jsonp2中有个app.js文件,代码如下: function app(json) ...

  7. jsonp跨域请求学习笔记

    前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.( ...

  8. ajax跨域请求学习笔记

    原文:ajax跨域请求学习笔记 前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可 ...

  9. sonp跨域请求

    sonp跨域请求学习笔记   前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以 ...

随机推荐

  1. GDI+学习笔记（九）带插件的排序算法演示器（MFC中的GDI+实例）

    带插件的排序算法演示器 请尊重本人的工作成果,转载请留言.并说明转载地址,谢谢. 地址例如以下: http://blog.csdn.net/fukainankai/article/details/27 ...

  2. Vue学习小结

    ES6 let完全可以取代var const声明一个只读的常量 箭头函数:可以绑定this对象,大大减少了显式绑定this对象的写法(call.apply.bind) 函数绑定(function bi ...

  3. 2013夏，iDempiere来了 - v1.0c Installers (Devina LTS Release) 2013-06-27

    怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ iDempiere来了 - v1.0c Installers (Devina LTS R ...

  4. Linux的定时器

    在服务端程序设计中,与时间有关的常见任务有: 获取当前时间,计算时间间隔: 定时操作,比如在预定的时间执行一项任务,或者在一段延时之后执行一项任务. Linux 时间函数 Linux 的计时函数,用于 ...

  5. 前端JS脚本将网页表格导出为Excel

    话不多说,上代码! <!DOCTYPE> <html> <head> <title>Excel Test</title> </head ...

  6. Android 混淆代码总结

    为了防止自己的劳动成果被别人窃取,混淆代码能有效防止被反编译,下面来总结以下混淆代码的步骤: 1. 大家也许都注意到新建一个工程会看到项目下边有这样proguard-project.txt一个文件,这 ...

  7. 每天进步一点点——Ganglia的Python扩展模块开发

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/39701245 注:本文涉及到的代码都在centos 6.5 64bit系统上通过验证,Gan ...

  8. Shell编程二

    告警系统需求分析 1.(虽然之前我们学习了zabbix,但有时候也不能满足我们的需求,比如比较冷门的监控项目需要写自定义脚本,或者服务器网络有问题,没有办法将客户端的数据发送到服务端.) 程序架构: ...

  9. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  10. 基于numpy的随机数构造

    class numpy.random.RandomState(seed=None) RandomState 是一个基于Mersenne Twister算法的伪随机数生成类 RandomState 包含 ...