先来看看最终的效果吧！
源码
HTML页面源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>weater</title>
<link rel="stylesheet" href="./css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container">
<!--左边部分-->
<div class="weather-side">
<!-- 渐变 -->
<div class="gradient"></div>
<div class="date-container">
<h2 class="date-dayname" id="date-dayname">周二</h2>
<span class="date-day" id="date-day">2020-3-24</span>
<span class="iconfont" id="location">北京</span>
</div>
<div class="weather-conteiner">
<!--天气图标-->
<span class="iconfont" id="weather-1"></span>
<div class="weather-temp" id="weather-temp">25℃</div>
<div class="weather-desc" id="weather-desc">晴天</div>
</div>
</div>
<!--右边部分-->
<div class="info-side">
<div class="today-info-container">
<div class="today-info">
<!--PM2.5-->
<div class="pm clear ">
<span class="title">PM2.5</span>
<span class="value" id="pm">00</span>
</div>
<!--湿度-->
<div class="humidity clear">
<span class="title">湿度</span>
<span class="value" id="humidity">00</span>
</div>
<!--风速-->
<div class="humidity clear">
<span class="title">风速</span>
<span class="value" id="wind">00</span>
</div>
</div>
</div>
<div class="week-container">
<ul class="week-list">
<li class="active" id="day1">
<span class="iconfont"></span>
<span class="date-dayname">星期二</span>
<span class="day-temp" >25℃</span>
</li>
<li id="day2">
<span class="iconfont"></span>
<span class="date-dayname">星期三</span>
<span class="day-temp">25℃</span>
</li>
<li id="day3">
<span class="iconfont"></span>
<span class="date-dayname">星期四</span>
<span class="day-temp">25℃</span>
</li>
<li id="day4">
<span class="iconfont"></span>
<span class="date-dayname">星期五</span>
<span class="day-temp">25℃</span>
</li>
</ul>
</div>
<div class="location-container">
<input type="text" placeholder="位置" name="" id="city">
<button class="location-button" id="location-button">
<span>查询</span>
</button>
</div>
</div>
</div>
</body>
<script src="./js/index.js"></script>
</html>
CSS样式表
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
margin: 0;
padding:0;
}
ul {
list-style: none;
}
/*清除浮动*/
.clear::after {
content: '';
display: block;
clear: both;
}
body {
width: 100%;
height: 100vh;
background-color: #424242;
display: flex;
align-self: center;
justify-content: center;
}
.container {
margin-top: 10px;
width: 750px;
height: 435px;
background-color: #222831;
border-radius: 25px;
box-shadow: 0 0 70px -10px rgba(0,0,0, 0.2);
color:#fff
}
.weather-side {
position: relative;
width: 300px;
height: 100%;
border-radius: 25px 0 0 25px;
box-shadow: 0 0 35px -10px rgba(0, 0, 0, 0.2);
float: left;
}
.gradient {
width: 100%;
height: 100%;
position: absolute;
background-image: linear-gradient(135deg, #72EDF1 10%, #5151E6 100%);
opacity: 0.8;
position: absolute;
}
.date-container {
position: absolute;
top: 25px;
left: 25px;
}
.date-container .date-day {
display: block;
margin-top: 4px;
}
.weather-conteiner {
position: absolute;
bottom: 25px;
left: 25px;
}
#weather-1 {
font-size: 70px;
}
.weather-temp {
font-size: 4em;
font-weight: bold;
}
.weather-desc {
font-size: 20px;
}
.info-side {
/* background: red; */
float: right;
padding-top: 25px;
margin-right: 10px;
height: 100%;
box-sizing: border-box;
position: relative;
}
.today-info {
/* background-color: #5151E6; */
padding: 15px 15px 0 15px;
margin: 0 25px 25px 25px;
box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
.today-info div {
margin-bottom: 10px;
}
.today-info .title {
float: left;
}
.today-info .value {
float: right;
}
.week-list {
margin: 10px 35px;
border-radius: 10px;
box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.4);
}
.week-list li {
float: left;
/* background-color: red; */
padding: 15px;
cursor: pointer;
border-radius: 10px;
text-align: center;
transition: 200ms;
z-index: 100;
}
.week-list li span {
display: block;
}
.week-list .iconfont {
font-size: 36px;
}
.week-list li:hover {
transform: scale(1.1);
background-color: #ffffff;
color: #222831;
}
.active {
background-color: #ffffff;
color: #222831;
}
.week-list .day-name {
margin-top: 10px;
text-align: center;
}
.week-list .day-temp {
margin-top: 10px;
text-align: center;
font-size: 12px;
font-weight: bold;
}
.location-container {
padding: 25px 35px;
position: relative;
/* background-color: red; */
}
.location-container input {
outline: none;
width: 300px;
height: 28px;
padding: 6px;
display: block;
box-sizing: border-box;
position: absolute;
bottom: -135px;
left: calc(50%-150px);
border: none;
color: #222831;
border-radius: 5px;
}
.location-container button {
outline: none;
width: 320px;
padding: 8px;
box-sizing: border-box;
border: none;
color: #ffffff;
background-image: linear-gradient(135deg, #72EDF1 10%, #5151E6 100%);
border-radius: 25px;
font-weight: bold;
box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: 200ms;
position: absolute;
bottom: -195px;
left: calc(50% - 160px);
}
.location-container button:hover {
transform: scale(1.05);
}
JS脚本源码
function getweather(city){
$.ajax({
type: 'GET',
dataType: 'jsonp',
async: false,
url: 'http://api.asilu.com/weather/?callback=getname&city='+city,
success:function(data){
weather(data)
}
})
}
function weather(data){
console.log(data)
$("#date-day")[0].innerHTML = data.date
$("#date-dayname")[0].innerHTML = data.weather[0].date.slice(0,3)
$("#pm")[0].innerHTML = data.pm25
$("#humidity")[0].innerHTML = "暂无"
$("#wind")[0].innerHTML = data.weather[0].wind
$("#location")[0].innerHTML = data.city
$("#weather-temp")[0].innerHTML = data.weather[0].temp.slice(0,3) + "℃";
$("#weather-desc")[0].innerHTML = data.weather[0].weather
$("#weather-1")[0].innerHTML = weatherIcon(data,1);
var day1 = $("#day1")
var span1 =$(day1).find('span')
var day2 = $("#day2")
var span2 =$(day2).find('span')
var day3 = $("#day3")
var span3 =$(day3).find('span')
var day4 = $("#day4")
var span4 =$(day4).find('span')
span1[0].innerHTML = weatherIcon(data,1);
span1[1].innerHTML = data.weather[0].date.slice(0,3);
span1[2].innerHTML = data.weather[0].temp;
span2[0].innerHTML = weatherIcon(data,2);
span2[1].innerHTML = data.weather[1].date
span2[2].innerHTML = data.weather[1].temp;
span3[0].innerHTML = weatherIcon(data,3);
span3[1].innerHTML = data.weather[2].date
span3[2].innerHTML = data.weather[2].temp;
span4[0].innerHTML = weatherIcon(data,4);
span4[1].innerHTML = data.weather[3].date
span4[2].innerHTML = data.weather[3].temp;
}
function weatherIcon(data,t) {
if (data.weather[t - 1].icon1.search("yin") != -1) {
return "";
}
if(data.weather[t - 1].icon1.search("duoyun") != -1){
return "";
}
if(data.weather[t - 1].icon1.search("qing") != -1){
return "";
}
if(data.weather[t - 1].icon1.search("xiaoyu") != -1){
return "";
}
if(data.weather[t - 1].icon1.search("zhongyu") != -1){
return "";
}
if(data.weather[t - 1].icon1.search("dayu") != -1 || data.weather[0].icon1.search("baoyu") != -1){
return "";
}
if(data.weather[t - 1].icon1.search("zhenyu") != -1){
return "";
}
}
$("#location-button").click(function(){
var city=$("#city").val()
getweather(city)
})
window.onload = function() {
this.getweather('北京')
}
