Haina
/
information-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

天气增加华氏度

Browse Source
hotfix/paypal-note
LiaoYijun 4 years ago
parent 6dfce4c217
commit 70324b068c
1 changed files with 93 additions and 86 deletions
Show Stats Download Patch File Download Diff File

179
application/views/mobile_first/ch-weather-forecast.php
Unescape Escape View File

@ -1,89 +1,89 @@
<div class="table-responsive" style="margin-bottom: 30px;"> <div class="table-responsive" style="margin-bottom: 30px;">
<table class="weather_info"> <table class="weather_info">
<tbody> <tbody>
<tr> <tr>
<td> <td>
<div class="day_weather today_weather"> <div class="day_weather today_weather">
<p id="todayDate">...</p>Today
<p id="todayTemperature">...</p>
<p id="todayTemperature0">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="todayIcon"
src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
<p id="todayCondition">...</p>
<p id="todayHumidity">Humidity: ...</p>
<p id="todayWind">Wind: ...</p>
</div>
</td>
<td>
<div class="day_weather">
<p id="forecastDate1">...</p>
<p id="forecastTemperature1">...</p> <p id="todayDate">...</p>Today
<p id="todayTemperature1">...</p> <p id="todayTemperature">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon1" <p id="todayFahrenheit">...</p>
src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div> <div class="infoimage weather_img"><img alt="" class="img-responsive" id="todayIcon"
<p id="forecastCondition1">...</p> src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
<p id="forecastHumidity1">Humidity: ...</p> <p id="todayCondition">...</p>
<p id="forecastWind1">Wind: ...</p> <p id="todayHumidity">Humidity: ...</p>
</div> <p id="todayWind">Wind: ...</p>
</td> </div>
<td> </td>
<div class="day_weather"> <td>
<p id="forecastDate2">...</p> <div class="day_weather">
<p id="forecastDate1">...</p>
<p id="forecastTemperature2">...</p>
<p id="todayTemperature2">...</p> <p id="forecastTemperature1">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon2" <p id="forecastFahrenheit1">...</p>
src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div> <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon1"
<p id="forecastCondition2">...</p> src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
<p id="forecastHumidity2">Humidity: ...</p> <p id="forecastCondition1">...</p>
<p id="forecastWind2">Wind: ...</p> <p id="forecastHumidity1">Humidity: ...</p>
</div> <p id="forecastWind1">Wind: ...</p>
</td> </div>
<td> </td>
<div class="day_weather"> <td>
<p id="forecastDate3">...</p> <div class="day_weather">
<p id="forecastDate2">...</p>
<p id="forecastTemperature3">...</p>
<p id="todayTemperature3">...</p> <p id="forecastTemperature2">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon3" <p id="forecastFahrenheit2">...</p>
src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div> <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon2"
<p id="forecastCondition3">...</p> src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
<p id="forecastHumidity3">Humidity: ...</p> <p id="forecastCondition2">...</p>
<p id="forecastWind3">Wind: ...</p> <p id="forecastHumidity2">Humidity: ...</p>
</div> <p id="forecastWind2">Wind: ...</p>
</td> </div>
<td> </td>
<div class="day_weather"> <td>
<p id="forecastDate4">...</p> <div class="day_weather">
<p id="forecastDate3">...</p>
<p id="forecastTemperature4">...</p>
<p id="todayTemperature4">...</p> <p id="forecastTemperature3">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon4" <p id="forecastFahrenheit3">...</p>
src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div> <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon3"
<p id="forecastCondition4">...</p> src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
<p id="forecastHumidity4">Humidity: ...</p> <p id="forecastCondition3">...</p>
<p id="forecastWind4">Wind: ...</p> <p id="forecastHumidity3">Humidity: ...</p>
</div> <p id="forecastWind3">Wind: ...</p>
</td> </div>
<td> </td>
<div class="day_weather last_day_weather"> <td>
<p id="forecastDate5">...</p> <div class="day_weather">
<p id="forecastDate4">...</p>
<p id="forecastTemperature5">...</p>
<p id="todayTemperature5">...</p> <p id="forecastTemperature4">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon5" <p id="forecastFahrenheit4">...</p>
src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div> <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon4"
<p id="forecastCondition5">...</p> src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
<p id="forecastHumidity5">Humidity: ...</p> <p id="forecastCondition4">...</p>
<p id="forecastWind5">Wind: ...</p> <p id="forecastHumidity4">Humidity: ...</p>
</div> <p id="forecastWind4">Wind: ...</p>
</td> </div>
</tr> </td>
</tbody> <td>
</table> <div class="day_weather last_day_weather">
</div> <p id="forecastDate5">...</p>
<p id="forecastTemperature5">...</p>
<p id="forecastFahrenheit5">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon5"
src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
<p id="forecastCondition5">...</p>
<p id="forecastHumidity5">Humidity: ...</p>
<p id="forecastWind5">Wind: ...</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script> <script>
// https://openweathermap.org/forecast5 // https://openweathermap.org/forecast5
var cityId = window.ch_forecast_city.id; var cityId = window.ch_forecast_city.id;
@ -95,6 +95,10 @@ function formatDate(date) {
function formatWeek(date) { function formatWeek(date) {
return weekMap[date.getDay()]; return weekMap[date.getDay()];
} }
// 摄氏温度（C）转换到华氏温度（F）
function convertToF(centigrade) {
return 9*centigrade /5+32;
}
var weatherUrl = 'https://api.openweathermap.org/data/2.5/weather?id=' + cityId + '&appid=d79a45c23a77a304b8fd2cca3590b89d&units=metric'; var weatherUrl = 'https://api.openweathermap.org/data/2.5/weather?id=' + cityId + '&appid=d79a45c23a77a304b8fd2cca3590b89d&units=metric';
fetch(weatherUrl) fetch(weatherUrl)
.then((res) => { .then((res) => {
@ -109,6 +113,7 @@ fetch(weatherUrl)
let todayDate = new Date(json.dt * 1000); let todayDate = new Date(json.dt * 1000);
document.getElementById('todayDate').innerText = formatDate(todayDate); document.getElementById('todayDate').innerText = formatDate(todayDate);
document.getElementById('todayTemperature').innerText = Math.round(json.main.temp) + '°C'; document.getElementById('todayTemperature').innerText = Math.round(json.main.temp) + '°C';
document.getElementById('todayFahrenheit').innerText = convertToF(Math.round(json.main.temp)) + '℉';
document.getElementById('todayIcon').src = 'https://data.chinahighlights.com/image/weather/icon-weather/' + json.weather[0].icon + '.png'; document.getElementById('todayIcon').src = 'https://data.chinahighlights.com/image/weather/icon-weather/' + json.weather[0].icon + '.png';
document.getElementById('todayCondition').innerText = json.weather[0].main; document.getElementById('todayCondition').innerText = json.weather[0].main;
document.getElementById('todayHumidity').innerText = 'Humidity: ' + json.main.humidity + '%'; document.getElementById('todayHumidity').innerText = 'Humidity: ' + json.main.humidity + '%';
@ -156,10 +161,12 @@ fetch(forecastUrl)
let lastDay = oneDayList[oneDayList.length - 1]; let lastDay = oneDayList[oneDayList.length - 1];
let currentDate = new Date(firstDay.dt * 1000); let currentDate = new Date(firstDay.dt * 1000);
document.getElementById('forecastWeek' + number).innerText = formatWeek(currentDate); // document.getElementById('forecastWeek' + number).innerText = formatWeek(currentDate);
document.getElementById('forecastDate' + number).innerText = formatDate(currentDate); document.getElementById('forecastDate' + number).innerText = formatDate(currentDate);
document.getElementById('forecastTemperature' + number).innerText = document.getElementById('forecastTemperature' + number).innerText =
Math.round(firstDay.main.temp) + '~' + Math.round(lastDay.main.temp) + '°C'; Math.round(firstDay.main.temp) + '~' + Math.round(lastDay.main.temp) + '°C';
document.getElementById('forecastFahrenheit' + number).innerText =
convertToF(Math.round(firstDay.main.temp)) + '~' + convertToF(Math.round(lastDay.main.temp)) + '℉';
document.getElementById('forecastIcon' + number).src = 'https://data.chinahighlights.com/image/weather/icon-weather/' + firstDay.weather[0].icon + '.png'; document.getElementById('forecastIcon' + number).src = 'https://data.chinahighlights.com/image/weather/icon-weather/' + firstDay.weather[0].icon + '.png';
document.getElementById('forecastCondition' + number).innerText = firstDay.weather[0].main; document.getElementById('forecastCondition' + number).innerText = firstDay.weather[0].main;
document.getElementById('forecastHumidity' + number).innerText = 'Humidity: ' + firstDay.main.humidity + '%'; document.getElementById('forecastHumidity' + number).innerText = 'Humidity: ' + firstDay.main.humidity + '%';

Write Preview
Loading…
Cancel
Save