当前位置:书生博客 > 而已集 > 原创干货 > 正文

作者:书生

懂得了这世界上没有绝对的正确,能够接受别人有不同的三观和其衍生出来的思考方式。

手机扫码查看

自写的天气接口页面查询demo

今天突然想自己动手做一个天气查询的demo,博主是新手,有什么不对的地方大家指个明白,(虽然这是基础中的基础(*^▽^*))

自写的天气接口页面查询demo

文章借鉴了一些大佬们的思路,那接下来我们看代码!!!

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="shusheng">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>天气查看</title>
  <script type="text/javascript"> 
	function sousuo(){  
		var cs = document.getElementsByName('tianqi')[0].value;  
		var url = 'http://api.map.baidu.com/telematics/v3/weather?location='+cs+
		'&output=json&ak=gTGVhwZA2gR6OFAPap7GBw6KtaoSWhQi&callback=tianqi';
		//创建一个script标签
		var scr = document.createElement('script');
		scr.setAttribute('type','text/javascript');
		scr.setAttribute('src',url);
		//把script标签添加到head中,这样一触发这个函数就会加载这个链接
		document.getElementsByTagName('head')[0].appendChild(scr);
	}
	function tianqi(res){
		document.getElementById('test1').innerHTML = '搜索时间:'+res.date;
		document.getElementById('test2').innerHTML = '搜索城市:'+res.results[0]['currentCity'];
		document.getElementById('test3').innerHTML = '实时更新:'+res.results[0]['weather_data'][0]['date'];
		document.getElementById('test4').innerHTML = '天气:'+res.results[0]['weather_data'][0]['weather'];
		document.getElementById('test5').innerHTML = '风向:'+res.results[0]['weather_data'][0]['wind'];
		document.getElementById('test6').innerHTML = '一天温度:'+res.results[0]['weather_data'][0]['temperature']; 
	}  
</script>
		<style type="text/css">
		</style>
</head>
	<body>
		<h2 style="text-align:center">欢迎使用天气搜索(json和百度天气接口学习)</h2><br />
		<div style="text-align:center">
        输入城市名字:<input type="text" name="tianqi"/><br />
        <input type="submit" value="搜索" onclick="sousuo();"/><br />
		</div>
		<div style="text-align:center" id="test1"></div>
		<div style="text-align:center" id="test2"></div>
		<div style="text-align:center" id="test3"></div>
		<div style="text-align:center" id="test4"></div>
		<div style="text-align:center" id="test5"></div>
		<div style="text-align:center" id="test6"></div>
	</body>
</html>
博主有话说:

作者:书生, 转载或复制请以 超链接形式 并注明出处 书生博客
原文地址:《自写的天气接口页面查询demo》 发布于2018-05-27

分享到:
赞(3) 打赏

评论 1

3 + 2 =
  1. #1

    哈哈hiahia~~~

    书生5个月前 (05-27)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

欢迎来访本博客!

本博客分享各种活动线报,实用代码等一些比较实用的资源,感兴趣的话可以收藏一下哦~

了解一下

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录