瀚淩导航v2.0(一键切换搜索引擎+搜索引擎下拉提示关键词+通过IP获取用户地区天气)

前言

以前自己写了一个网站导航,被好朋友吐槽掺了,参加比赛也是被老师说UI丑。最近在网上看到黑格网站导航的源码,UI蛮喜欢的就打算进行二开。

一键切换搜索引擎

常用的搜索接口


搜索引擎:
百度:https://www.baidu.com/s?wd=
谷歌:https://www.google.com/search?q=
360:https://www.so.com/s?q=
搜狗:https://www.sogou.com/web?query=
Bing:https://cn.bing.com/search?q=
神马:https://yz.m.sm.cn/s?q=

社区:
知乎:https://www.zhihu.com/search?type=content&q=
微信:http://weixin.sogou.com/weixin?type=2&query=
微博:http://s.weibo.com/weibo/
豆瓣:https://www.douban.com/search?q=

生活:
淘宝:https://s.taobao.com/search?q=
京东:https://search.jd.com/Search?keyword=
12306:http://www.12306.cn/?
快递100:http://www.kuaidi100.com/?

接口我们知道了那HTML代码该如何实现呢?


以百度为例:
//百度接口https://www.baidu.com/s?wd=
那么我们设计一个form表单,把form的action设计成?号前的链接,input的name设置成wd
为什么要这么设计,不懂的小伙伴可以回顾一下get方法
<form id="search_form" class="super-search-fm" action="https://www.baidu.com/s" method="get" target="_blank">
<input id="search_input" autocomplete="off" name="wd" type="search" placeholder="百度一下" /> 
<button id="search_form_button" type="submit">GO</button>
</form>

效果如下:

//最后我们就只用设计按钮,用js切换相应的API格式了

关键词提醒API


谷歌(Google)Api地址:www.google.com/s?hl=zh-cn&sugexp=llsin&q=设计
百度(baidu)Api地址:http://suggestion.baidu.com/su?wd=设计&p=3&cb=window.bdsug.sug
搜搜(soso)Api地址:http://www.soso.com/smart_web.q?w=设计
有道(youdao)Api地址:http://www.youdao.com/suggest2/suggest.s?query=设计&keyfrom=web.suggest&rn=10&o=aa
搜狗(sogou)Api地址:http://w.sugg.sogou.com/sugg/ajaj_json.jsp?key=设计&type=web
一淘(etao)Api地址:http://suggest.taobao.com/sug?area=etao&code=utf-8&callback=KISSY.Suggest.callback&q=设计
雅虎(yahoo)Api地址:http://s.aliyun.com/ajax.php?format=jsonp&q=设计
必应(bing)Api地址:http://sg1.api.bing.com/qsonhs.aspx?type=cb&cb=callback&q=设计

接口我们知道了那HTML代码该如何实现呢?注意是跨站请求,普通的ajax会被拦截


//首先呢肯定是input的值一旦被改动就要请求一次接口
//所以input 要设置oninput事件
//oninput 事件在用户输入时触发。该事件在 input 或 textarea 元素的值发生改变时触发。
//提示: 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。

/******接下来就是用jsonp进行跨站请求******/
//输入框联想
function lenovo() {
	var searchText = $('#search_input').val(); //获取输入的值
	document.getElementById('search_tips_li').innerHTML = '';
	var qsData = {
		'wd': searchText,
		'p': '3',
		'cb': 'ShowDiv',
		't': new Date().getMilliseconds().toString()
	};

	$.ajax({
		async: false,
		url: "http://suggestion.baidu.com/su",
		type: "GET",
		dataType: 'jsonp',
		jsonp: 'jsoncallback',
		data: qsData,
		timeout: 5000,
		success: function(json) {},
		error: function(xhr) {}
	});
};
//获取异步数据 必须是全局变量 鬼知道为什么
function ShowDiv(data) {
	var Info = data['s']; //获取异步数据
	consloe.log(Info);
};

如果看完还不知道怎么写的:可以下载一个Demo:跨域请求 百度关键词提醒 Demo下载

IP获取用户地区天气


API:https://free-api.heweather.net/s6/weather/now?location=auto_ip&key=db86a5196f304e52a4369818c5182e60

 

名称 类型 说明
fl string 体感温度,默认单位:摄氏度
tmp string 温度,默认单位:摄氏度
cond_code string 实况天气状况代码
cond_txt string 实况天气状况描述
wind_deg string 风向360角度
wind_dir string 风向
wind_sc string 风力
wind_spd string 风速,公里/小时
hum string 相对湿度
pcpn string 降水量
pres string 大气压强
vis string 能见度,默认单位:公里
cloud string 云量

//利用代码
$.ajax({
	type: "get",
	url: 'https://free-api.heweather.net/s6/weather/now?location=auto_ip&key=db86a5196f304e52a4369818c5182e60',
	async: true,
	success: function(res) {
		res =res['HeWeather6'][0];
		var area =res['basic']['admin_area'];
		var todayWeather =res['now']['cond_txt'];
		var temperature=res['now']['tmp'];
		var feel =res['now']['fl'];
		document.getElementById('weather').innerHTML=''+area+' '+todayWeather+' '+temperature+'℃/'+feel+'℃';
	},
});

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注