原生JS实现天气预报

2023-07-23 00:45:04 223

生活指数

舒适度指数

穿衣指数

感冒指数

运动指数

旅游指数

紫外线指数

洗车指数

空气污染扩散条件指数

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:"SegoeUISymbol";
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.01remsolidwhite;
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.01remdashed#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.01remsolidwhite;
margin:0.1rem0.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.01remsolid#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:00.2rem;
border-radius:0.1rem;
}
.forecast-item{
height:0.3rem;
display:flex;
justify-content:space-between;
margin:0.1rem0.2rem0;
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:00.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.3remauto0;
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代码

letsearchtext=document.querySelector('.search#search_from>input');
letsearchbtn=document.querySelector('.search-btn');
letinformation=document.querySelector('.information');//当前天气div
letforecast=document.querySelector(".forecast");//获取天气预报div
letlifestyle=document.querySelector('.lifestyle');
if(localStorage.tq==undefined){/*如果默认没搜索过就自动搜索普宁*/
vartqList=[];
letdefauleCity="普宁";
autorend(defauleCity);
}else{/*如果有搜索记录，就自动搜索最后一次机城市*/
vartqList=JSON.parse(localStorage.tq);
letendcityName=tqList[tqList.length-1].cityName;
autorend(endcityName);
}

/*自动渲染方法*/
functionautorend(cityName){
letnowurl="https://free-api.heweather.net/s6/weather/now?location="+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b";
letdailyurl="https://free-api.heweather.net/s6/weather/forecast?location="+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b";
letlifestyleurl="https://free-api.heweather.net/s6/weather/lifestyle?location="+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b";
console.log("执行自动渲染")
rendweather(nowurl,cityName,dailyurl,lifestyleurl);
}

functiongetTime(){
letdate=newDate();
letyear=date.getFullYear();
letmonth=date.getMonth()+1;
letday=date.getDate();
lethouse=date.getHours();
house=house<10?'0'+house:house;
letminutes=date.getMinutes();
minutes=minutes<10?'0'+minutes:minutes;
letsecond=date.getMinutes();
second=second<10?'0'+second:second;
lettime=year+"年-"+month+"月-"+day+"日-"+house+":"+minutes+":"+second;
returntime;
}

/*搜索按钮事件*/
searchbtn.addEventListener('click',function(){
lettime=getTime();
letcityName=searchtext.value;
/*如果输入框不为空才执行不加这条件会导致传入一个空的字符串导致历史记录添加到一个空的*/
if(cityName!=""){
letList={
"cityName":cityName,
"time":time
}
tqList.push(List);
localStorage.tq=JSON.stringify(tqList);
rendhistory(tqList);
letnowurl="https://free-api.heweather.net/s6/weather/now?location="+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b";
letdailyurl="https://free-api.heweather.net/s6/weather/forecast?location="+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b";
letlifestyleurl="https://free-api.heweather.net/s6/weather/lifestyle?location="+cityName+"&key=26be256aca2c43a7bb7f9a72e0f99a6b";
rendweather(nowurl,cityName,dailyurl,lifestyleurl);/*调用渲染方法*/
searchtext.value="";
}
});

/*手机键盘搜索键事件*/
document.getElementById('search_from').onsubmit=function(){
searchbtn.click();
document.activeElement.blur();
}

/*主页面渲染*/
functionrendweather(nowurl,cityName,dailyurl,lifestyleurl){
/*获取今日天气信息*/
getAjax(nowurl,function(xhr){
letdataboj=JSON.parse(xhr.response);
letnow=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;//将城市名赋值为数组最后一个元素即最后一次正确搜索的城市
}elseif(tqList.length==1){/*如果长度为1说明现在为止用户没输入一个正确的城市*/
cityName="普宁";//将城市名赋值为普宁
//tqList.splice(tqList.length-1,1);
tqList.pop();//删除输入错误的文字
rendhistory(tqList);//执行历史记录渲染
}
autorend(cityName);//最后执行自动渲染
}else{//如果以上都没错误说明用户输入的城市正确正常执行代码
/*渲染今日天气*/
information.innerHTML=`

${cityName}


${now.cond_txt}

温度:${now.tmp}℃
体感温度:${now.fl}℃


`;
/*渲染背景图片*/
letnowcondtxt=now.cond_code;
switch(nowcondtxt){
case"101":
case"102":
case"103":
case"104":
document.body.style.backgroundImage="url('images/2.jpg')";
break;
case"100":
case"200":
case"201":
case"202":
case"203":
case"204":
document.body.style.backgroundImage="url('images/1.jpg')";
break;
case"205":
case"206":
case"207":
case"208":
case"209":
document.body.style.backgroundImage="url('images/7.jpg')";
break;
case"210":
case"211":
case"212":
case"213":
document.body.style.backgroundImage="url('images/8.jpg')";
break;
case"300":
case"301":
case"302":
case"303":
case"304":
case"305":
case"306":
case"307":
case"308":
case"309":
case"310":
case"311":
case"312":
case"313":
case"314":
case"315":
case"316":
case"317":
case"318":
case"399":
document.body.style.backgroundImage="url('images/3.jpg')";
break;
case"400":
case"401":
case"402":
case"403":
case"404":
case"405":
case"406":
case"407":
case"408":
document.body.style.backgroundImage="url('images/4.jpg')";
break;
case"500":
case"501":
case"502":
case"503":
case"504":
case"505":
case"506":
case"507":
case"508":
document.body.style.backgroundImage="url('images/5.jpg')";
break;
case"509":
case"510":
case"511":
case"512":
case"513":
case"514":
case"515":
document.body.style.backgroundImage="url('images/6.jpg')";
break;
default:
document.body.style.backgroundImage="url('images/9.jpg')";
}

/*获取天气预告信息*/
getAjax(dailyurl,function(xhr){
forecast.innerHTML="";/*清除之前的渲染*/
letdataboj=JSON.parse(xhr.response);
letdaily=databoj.HeWeather6[0].daily_forecast;
daily.forEach(function(item,index){
/*如果当天天气早上和晚上一样就输出一个如果不一样就早上转晚上（天气类型）*/
vartxt=item.cond_txt_d==item.cond_txt_n?item.cond_txt_d:item.cond_txt_d+"转"+item.cond_txt_n;
letdate='今天';/*默认今天*/
if(index==1){/*第二个赋值为明天*/
date="明天";
}elseif(index==2){/*第三个赋值为后天*/
date="后天";
}
/*渲染天气预报*/
forecast.innerHTML+=`



${date}*${txt}


${item.tmp_max}°/
${item.tmp_min}°

`;
})
});

lifestyle.style.display='block';/*显示生活指数模板*/
/*获取生活指数*/
getAjax(lifestyleurl,function(xhr){
letdataboj=JSON.parse(xhr.response);
letlifestyle=databoj.HeWeather6[0].lifestyle;
lifestyleclick(lifestyle);/*调用生活指数渲染方法*/
});
}
});
}

/*生活指数渲染方法*/
letlifestyleitem=document.querySelectorAll('.lifestyle-item');
functionlifestyleclick(lifestyle){
for(letj=0;j


${lifestyleitem[j].children[1].childNodes[0].data}
${li.brf}
"${li.txt}"`;
lifestyletc.style.display='block';
/*关闭按钮*/
letfanghuibtn=document.querySelector('.fanghui');
console.log(fanghuibtn);
fanghuibtn.onclick=function(){
lifestyletc.style.display='none';
}
}
}
}


//历史记录事件
lethistorys=document.querySelector('.historys');
functionrendhistory(tqList){
historys.innerHTML="";/*每次执行历史记录渲染都清除之前的记录防止出现重复*/
tqList.forEach(function(item,index){
/*将历史记录写入*/
historys.innerHTML+=`

${item.time}
${item.cityName}

`;
})

/*获取历史记录div添加点击事件
*点击后跳转点击的城市
**/
lethistoryitem=document.querySelectorAll('.history-item');
for(letj=0;jimg');
lethistoryDiv=document.querySelector('.history');
letclearhistory=document.querySelector('.clearbtn');
letflag=true;
historybtn.addEventListener('click',function(){
if(flag){
flag=false;
historybtn.style.backgroundColor="rgba(0,0,0,.3)";
letheight=(tqList.length*0.4)+1.7;
historyDiv.style.height=height+'rem';
}else{
flag=true;
historybtn.style.backgroundColor="rgba(0,0,0,.0)";
historyDiv.style.height='0.9rem';
}
});
clearhistory.addEventListener('click',function(){/*清除历史记录事件*/
localStorage.removeItem('tq');/*删除本地存储*/
tqList=[];/*将数组清空*/
rendhistory(tqList);/*渲染历史记录*/
historybtn.click();/*执行下拉按钮点击*/
});
searchtext.addEventListener('click',function(){//点击输入框如果下拉菜单打开就关闭
if(!flag){
historybtn.click();
}
});
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

原生JS实现天气预报

生活指数

${lifestyleitem[j].children[1].childNodes[0].data}

热门推荐

随机推荐