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 8ec896bf81
commit 304675a8b8
2 changed files with 172 additions and 0 deletions
Show Stats Download Patch File Download Diff File

9
application/controllers/information.php
Unescape Escape View File

@ -636,6 +636,15 @@ class Information extends CI_Controller
}
}
// 天气预报模板
$weather_forecast_content = $this->load->view(
$template_path . '-weather-forecast',
array(),
true);
$template = str_replace(
'<!--@WEATHER-FORECAST-BLOCK@-->',
$weather_forecast_content,
$template);
//火车票搜索框添加 -- zp
if ($information->is_parent_id == "278008234") {

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

@ -0,0 +1,163 @@
<div class="table-responsive" style="margin-bottom: 30px;">
<table class="weather_info">
<tbody>
<tr>
<td>
<div class="day_weather today_weather">
<div class="today_title">Today</div>
<p id="todayDate">...</p>
<p id="todayTemperature">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="todayIcon"
src="http://openweathermap.org/img/wn/50d.png" /></div>
<p id="todayCondition">...</p>
<p id="todayHumidity">Humidity: ...</p>
<p id="todayWind">Wind: ...</p>
</div>
</td>
<td>
<div class="day_weather">
<div class="today_title" id="forecastWeek1">Tomorrow</div>
<p id="forecastDate1">...</p>
<p id="forecastTemperature1">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon1"
src="http://openweathermap.org/img/wn/50d.png" /></div>
<p id="forecastCondition1">...</p>
<p id="forecastHumidity1">Humidity: ...</p>
<p id="forecastWind1">Wind: ...</p>
</div>
</td>
<td>
<div class="day_weather">
<div class="today_title" id="forecastWeek2">Forcast2</div>
<p id="forecastDate2">...</p>
<p id="forecastTemperature2">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon2"
src="http://openweathermap.org/img/wn/50d.png" /></div>
<p id="forecastCondition2">...</p>
<p id="forecastHumidity2">Humidity: ...</p>
<p id="forecastWind2">Wind: ...</p>
</div>
</td>
<td>
<div class="day_weather">
<div class="today_title" id="forecastWeek3">Forcast3</div>
<p id="forecastDate3">...</p>
<p id="forecastTemperature3">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon3"
src="http://openweathermap.org/img/wn/50d.png" /></div>
<p id="forecastCondition3">...</p>
<p id="forecastHumidity3">Humidity: ...</p>
<p id="forecastWind3">Wind: ...</p>
</div>
</td>
<td>
<div class="day_weather">
<div class="today_title" id="forecastWeek4">Forcast4</div>
<p id="forecastDate4">...</p>
<p id="forecastTemperature4">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon4"
src="http://openweathermap.org/img/wn/50d.png" /></div>
<p id="forecastCondition4">...</p>
<p id="forecastHumidity4">Humidity: ...</p>
<p id="forecastWind4">Wind: ...</p>
</div>
</td>
<td>
<div class="day_weather last_day_weather">
<div class="today_title" id="forecastWeek5">Forcast5</div>
<p id="forecastDate5">...</p>
<p id="forecastTemperature5">...</p>
<div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon5"
src="http://openweathermap.org/img/wn/50d.png" /></div>
<p id="forecastCondition5">...</p>
<p id="forecastHumidity5">Humidity: ...</p>
<p id="forecastWind5">Wind: ...</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// https://openweathermap.org/forecast5
var cityId = window.ch_forecast_city.id;
var weekMap = new Array("SUN.", "MON.", "TUE.", "WED.", "THU.", "FRI.", "SAT.");
function formatDate(date) {
return (date.getMonth() + 1) + '.' + date.getDate();
}
function formatWeek(date) {
return weekMap[date.getDay()];
}
var weatherUrl = 'https://api.openweathermap.org/data/2.5/weather?id=' + cityId + '&appid=d79a45c23a77a304b8fd2cca3590b89d&units=metric';
fetch(weatherUrl)
.then((res) => {
if (res.ok) {
return res.json();
} else {
console.error(res);
return Promise.reject(res);
}
})
.then((json) => {
let todayDate = new Date(json.dt * 1000);
document.getElementById('todayDate').innerText = formatDate(todayDate);
document.getElementById('todayTemperature').innerText = Math.round(json.main.temp) + '°C';
document.getElementById('todayIcon').src = 'http://openweathermap.org/img/wn/' + json.weather[0].icon + '.png';
document.getElementById('todayCondition').innerText = json.weather[0].main;
document.getElementById('todayHumidity').innerText = 'Humidity: ' + json.main.humidity + '%';
document.getElementById('todayWind').innerText = 'Wind: ' + Math.round(json.wind.speed * 3.6) + 'km/h';
});
var forecastUrl = 'https://api.openweathermap.org/data/2.5/forecast?id=' + cityId + '&appid=d79a45c23a77a304b8fd2cca3590b89d&units=metric';
fetch(forecastUrl)
.then((res) => {
if (res.ok) {
return res.json();
} else {
console.error(res);
return Promise.reject(res);
}
})
.then((json) => {
const today = new Date();
const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
const forecastMap = new Map();
json.list.forEach(data => {
const forecastDate = new Date(data.dt * 1000);
const forecastDatetime = forecastDate.getTime();
if (forecastDatetime >= tomorrow.getTime()) {
const dateKey = '' + forecastDate.getFullYear() + (forecastDate.getMonth() + 1) + forecastDate.getDate();
if (forecastMap.has(dateKey)) {
const tempList = forecastMap.get(dateKey);
tempList.push(data);
} else {
forecastMap.set(dateKey, [data]);
}
}
});
const keyList = Array.from(forecastMap.keys());
for (let i = 0; i < keyList.length; i++) {
const oneDayList = forecastMap.get(keyList[i]);
oneDayList.sort((a, b) => {
return a.main.temp - b.main.temp;
});
let number = i + 1;
let firstDay = oneDayList[0];
let lastDay = oneDayList[oneDayList.length - 1];
let currentDate = new Date(firstDay.dt * 1000);
document.getElementById('forecastWeek' + number).innerText = formatWeek(currentDate);
document.getElementById('forecastDate' + number).innerText = formatDate(currentDate);
document.getElementById('forecastTemperature' + number).innerText =
Math.round(firstDay.main.temp) + '~' + Math.round(lastDay.main.temp) + '°C';
document.getElementById('forecastIcon' + number).src = 'http://openweathermap.org/img/wn/' + firstDay.weather[0].icon + '.png';
document.getElementById('forecastCondition' + number).innerText = firstDay.weather[0].main;
document.getElementById('forecastHumidity' + number).innerText = 'Humidity: ' + firstDay.main.humidity + '%';
document.getElementById('forecastWind' + number).innerText = 'Wind: ' + Math.round(firstDay.wind.speed * 3.6) + 'km/h';
}
});
</script>
Write Preview
Loading…
Cancel
Save