目錄

• 基于JS+HTML實現的純前端天氣預報實時查詢系統
• • 功能介紹
  • 技術棧
  • 運行環境
  • 效果演示
  • 項目結構
  • 示例代碼
  • 最后

略陽網站制作公司哪家好，找成都創新互聯公司！從網頁設計、網站建設、微信開發、APP開發、響應式網站等網站項目制作，到程序開發，運營維護。成都創新互聯公司成立與2013年到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選成都創新互聯公司。
基于JS+HTML實現的純前端天氣預報實時查詢系統

該系統為純前端項目，通過XMLHttpRequest調用易客云天氣API，實現了實時查詢某個城市的天氣信息功能。

功能介紹

1. 默認城市天氣預
2. 手動輸入城市名稱查詢城市當前天氣預報信息

技術棧

JS+HTML+CSS

運行環境

瀏覽器打開即可運行；編輯使用VScode或者其他前端開發工具

效果演示

1. 默認
   
2. 手動查詢
   

項目結構

示例代碼

頁面代碼

天氣預報
當前城市：重慶
我關注的城市
重慶   
搜索
中央氣象臺發布
下午好鴨
重慶
   

            
            
            
            
            

數據渲染JS

xhr.onreadystatechange = () =>{if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status< 300) {let res = xhr.response;

                    city.innerHTML = res.city;
                    current_city.innerHTML = "當前城市:" + res.city;
                    temp.innerHTML = res.data[0].tem + "℃";
                    //遍歷天氣顯示框的各個部分，修改樣式
                    let index = 0;
                    while (index< res.data.length) {item[index].children[0].innerHTML = res.data[index].week;
                        item[index].children[1].innerHTML = res.data[index].date;
                        item[index].children[2].innerHTML = res.data[index].tem2 + "℃" + "~" + res.data[index].tem1 + "℃";
                        item[index].children[4].innerHTML = res.data[index].wea;
                        item[index].children[5].innerHTML = "空氣質量:" + res.data[index].air_level;

                        switch (res.data[index].wea) {case "小雨":
                            case "多云轉小雨":
                            case "陰轉小雨":
                            case "陰轉陣雨":
                                item[index].children[3].style.backgroundImage = "url(../asserts/小雨.png)";

                                break;
                            case "中雨":

                            case "小雨轉中雨":
                                item[index].children[3].style.backgroundImage = "url(../asserts/中雨.png)";
                                break;
                            case "大雨":
                            case "中雨轉大雨":
                            case "小雨轉大雨":
                                item[index].children[3].style.backgroundImage = "url(../asserts/大雨.png)";
                                break;
                            case "晴":
                            case "多云轉晴":
                            case "陰轉晴":
                                item[index].children[3].style.backgroundImage = "url(../asserts/晴.png)";
                                break;
                            case "陰":
                            case "多云轉陰":
                            case "晴轉陰":
                            case "小雨轉陰":
                                item[index].children[3].style.backgroundImage = "url(../asserts/陰.png)";
                                break;
                            default:
                                item[index].children[3].style.backgroundImage = "url(../asserts/多云.png)";
                        }
                        index++;
                    }
                    weather_logo.style.backgroundImage = item[0].children[3].style.backgroundImage;


                } else {console.log("請求失敗");
                }
            }
        }

最后

看到最后，歡迎交流

你是否還在尋找穩定的海外服務器提供商？創新互聯www.cdcxhl.cn海外機房具備T級流量清洗系統配攻擊溯源，準確流量調度確保服務器高可用性，企業級服務器適合批量采購，新人活動首月15元起，快前往官網查看詳情吧

當前題目：基于JS+HTML實現的純前端天氣預報實時查詢系統-創新互聯
新聞來源：http://www.xueling.net.cn/article/decdhi.html