(编辑：jimmy 日期: 2024/11/16 浏览：2)
本文实例为大家分享了JS实现天气预报的具体代码，供大家参考，具体内容如下
HTML代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="tianqi.css" > <link rel="stylesheet" href="iconfont/iconfont.css" > </head> <body> <!-- 搜索 --> <div class="search"> <span>Tq</span> <form target="sou" id="search_from"> <input type="search" placeholder="输入搜索的城市"> <iframe name="sou" style = "display: none"></iframe> </form> <div class="search-btn"><img src="/UploadFiles/2021-04-02/search.png">CSS代码
* { margin: 0; padding: 0; } ul,li { list-style: none; } body { background-size: 120%; color: white; } .search { position: fixed; width: 100%; height: 0.5rem; background-color: rgba(0,0,0,.0); display: flex; justify-content: space-between; align-items: center; } #search_from { width: 2.8rem; height: 0.4rem; position: relative; } .search > span { width: 0.5rem; font-size: 0.25rem; line-height: 0.5rem; text-align: center; font-family: "Segoe UI Symbol"; color: white; } .search #search_from > input { width: 2.8rem; height: 0.4rem; border-radius: 0.1rem; text-indent: 0.1rem; outline: none; position: absolute; border: none; border-bottom: 0.01rem solid white; background-color: rgba(255,255,255,.05); color: white; } .search #search_from > input::-webkit-input-placeholder { color: white; } .search > .search-btn { width: 0.5rem; position: relative; } .search > .search-btn > img { width: 0.25rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .history { height: 0.9rem; overflow: auto; background-color: rgba(255,255,255,.05); transition-duration: 0.5s; } .historys { margin-top: 0.8rem; overflow: hidden; } .history .history-item { display: flex; height: 0.4rem; border-bottom: 0.01rem dashed #cccccc; align-items: center; justify-content: space-evenly; } .history .history-item > .history-time { font-size: 0.14rem; } .history .history-item > .history-city { font-size: 0.18rem; } .history .la { height: 0.3rem; display: flex; position: fixed; top: 0.45rem; width: 90%; background-color: rgba(255,255,255,.0); justify-content: space-between; font-size: 0.16rem; border-bottom: 0.01rem solid white; margin: 0.1rem 0.2rem; font-family: 幼圆; line-height: 0.3rem; } .history .la > span { color: white; } .history .la > img { width: 0.2rem; height: 0.2rem; padding: 0.03rem; border: 0.01rem solid #cccccc; border-radius: 0.05rem; } .clearbtn { height: 0.3rem; text-align: center; text-decoration: underline; font-size: 0.2rem; margin-top: 0.1rem; line-height: 0.3rem; } .information { /*background-color: gold;*/ } .now { padding-top: 0.2rem; display: flex; flex-direction: column; } .now .city { font-size: 0.4rem; text-align: center; } .now .situation { padding-top: 0.2rem; display: flex; justify-content: space-evenly; font-size: 0.15rem; align-items: center; } .now .situation > img { width: 1rem; height: 1rem; vertical-align: bottom; } .now .temp { display: flex; flex-direction: column; align-items: center; } .now .temp > h3 { font-size: 0.2rem; margin-top: 0.1rem; } .forecast { background-color: rgba(0,0,0,.3); margin: 0 0.2rem; border-radius: 0.1rem; } .forecast-item { height: 0.3rem; display: flex; justify-content: space-between; margin: 0.1rem 0.2rem 0; padding-top: 0.1rem; } .forecast-item:last-of-type { padding-bottom: 0.1rem; } .forecast-item .forecast-situation > img { width: 0.2rem; height: 0.2rem; } .forecast-item .forecast-situation { font-size: 0.16rem; } .forecast-temp { font-size: 0.18rem; } .lifestyle { display: none; margin: 0 0.2rem; background-color: rgba(0,0,0,.3); border-radius: 0.1rem; } .lifestyle > h2 { text-align: center; margin-top: 0.2rem; font-size: 0.2rem; padding-top: 0.15rem; font-family: 幼圆; } .lifestyle .lifestyle-box { display: flex; flex-wrap: wrap; justify-content: space-between; } .lifestyle .lifestyle-box .lifestyle-item { display: flex; flex-direction: column; width: 0.7rem; height: 0.4rem; font-size: 0.14rem; text-align: center; padding-top: 0.1rem; padding-bottom: 0.05rem; } .lifestyle .lifestyle-box .lifestyle-item > i { font-size: 0.2rem; } .lifestyle .lifestyle-box .lifestyle-item > span { white-space: nowrap; text-overflow:ellipsis; overflow:hidden; } .lifestyle-tc { height: 100vh; position: fixed; top: 0; left: 0; background-color: gold; font-family: 幼圆; line-height: 0.4rem; } .lifestyle-tc .fanghui { width: 0.3rem; height: 0.3rem; position: absolute; left: 0.2rem; top: 0.1rem; } .lifestyle-tc .fanghui > img { width: 100%; } .lifestyle-tc > h2 { font-size: 0.3rem; width: 2.2rem; margin: 0.3rem auto 0; text-align: center; } .lifestyle-tc > span { width: 100%; font-size: 0.2rem; margin-top: 1.5rem; display: block; font-weight: 700; text-indent: 0.16rem; } .lifestyle-tc > p { text-indent: 0.32rem; font-size: 0.2rem; }JS代码
let searchtext = document.querySelector('.search #search_from > input'); let searchbtn = document.querySelector('.search-btn'); let information = document.querySelector('.information'); //当前天气div let forecast = document.querySelector(".forecast"); //获取天气预报 div let lifestyle = document.querySelector('.lifestyle'); if (localStorage.tq == undefined) { /*如果默认没搜索过 就自动搜索普宁*/ var tqList = []; let defauleCity = "普宁"; autorend(defauleCity); } else { /*如果有搜索记录，就自动搜索最后一次机城市*/ var tqList = JSON.parse(localStorage.tq); let endcityName = tqList[tqList.length - 1].cityName; autorend(endcityName); } /* 自动渲染方法*/ function autorend (cityName) { let nowurl = "https://free-api.heweather.net/s6/weather/now"+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b"; let dailyurl = "https://free-api.heweather.net/s6/weather/forecast"+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b"; let lifestyleurl = "https://free-api.heweather.net/s6/weather/lifestyle"+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b"; console.log("执行自动渲染") rendweather(nowurl,cityName,dailyurl,lifestyleurl); } function getTime() { let date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); let house = date.getHours(); house = house < 10 "年 - " + month + "月 - " + day + "日 - " + house + ":" + minutes + ":" + second; return time; } /*搜索按钮事件*/ searchbtn.addEventListener('click',function () { let time = getTime(); let cityName = searchtext.value; /*如果输入框不为空才执行 不加这条件 会导致传入一个空的字符串 导致历史记录添加到一个空的*/ if (cityName != "") { let List = { "cityName" : cityName, "time" : time } tqList.push(List); localStorage.tq = JSON.stringify(tqList); rendhistory(tqList); let nowurl = "https://free-api.heweather.net/s6/weather/now"+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b"; let dailyurl = "https://free-api.heweather.net/s6/weather/forecast"+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b"; let lifestyleurl = "https://free-api.heweather.net/s6/weather/lifestyle"+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b"; rendweather(nowurl,cityName,dailyurl,lifestyleurl); /*调用渲染方法*/ searchtext.value = ""; } }); /*手机键盘搜索键事件*/ document.getElementById('search_from').onsubmit = function () { searchbtn.click(); document.activeElement.blur(); } /*主页面渲染*/ function rendweather (nowurl,cityName,dailyurl,lifestyleurl) { /*获取今日天气信息*/ getAjax(nowurl,function (xhr) { let databoj = JSON.parse(xhr.response); let now = databoj.HeWeather6[0].now; if (now == undefined) { /* 如果获取到的为now 说明用户输入的城市有误*/ if (tqList.length > 1) {//如果长度大于1 说明之前用户正确输入过城市 tqList.splice(tqList.length - 1 , 1 ); //执行删除最后一个元素 即输入错误的城市 rendhistory(tqList); // 执行历史记录渲染 cityName = tqList[tqList.length - 1].cityName; //将城市名赋值为数组最后一个元素 即最后一次正确搜索的城市 } else if (tqList.length == 1) { /* 如果长度为1 说明现在为止用户没输入一个正确的城市*/ cityName = "普宁"; //将城市名赋值为 普宁 // tqList.splice(tqList.length - 1 , 1 ); tqList.pop(); //删除输入错误的文字 rendhistory(tqList); //执行历史记录渲染 } autorend(cityName); //最后执行自动渲染 } else { //如果以上都没错误 说明用户输入的城市正确 正常执行代码 /* 渲染今日天气*/ information.innerHTML = ` <div class="now"> <span class="city">${cityName}</span> <div class="situation"> <img src="/UploadFiles/2021-04-02/${now.cond_code}.png">以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。