html 显示当地天气 - fcc
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 显示当地天气 - fcc相关的知识，希望对你有一定的参考价值。
/**********************
Fonts
**********************/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,900');
/**********************
General
**********************/
html {
background: #222;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
width: 875px;
margin: auto;
color: #ccc;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 12em;
margin: -27.5px auto;
padding: 0 auto;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
text-align: left;
margin-top: 80px;
}
h3 {
margin: 10px auto;
}
/**********************
Calender
**********************/
#calender {
color: #444;
padding: 15px;
}
#date span {
padding-right: 13px;
}
#day span{
padding-right: 64.5px;
}
#month span {
padding-right: 15px;
}
/**********************
Search And Units
**********************/
#searchAndUnits {
width: 100%;
display: inline-block;
margin-top: 2%;
position: relative;
}
#searchBox {
display: inline-block;
}
.p-units, .p-units span {
display: inline-block;
padding: 3px;
}
input {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
position: absolute;
top: 5%;
right: 0px;
}
input[type=text] {
height: 29px;
width: 300px;
background: #eee;
border: 2px solid #222;
border-radius: 20px;
}
input[type=text]:focus,
input[type=text]:hover {
border-color: #999;
}
input[placeholder] {
padding-left: 15px;
}
#submit {
cursor: pointer;
height: 35px;
border: 0px solid rgba(0,0,0,0);
background: rgba(0,0,0,0);
position: absolute;
right: 15px;
}
.units {
cursor: pointer;
}
.units-middle {
position: absolute;
left: 250px;
}
.units-pad {
margin-right: 20px;
}
#show-local-weather {
height: 20px;
width: 20px;
position: absolute;
right: 325px;
top: 22px;
cursor: pointer;
filter: grayscale(100%);
transition: 0.5s;
}
#show-local-weather:hover {
filter: none;
}
/********** Slider Switch ************/
.switch input {
display: none;
}
label {
display: inline-block;
}
.switch {
position: relative;
display: inline-block;
width: 45px;
height: 25.5px;
margin-bottom: -5.5px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2196F3;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 3px;
bottom: 3px;
background-color: #fff;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #F32121;
}
input:checked + .slider:before {
-webkit-transform: translateX(19px);
transform: translateX(19px);
}
.slider.round {
border-radius: 25.5px;
}
.slider.round:before {
border-radius: 50%;
}
/**********************
Current Weather
**********************/
.current-weather {
position: relative;
margin-top: 3%;
}
.show-local-weather {
height: 27px;
width: 27px;
padding-right: 10px;
}
#cityCur {
font-size: 2.5em;
position: absolute;
right: 0;
top: 0;
}
#tempCur {
position: absolute;
right: 0;
top: 50px;
font-size: 5em;
color: #FDB82E;
}
#feelsLikeCur {
position: absolute;
right: 0;
top: 140px;
font-size: 1.1em;
}
#windCur {
position: absolute;
right: 0;
text-align: right;
top: 170px;
font-size: 1.2em;
}
h3 #windCur {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.windDirC {
color: #3BA4E6;
}
.windSpeedC {
color: #E64B3B;
}
.fa-tint, .rainCurP {
color: lightblue;
}
.fa-tint {
margin-left: 5px;
}
.fa-exchange, .fa-shower {
margin-right: 5px;
}
#rainCur {
position: absolute;
right: 0;
text-align: right;
top: 280px;
font-size: 1.2em;
}
#iconCur img {
width: 30%;
}
#weatherCur {
display: block;
font-size: 2em;
text-align: left;
margin-left: 15px;
margin-bottom: 34px;
}
#uvCur {
margin-left: 15px;
display: block;
}
#uvCur i {
margin-right: 4px;
}
.fa-sun-o {
color: #FDB82E;
}
#sun, #sun i {
margin-left: 7.5px;
margin-right: 4px;
}
.fa-moon-o {
color: #05BDEF;
}
#moon {
margin-left: 25px;
margin-right: 4px;
}
#moon i {
margin-left: 5px;
margin-right: 5px;
}
/**********************
Hourly Forecast
**********************/
#hourly-forecast {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
padding: 20px 0;
margin-top: 20px;
margin-bottom: -15px;
}
#hourly-forecast::-webkit-scrollbar {
color: #222;
background-color: #444;
height: 5px;
}
#hourly-forecast::-webkit-scrollbar-thumb {
background: #2C77A6;
}
.hourly-forecast {
display: inline-block;
vertical-align: middle;
padding: 0px 30px 15px 0;
}
.inside-hourly {
display: block;
text-align: center;
}
/**********************
3 Day Forecast
**********************/
.three-day-forecast {
width: 100%;
text-align: center;
vertical-align: top;
}
.dailyForecast {
display: inline-block;
width: 30%;
margin: 50px 0;
padding: auto 15px;
padding: 0;
vertical-align: top;
}
.weekday {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 1.5em;
display: block;
margin-bottom: 15px;
}
.weekdayicon {
display: block;
}
.weekdayicon img {
width: 50%;
}
/**********************
Footer
**********************/
.footer {
text-align: center;
padding-bottom: 15px;
}
hr {
color: #444;
border-color: #444;
background: #444;
}
#wgLogo {
width: 20%;
padding-left: 15px;
margin-bottom: -3px;
}
a, a:visited, a:focus {
color: #E0592E;
text-decoration: none;
transition: 0.4s;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}
a:hover {
color: #2196F3;
}
Show the Local Weather - fcc
----------------------------
A [Pen](https://codepen.io/harunpehlivan/pen/YemXWv) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).
[License](https://codepen.io/harunpehlivan/pen/YemXWv/license).
/*************** CALENDER ******************/
let calender = new Date();
let colorDate = calender.getDate();
let colorDay = calender.getDay();
let colorMonth = calender.getMonth();
let hour = calender.getHours();
let minutes = calender.getMinutes();
let date = document.getElementById('date');
let day = document.getElementById('day');
let month = document.getElementById('month');
if (minutes < 10) {
minutes = "0" + minutes;
}
// Write the date nums and highlight current date
for (let x = 1; x < 32; x++) {
let dates = '<span>' + x + '</span>';
if (colorDate == x) {
dates = '<span class="colorChange">' + x + '</span>';
}
date.innerHTML += dates;
}
// Write the day and highlight current day
const dayArr = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
for (let x = 0; x < dayArr.length; x++) {
let days = '<span>' + dayArr[x] + '</span>';
if (colorDay == x) {
days = '<span class="colorChange">' + dayArr[x] + '</span>';
}
day.innerHTML += days;
}
// Write the month and highlight current month
const monthArr = ['January','Febuary','March','April','May','June','July','August','September','October','November','December'];
for (let x = 0; x < monthArr.length; x++) {
let months = '<span>' + monthArr[x] + '</span>';
if (colorMonth == x) {
months = '<span class="colorChange">' + monthArr[x] + '</span>';
}
month.innerHTML += months;
}
/*************** Variable Declarations ******************/
// Select elements and assign to variables
let unitChange = document.getElementById("switch");
let colorChange = document.querySelectorAll(".colorChange");
let units = document.querySelectorAll(".units");
let metric = document.querySelectorAll(".metric");
let imperial = document.querySelectorAll(".imperial");
// Add Event Listener to the switch and control function calls relative
unitChange.addEventListener("click", function() {
hourlyForecast = "";
unitColorChange();
unitCheck();
});
/*************** Color Change ******************/
// Check state of switch and make calls relative to its state
function unitColorChange() {
// Metric State == False/Unchecked
if (!unitChange.checked) {
for (let i = 0; i < colorChange.length; i++) {
colorChange[i].style.color = "#2196F3";
}
for (let i = 0; i < units.length / 2 - 1; i++) {
metric[i].style.color = "#2196F3";
imperial[i].style.color = "#ccc";
}
}
// Imperial State == True/Checked
else {
for (let i = 0; i < colorChange.length; i++) {
colorChange[i].style.color = "#F32121";
}
for (let i = 0; i < units.length / 2 - 1; i++) {
metric[i].style.color = "#ccc";
imperial[i].style.color = "#F32121";
}
}
}
unitColorChange();
/*************** JSON FILE REQUEST ******************/
let weather = "";
let showLocal = document.getElementById("show-local-weather");
let searchBox = document.getElementById("search");
searchBox.value = "";
let cityCur = document.getElementById("cityCur");
let iconCur = document.getElementById("iconCur");
let weatherCur = document.getElementById("weatherCur");
let tempCur = document.getElementById("tempCur");
let feelsLikeCur = document.getElementById("feelsLikeCur");
let windCur = document.getElementById("windCur");
let windDir = "";
let rainCur = document.getElementById("rainCur");
let rainChance = "";
let uvCur = document.getElementById("uvCur");
let sun = document.getElementById("sun");
let moon = document.getElementById("moon");
let amPM = "";
let weekday1 = document.getElementById("weekday1");
let weekday2 = document.getElementById("weekday2");
let weekday3 = document.getElementById("weekday3");
let hourlyForecast = document.getElementById("hourly-forecast");
let isMetric_English = document.querySelectorAll(".metric_english");
let weekdayicon1 = document.getElementById("weekdayicon1");
let weekdayicon2 = document.getElementById("weekdayicon2");
let weekdayicon3 = document.getElementById("weekdayicon3");
let weekdaytext1 = document.getElementById("weekdaytext1");
let weekdaytext2 = document.getElementById("weekdaytext2");
let weekdaytext3 = document.getElementById("weekdaytext3");
let weekDayText = document.querySelectorAll(".weekDayText");
// If local weather icon pressed call local autoip
showLocal.addEventListener("click", function () {
xhr();
unitCheck();
unitColorChange();
});
// Prevent default submit action and capture search location request
document.querySelector('form.searchBox').addEventListener('submit', function (e) {
//prevent the normal submission of the form
e.preventDefault();
searchLocation();
});
/**** Search XHR REQUEST ****/
let finalSearch = "";
let searchXHR = 0;
let autoXHR = 1;
// Get Location from Search Box
function searchLocation() {
let address = []
address = searchBox.value;
address = address.replace(",", "");
address = address.split(" ");
if (address.length == 1 || address.length >= 4) {
searchBox.value = 'Error: Paris, France.. Seattle, WA..'
xhr();
return false;
}
if (address.length == 3) {
let temp = address[0];
address[0] = address[1];
address[1] = temp;
}
address.reverse();
address.splice(1, 0, "/");
address = address.join("");
finalSearch = address;
// Change xhr values
searchXHR = 1;
autoXHR = 0;
xhr();
// Reset Value of Search Box
searchBox.value = "";
}
/**** Auto XHR REQUEST ****/
function xhr() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
weather = JSON.parse(xhr.responseText);
// Current Weather Condition
cityCur.innerHTML = '<img src="http://www.seanmurphy.eu/weather/icons/map-marker.png" class="show-local-weather">' + weather.current_observation.display_location.full;
weatherCur.innerHTML = weather.hourly_forecast[0].condition;
windDir = weather.current_observation.wind_dir.toLowerCase();
rainChance = "Chance of Rain: " + weather.forecast.simpleforecast.forecastday[0].pop + "<i class='fa fa-tint'></i>";
uvCur.innerHTML = "<i class='fa fa-sun-o'></i> uv: " + weather.current_observation.UV;
sun.innerHTML = "<i class='fa fa-sun-o'></i> Sunrise: " + weather.sun_phase.sunrise.hour + ":" + weather.sun_phase.sunrise.minute
+"<i class='fa fa-sun-o'></i> Sunset: " + weather.sun_phase.sunset.hour + ":" + weather.sun_phase.sunset.minute;
moon.innerHTML = "<i class='fa fa-moon-o'></i> Moonrise: " + weather.moon_phase.moonrise.hour + ":" + weather.moon_phase.moonrise.minute
+" <i class='fa fa-moon-o'></i> Moonset: " + weather.moon_phase.moonset.hour + ":" + weather.moon_phase.moonset.minute;
// Check icon url for Night Time Icon
var dayOrNight = weather.hourly_forecast[0].icon_url;
var regex = /nt/;
var isDayNight;
if (regex.test(dayOrNight)) {
iconCur.innerHTML = "<img src='https://icons.wxug.com/i/c/v2/nt_" + weather.hourly_forecast[0].icon + ".svg'>";
isDayNight = "nt_";
}
else {
iconCur.innerHTML = "<img src='https://icons.wxug.com/i/c/v2/" + weather.hourly_forecast[0].icon + ".svg'>";
isDayNight = "";
}
/**** Hourly Forecast - Iterate through and create div's ****/
let hourly = weather.hourly_forecast.length / 3;
hourlyForecast.innerHTML = "";
for (let i = 0; i < hourly; i++) {
var FCdayOrNight = weather.hourly_forecast[i].icon_url;
var FCregex = /nt/;
var FCisDayNight;
if (regex.test(FCdayOrNight)) {
FCisDayNight = "nt_";
}
else {
FCisDayNight = "";
}
let hf = '<div class="hourly-forecast">';
hf+= '<span class="inside-hourly">'+weather.hourly_forecast[i].FCTTIME.hour+" "+weather.hourly_forecast[i].FCTTIME.ampm.toLowerCase()+'</span>'; // hour
hf+= '<span class="inside-hourly"><img src="https://icons.wxug.com/i/c/v2/'+ FCisDayNight + weather.hourly_forecast[i].icon + '.svg"></span>'; // icon
hf+= '<span class="inside-hourly metric_english">'+weather.hourly_forecast[i].temp.metric+'°C</span>'; // temp
hf+= '<span class="inside-hourly">'+weather.hourly_forecast[i].condition+'</span>'; // description
hf+= '</div>';
hourlyForecast.innerHTML += hf;
}
// Capture all metric temperature in hourly forecast
isMetric_English = document.querySelectorAll(".metric_english");
weekDayText = document.querySelectorAll(".weekDayText");
// 3 Day Forecast
weekday1.innerHTML = weather.forecast.simpleforecast.forecastday[1].date.weekday;
weekdayicon1.innerHTML = '<img src="https://icons.wxug.com/i/c/v2/' + weather.forecast.simpleforecast.forecastday[1].icon + '.svg">';
weekday2.innerHTML = weather.forecast.simpleforecast.forecastday[2].date.weekday;
weekdayicon2.innerHTML = '<img src="https://icons.wxug.com/i/c/v2/' + weather.forecast.simpleforecast.forecastday[2].icon + '.svg">';
weekday3.innerHTML = weather.forecast.simpleforecast.forecastday[3].date.weekday;
weekdayicon3.innerHTML = '<img src="https://icons.wxug.com/i/c/v2/' + weather.forecast.simpleforecast.forecastday[3].icon + '.svg">';
weekdaytext1.innerHTML = weather.forecast.txt_forecast.forecastday[2].fcttext_metric;
weekdaytext2.innerHTML = weather.forecast.txt_forecast.forecastday[4].fcttext_metric;
weekdaytext3.innerHTML = weather.forecast.txt_forecast.forecastday[6].fcttext_metric;
/**** Check if Location is accessed in the US and show Imperial if true ****/
if (weather.current_observation.display_location.country == "US") {
unitChange.checked = true;
}
else {
unitChange.checked = false;
}
unitCheck();
unitColorChange();
}
}
if (autoXHR == 1) {
xhr.open('GET', 'https://api.wunderground.com/api/f9a54c68029a9953/conditions/astronomy/forecast/hourly/q/autoip.json', true);
xhr.send();
}
else if (searchXHR == 1) {
xhr.open('GET', 'https://api.wunderground.com/api/f9a54c68029a9953/conditions/astronomy/forecast/hourly/q/' + finalSearch +'.json', true);
xhr.send();
}
// reset xhr values
searchXHR = 0;
autoXHR = 1;
}
xhr();
/***************Metric / Imperial UNITS ******************/
// Check state of switch and make calls relative to its state
function unitCheck() {
// Metric State == False/Unchecked
if (!unitChange.checked) {
tempCur.innerHTML = weather.current_observation.temp_c + '<span class="units metric"> °C</span>';
feelsLikeCur.innerHTML = "feels like <span style='color: #FDB82E'>" + weather.current_observation.feelslike_c + " °C";
windCur.innerHTML = "<h3><i class='fa fa-exchange'></i> Wind</h3>Direction: " + weather.current_observation.wind_dir
+ " <i class='windDirC wi wi-wind wi-towards-" + windDir + "'></i>" + "<br />Speed: "
+ weather.current_observation.wind_kph +"<span class='windSpeedC'> kph</span>";
rainCur.innerHTML = "<h3><i class='fa fa-shower'></i> Rain</h3>" + "Precipitation: "
+ weather.current_observation.precip_today_metric +" <span class='rainCurP'>mm</span><br />"+ rainChance;
for (let i = 0; i < isMetric_English.length; i++) {
isMetric_English[i].innerHTML = '<span class="inside-hourly metric_english">'+weather.hourly_forecast[i].temp.metric+'°C</span>';
}
weekdaytext1.innerHTML = weather.forecast.txt_forecast.forecastday[2].fcttext_metric;
weekdaytext2.innerHTML = weather.forecast.txt_forecast.forecastday[4].fcttext_metric;
weekdaytext3.innerHTML = weather.forecast.txt_forecast.forecastday[6].fcttext_metric;
}
// Imperial State == True/Checked
else {
tempCur.innerHTML = weather.current_observation.temp_f + '<span class="imperial units"> °F</span>';
feelsLikeCur.innerHTML = "feels like <span style='color: #FDB82E'>" + weather.current_observation.feelslike_f + " °F";
windCur.innerHTML = "<h3><i class='wi wi-strong-wind'></i> Wind</h3>Direction: " + weather.current_observation.wind_dir
+ " <i class='windDirC wi wi-wind wi-towards-" + windDir + "'></i>" + "<br />Speed: "
+ weather.current_observation.wind_mph +"<span class='windSpeedC'> mph</span>";
rainCur.innerHTML = "<h3><i class='wi wi-umbrella'></i> Rain</h3>" + "Precipitation: "
+ weather.current_observation.precip_today_in +" <span class='rainCurP'>in</span><br />"+ rainChance;
for (let i = 0; i < isMetric_English.length; i++) {
isMetric_English[i].innerHTML = '<span class="inside-hourly metric_english">'+weather.hourly_forecast[i].temp.english+'°F</span>';
}
weekdaytext1.innerHTML = weather.forecast.txt_forecast.forecastday[2].fcttext;
weekdaytext2.innerHTML = weather.forecast.txt_forecast.forecastday[4].fcttext;
weekdaytext3.innerHTML = weather.forecast.txt_forecast.forecastday[6].fcttext;
}
}
/*************** Units ******************/
/**** Unit Switcher ****/
metric[0].addEventListener("click", function() {
unitChange.checked = false;
unitCheck();
unitColorChange();
});
imperial[0].addEventListener("click", function() {
unitChange.checked = true;
unitCheck();
unitColorChange();
});
/**** Temperature ****/
metric[1].addEventListener("click", function() {
metric[1].style.color = "#2196F3";
imperial[1].style.color = "#ccc";
tempCur.innerHTML = weather.current_observation.temp_c + " °C";
feelsLikeCur.innerHTML = "feels like <span style='color: #FDB82E'>" + weather.current_observation.feelslike_c + " °C";
for (let i = 0; i < isMetric_English.length; i++) {
isMetric_English[i].innerHTML = '<span class="inside-hourly metric_english">'+weather.hourly_forecast[i].temp.metric+'°C</span>';
}
});
imperial[1].addEventListener("click", function() {
metric[1].style.color = "#ccc";
imperial[1].style.color = "#F32121";
tempCur.innerHTML = weather.current_observation.temp_f + " °F";
feelsLikeCur.innerHTML = "feels like <span style='color: #FDB82E'>" + weather.current_observation.feelslike_f + " °F";
for (let i = 0; i < isMetric_English.length; i++) {
isMetric_English[i].innerHTML = '<span class="inside-hourly metric_english">'+weather.hourly_forecast[i].temp.english+'°F</span>';
}
});
/**** Wind Speed ****/
metric[2].addEventListener("click", function() {
metric[2].style.color = "#2196F3";
imperial[2].style.color = "#ccc";
windCur.innerHTML = "<h3><i class='wi wi-strong-wind'></i> Wind</h3>Direction: " + weather.current_observation.wind_dir
+ " <i class='windDirC wi wi-wind wi-towards-" + windDir + "'></i>" + "<br />Speed: "
+ weather.current_observation.wind_kph +"<span class='windSpeedC'> kph</span>";
});
imperial[2].addEventListener("click", function() {
metric[2].style.color = "#ccc";
imperial[2].style.color = "#F32121";
windCur.innerHTML = "<h3><i class='wi wi-strong-wind'></i> Wind</h3>Direction: " + weather.current_observation.wind_dir
+ " <i class='windDirC wi wi-wind wi-towards-" + windDir + "'></i>" + "<br />Speed: "
+ weather.current_observation.wind_mph +"<span class='windSpeedC'> mph</span>";
});
/**** Rain Fall ****/
metric[3].addEventListener("click", function() {
metric[3].style.color = "#2196F3";
imperial[3].style.color = "#ccc";
rainCur.innerHTML = "<h3><i class='wi wi-umbrella'></i> Rain</h3>" + "Precipitation: "
+ weather.current_observation.precip_today_metric +" <span class='rainCurP'>mm</span><br />"+ rainChance;
});
imperial[3].addEventListener("click", function() {
metric[3].style.color = "#ccc";
imperial[3].style.color = "#F32121";
rainCur.innerHTML = "<h3><i class='wi wi-umbrella'></i> Rain</h3>" + "Precipitation: "
+ weather.current_observation.precip_today_in +" <span class='rainCurP'>in</span><br />"+ rainChance;
});
<head>
<meta charset="utf-8">
<title>Show the Local Weather</title>
</head>
<body id="body">
<!-- Units Bar and Search Bar -->
<div id="searchAndUnits">
<!-- Units -->
<label class="switch units">
<input id="switch" type="checkbox"/>
<div class="slider round"></div>
</label>
<p class="p-units"><span class="metric units">Metric</span>|<span class="imperial units">Imperial</span></p>
<p class="p-units units-middle"><span class="metric units">C</span>|<span class="imperial units units-pad">F</span>
<span class="metric units">kph</span>|<span class="imperial units units-pad">mph</span>
<span class="metric units">mm</span>|<span class="imperial units">inch</span>
</p>
<!-- Search Bar -->
<img src="http://www.seanmurphy.eu/weather/icons/map-marker.png" id="show-local-weather">
<form id="searchBox" class="searchBox" >
<input id="search" type="text" placeholder="Paris, France.. Seattle, WA.."/>
<input id="submit" value="Search" type="Button" type="Submit" onclick="searchLocation()">
</form>
<h1>Weather</h1>
<!-- Calender - month, dates and days -->
<div id="calender">
<div id="month"></div>
<div id="date"></div>
<div id="day"></div>
</div>
</div>
<!-- Start of Current Weather -->
<div class="current-weather">
<span id="cityCur"></span>
<span id="tempCur"></span>
<span id="feelsLikeCur"></span>
<span id="windCur"></span>
<span id="rainCur"></span>
<div>
<span id="iconCur"></span>
<span id="weatherCur"></span>
<span id="uvCur"></span>
<span id="sun"></span>
<span id="moon"></span>
<div>
</div>
<!-- Start of Hourly Forcast -->
<div>
<h2>Hourly Forecast</h2>
<div id="hourly-forecast">
</div>
</div>
<!-- Start of 3 day Forcast -->
<div class="three-day-forecast">
<h2>3 Day Forecast</h2>
<div id="day1" class="dailyForecast">
<span id="weekday1" class="weekday"></span>
<span id="weekdayicon1" class="weekdayicon"></span>
<span id="weekdaytext1" class="weekdaytext"></span>
</div>
<div id="day2" class="dailyForecast">
<span id="weekday2" class="weekday"></span>
<span id="weekdayicon2" class="weekdayicon"></span>
<span id="weekdaytext2" class="weekdaytext"></span>
</div>
<div id="day3" class="dailyForecast">
<span id="weekday3" class="weekday"></span>
<span id="weekdayicon3" class="weekdayicon"></span>
<span id="weekdaytext3" class="weekdaytext"></span>
</div>
</div>
<!-- Start of Footer -->
<div class="footer">
<hr />
<p>Weather data provided by <a href="http://wunderground.com"><img id="wgLogo" src="http://www.seanmurphy.eu/weather/icons/wundergroundlogo.png"></a></p>
<p>Code and Design by <a href="https://harunpehlivantebimtebitagem.carrd.co/">HARUN PEHLİVAN</a></p>
</div>
<!-- FontAwesome -->
<script src="https://use.fontawesome.com/9bad4b1133.js"></script>
</body>
以上是关于html 显示当地天气 - fcc的主要内容，如果未能解决你的问题，请参考以下文章
html 显示当地天气（FreeCodeCamp Zipline）