JS调用百度api接口——实现简单的百度页面

描述：

效果：

实现：

css文件：

@charset "utf-8";
/* CSS Document */
*{margin: 0;padding: 0;list-style: none;
}
.ss{border: 1px solid #000000;
}
.ss li
{/*border-bottom: 1px solid #999999;*/padding: 10px 20px;text-align: left;
}
.ss li:hover{background-color:#e2e2e2;cursor: pointer;
}
#top {float: right;
}#top li{padding:10px;float: left;
}
#top a {color: #000000;font-size: 14px;font-weight: 600;
}
#top a:hover{color:#0A09BE}#img_baidu {height: 150px;clear: both;display: block;margin: 0 auto;background: #FFFFFF;
}#text_baidu {width: 680px;margin: 36px auto;position: relative;background: #FFFFFF;
}#texts{width: 558px;height: 38px;left: 0;position: absolute;border: blue 1px solid;
}#sub{width:120px;height: 40px;top: 0;right: 0;position: absolute;background:#467EE9;color: #FFFFFF;border-style: none;font-size: 16px;
}#end {text-align: center;position: absolute;left: 0;right: 0;bottom: 100px;color: #9d9d9d;font-size: 12px;height: 80px;background: #FFFFFF;
}#end p {color: #000000;font-size: 14px;
}#end a {color: #9d9d9d;font-size: 12px;
}

html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="css/bd.css"/><!--<script src="http://localhost:80/js/Method.js"></script>-->
</head>
<body>
<br><div id="top" ><ul><li> <a href="#">新闻 </a></li><li> <a href="#">hao123 </a></li><li> <a href="#">地图 </a></li><li> <a href="#">视频 </a></li><li> <a href="#">贴吧 </a></li><li> <a href="#">学术 </a></li><li> <a href="#">登录 </a></li><li> <a href="#">设置 </a></li><li> <a href="#">更多产品 </a></li></ul></div><img src="data:images/bd_logo1.png" id="img_baidu"><div id="text_baidu"><form method="post" action="" name="bd"><input type="text" id="texts"><input type="button" value="百度一下" id="sub" ></form></div><div id="end"><div><img src="data:images/zbios_efde696.png" width="60px"><p>百度</p></div><div><a href="#">把百度设为主页 </a>&nbsp;&nbsp;&nbsp; <a href="#">关于百度 </a>&nbsp;&nbsp;&nbsp; <a href="#">About  Baidu</a>&nbsp;&nbsp;&nbsp;<a href="#">百度推广</a>&nbsp;&nbsp;&nbsp;<br>©2018 Baidu <a href="#">使用百度前必读 </a> &nbsp;&nbsp; <a href="#">意见反馈 </a>&nbsp;&nbsp;京ICP证030173号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">京公网安备11000002000001号</a>&nbsp;&nbsp;&nbsp;</div></div>
<script>/**  1、cors*  2、jsonp解决*  3、websocket解决（不讲解）*  （做一个本地服务，这个本地服务访问跨域服务通信，然后再传给本地）中间介质跨域*** *///        Method.$c("div",document.body);var script,ul,textSub;var texts=document.getElementById("texts");var textSub=document.getElementById("sub");texts.addEventListener("input",inputHandler);textSub.addEventListener("click",subClickHandler);function inputHandler(e) {search(texts.value);}function search(searchStr) {if(script){script.remove();script=null;}script=document.createElement("script");//百度APIscript.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+searchStr+"&json" +"=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";document.body.appendChild(script);}function callback(obj) {if(ul){ul.remove();ul=null;}ul=document.createElement("ul");ul.className="ss";ul.style.width=texts.clientWidth+"px";for(var i=0;i<6;i++){//搜素框内有几个数据var li=document.createElement("li");li.textContent=obj.s[i];li.addEventListener("click",clickHandler);ul.appendChild(li);}ul.firstElementChild.style="padding-top:50px";//第一个显示出来texts.parentElement.insertBefore(ul,texts.nextElementSibling);}function clickHandler(e) {//百度APIlocation.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=98012088_10_dg&wd="+this.textContent+"&rsv_pq=cb75ad3f00000fa1&rsv_t=e991pW4yEPgJGzdMD%2Bdfto2OgQRU12dPWLNRqfNP8twO5%2ByL0pdM%2BqfQ2UhzBJ5vXgzkVHU&rqlang=cn&rsv_enter=1&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101&rsv_sug2=0&inputT=1358&rsv_sug4=68195";}function subClickHandler(e) {//百度APIlocation.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=98012088_10_dg&wd="+texts.value+"&rsv_pq=cb75ad3f00000fa1&rsv_t=e991pW4yEPgJGzdMD%2Bdfto2OgQRU12dPWLNRqfNP8twO5%2ByL0pdM%2BqfQ2UhzBJ5vXgzkVHU&rqlang=cn&rsv_enter=1&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101&rsv_sug2=0&inputT=1358&rsv_sug4=68195";}</script>
</body>
</html>

JS调用百度api接口——实现简单的百度页面相关推荐

Java调用新浪微博API 接口发微博（包含js微博组件、springMVC新浪登录）详解
参考自:http://www.myexception.cn/program/1930025.html https://blog.csdn.net/qq_36580777/article/details ...
基于百度api接口的车辆识别计费系统
又是一年毕业季,前段时间帮学弟指导了一个车辆识别计费系统,整个的实现思路在此记录下,感兴趣的可以参考一下. 整个项目沟通后情况如下: 需求功能: 1.住户的登记,小区.手机号码.姓名.地址: 2.访客 ...
uni-app中使用native.js调用android API实现双卡发送短信
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台官网地址因 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
五十一、结合百度API接口打造 Python小项目
@Author: Runsen 本项目围绕图像识别,通过调用百度 API 接口,可以实现很多人性化的功能,比如手势识别.比对.人像分割以及颜值打分等功能. 本次Gitchat付费文章,但是因为订阅太少 ...
vue项目：（全局变量设置与调用）API接口封装 - 代码篇
vue项目,如何将"API接口" 封装为"全局变量" ? 1. API全局配置文件[global.vue文件] <template><div& ...
axios vue 回调函数_VUE使用axios调用后台API接口的方法
VUE使用axios调用后台API接口的方法引言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可 ...
python调用zabbix api接口实时展示数据
近日公司准备自已做一个运维管理平台,其中的监控部分,打算调用zabbix api接口来进行展示. 经过思考之后,计划获取如下内容: 1. 获得认证密钥 2. 获取zabbix所有的主机组 3. ...
python rest api_Python调用REST API接口的几种方式汇总
相信做过自动化运维的同学都用过REST API接口来完成某些动作.API是一套成熟系统所必需的接口,可以被其他系统或脚本来调用,这也是自动化运维的必修课. 本文主要介绍python中调用REST AP ...

JS调用百度api接口——实现简单的百度页面

描述：

效果：

实现：

JS调用百度api接口——实现简单的百度页面相关推荐

最新文章

热门文章