使用Json实现简单天气预报查询

电玩女神 2024-04-19 09:39 68阅读 0赞

首先先在和天气注册一个账号获取key値

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>天气预报</title>
    		<meta name="viewport" content="width=375,user-scalable=no" />
    		<link rel="stylesheet" type="text/css" href="css/style.css"/>
    	</head>
    	<body>
    		<div class="app">
    			<div class="search">
    				<input type="text" name="city" id="city" placeholder="请输入查询天气的城市" />
    			</div>
    			<div class="main">
    				
    			</div>
    			
    			
    		</div>
    		
    		
    		
    		<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			var inputDom = document.querySelector("#city");
    			inputDom.onkeydown = function(e){
    				//获取按键信息
    				//当按下回车键并且内容不能为空
    				if(e.key=="Enter"&&inputDom.value!=""){
    					console.log(e)
    					var city = inputDom.value;
    					var httpUrl = "https://free-api.heweather.net/s6/weather/now?location="+ city+"&key=这里输入你在网上获得的key値"; 
    					ajaxGet(httpUrl,function(xhr){
    						console.log(xhr)
    						var data = JSON.parse(xhr.responseText);
    						console.log(data)
    						var status = data.HeWeather6[0].status;
    						var now = data.HeWeather6[0].now;
    						if(status=="ok"){
    							var mainDom = document.querySelector(".main");
    							
    							var tmp = now.tmp;
    							mainDom.innerHTML = `
    								<div><img src="https://cdn.heweather.com/cond_icon/${now.cond_code}.png"/></div>
    								<h2>城市：<span class="city">${city}</span></h2>
    								<h2>天气温度：<span class="tmp">${tmp}</span></h2>
    								<h2>体表温度：<span class="fl">${now.fl}</span></h2>
    								<h2>风向：<span class="wind_dir">${now.wind_dir}</span></h2>
    								<h2>风力：<span class="wind_sc">${now.wind_sc}</span></h2>
    							`;
    							var body = document.querySelector("body")
    							console.log(body)
    							if(now.cond_code[0]=="1"){
    								body.style.backgroundImage = "url(img/1.gif)";
    							}else if(now.cond_code[0]=="2"){
    								body.style.backgroundImage = "url(img/2.gif)";
    							}else{
    								body.style.backgroundImage = "url(img/3.gif)";
    							}
    							
    							
    						}else{
    							console.log("输入错误");
    							alert("您输入的内容不是一个城市！")
    						}
    					
    					
    					})
    				}
    			}
    		
    		
    			/*var city = "guangzhou";
    			var httpUrl = "https://free-api.heweather.net/s6/weather/now?location="+ city+"&key=c8b18212397748599a7fb0bfa1022b56"; 
    			ajaxGet(httpUrl,function(xhr){
    				console.log(xhr)
    				var data = JSON.parse(xhr.responseText);
    				console.log(data)
    			})*/
    		</script>
    	</body>
    </html>