Using nowAPI to complete a small example of html weather forecast

The effect is as follows:

Simple, not much nonsense, on the code!

<!DOCTYPE html>
<meta charset="utf-8">
<!-- Use Baidu static resource base -->
<script type="text/javascript" src=""></script>
<!-- Quoting Sohu's IP Address Library -->
<script src=""></script>
	<title>Weather forecast</title>
<h2>Weather forecast</h2>
<button id="weather">Click Start forecast</button><br/>
<!-- Weather icon -->
<img src="" id="weatherPic"><br/>
Date:<span id="r1"></span><br/>
Week:<span id="r2"></span><br/>
City Name:<span id="r3"></span><br/>
Today's temperature:<span id="r4"></span><br/>
Current temperature:<span id="r5"></span><br/>
Current humidity:<span id="r6"></span><br/>
PM2.5: <span id="r7"></span><br/>
Weather:<span id="r8"></span><br/>
Direction of wind:<span id="r9"></span><br/>
Wind force:<span id="r10"></span><br/>
Current weather:<span id="r11"></span><br/>
<script type="text/javascript">

	Logic: use Sohu IP address library for IP location, pass the local IP address into the request url for weather query, parse and traverse the returned json, and operate dom display

	//Doc NowAPI official website provides interface
var ky = "";	//Note: fill in the key applied for on your official website here
var sig = "";	//Note: fill in the sign applied for on your official website here
var mip = returnCitySN["cip"];		//Get location information
        type : 'get',
        async : false,
        url : ''+mip+'&appkey='+ky+'&sign='+sig+'&format=json&jsoncallback=data',
        dataType      : 'jsonp',
        jsonp         : 'callback',
        jsonpCallback : 'data',
        success       : function(data){
            	//No result
                alert("Abnormal results:"+data.msgid+' '+data.msg);
            //Traverse if there is a result
            var desc = "";
            for(var i in data.result){
                var property=data.result[i];	//ergodic	
                desc += property + ",";	//Concatenation result set is comma separated string
            //Split string and convert to array
            var resArr = desc.split(',');
            //Carry out value transfer operation
            document.getElementById('r1').innerHTML=resArr[1];	//date
            document.getElementById('r2').innerHTML=resArr[2];	//week
            document.getElementById('r3').innerHTML=resArr[4];	//City name
            document.getElementById('r4').innerHTML=resArr[6];	//Temperature today
            document.getElementById('r5').innerHTML=resArr[7];	//Current temperature
            document.getElementById('r6').innerHTML=resArr[8];	//Current humidity
            document.getElementById('r7').innerHTML=resArr[9];	//PM2.5
            document.getElementById('r8').innerHTML=resArr[10];	//weather    	
            document.getElementById('r9').innerHTML=resArr[14];	//wind direction
            document.getElementById('r10').innerHTML=resArr[15];	//wind power

            document.getElementById('r11').innerHTML=resArr[11];	//Current weather
            document.images.weatherPic.src=resArr[12];	//Weather map flag url
            // alert(resArr); / / view the summary result set
            alert('request was aborted');

The principle is: locate the ip address of the current network, splice it into the weather forecast interface request url, send the request and receive the return result, the result is as follows:

Then parse it!

Note: there is no api provided here. You can register one on the official website by yourself.

There are many interfaces in it. You can try to make them~

Tags: Javascript JQuery JSON IE

Posted on Fri, 31 Jan 2020 03:48:58 -0800 by iamtom