菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html><html><head><meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} #wei{width:100%;height:200px;border:0px solid gray; position: relative;margin:22% auto; } #text{width:66%;height:50px;line-height: 50px;padding-left:20px;font-size: 16px; position: absolute; } #list{width:66%;height:auto;border:1px solid #ccc;display: none; position: absolute;top: 53px; } #wei ul li{width:100%;height:30px;line-height: 30px;text-indent:10px;font-size: 16px;list-style: none;color: #000;} #wei ul li a{text-decoration:none;color: #000;} #wei ul li:hover{display:block;background:#ccc;color:#fff;} #btn{width: 80px;height: 54px;background: deepskyblue;outline: none;border: 0;position: absolute;left:66%;color: #fff;} p{height: 58px;} </style> </head> <body ng-controller="show"> <div id="wei"> <p> <input type="text" id="text" value="好人一生平安"> <input type="button" name="btn" id="btn" value="百度一下" /> </p> <ul id="list"></ul> </div> <script type="text/javascript"> var txt = document.getElementById("text"); var oUl = document.getElementById("list"); var oBtn = document.getElementById("btn"); txt.onkeyup = function(){ oUl.innerHTML = ""; var val = txt.value; var oScript = document.createElement("script");/*动态创建script标签 */ oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=callback"; /*添加链接及回调函数 */ document.body.appendChild(oScript);/*添加script标签 */ document.body.removeChild(oScript);/*删除script标签 */ } function callback(data){ /*回调函数*/ data.s.forEach(function(value){ var oLi = document.createElement("li"); oLi.innerHTML = "<a href=\"https://www.baidu.com/s?wd="+ value + "\">"+ value + "</a>"; oUl.appendChild(oLi); }) oUl.style.display = "block"; } oBtn.onclick = function(){/*点击跳转到百度页面,并搜索其中内容*/ var val = txt.value; location.href = "http://www.baidu.com.cn/s?wd=" + val + "&cl=3"; } </script> </body> </html>
运行结果