獲取天氣api
阿新 • • 發佈：2022-04-07
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } .show { width: 220px; height: auto; background-color: #FFC0CB; text-align: center; } </style> <script type="text/javascript"> $(function() { let vals= $("input")[0] let btn = $("button") btn.click(function() { $.ajax({ type: "GET", url: 'http://wthrcdn.etouch.cn/weather_mini?city='+vals.value, success(res) { const data= $.parseJSON(res); console.log(res) let citys = data.data.city let info = data.data.forecast[0]; document.querySelector(".city").innerHTML = "當前城市是"+citys document.querySelector(".week").innerHTML = "4月"+info.date document.querySelector(".high").innerHTML = info.high document.querySelector(".low").innerHTML = info.low document.querySelector(".fengxiang").innerHTML = "風向："+info.fengxiang document.querySelector(".type").innerHTML = info.type /* date: "7日星期四" fengli: "<![CDATA[1級]]>" fengxiang: "南風" high: "高溫 24℃" low: "低溫 9℃" type: "晴" */ } }) }) }) </script> </head> <body> <h3>天氣</h3> <input type="text"> <button>查詢</button> <div class="show"> <p class="city"></p> <p class="week"></p> <p class="high"></p> <p class="low"></p> <p class="fengxiang"></p> <p class="type"></p> </div> </body> </html>