information-system/application/views/mobile_first/ch-weather-forecast.php

<div class="table-responsive" style="margin-bottom: 30px;">
    <table class="weather_info">
        <tbody>
        <tr>
            <td>
            <div class="day_weather today_weather">
            
                <p id="todayDate">...</p>
                <p id="todayTemperature">...</p>
                <p id="todayFahrenheit">...</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="forecastFahrenheit1">...</p>
                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon1"
                    src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
                <p id="forecastCondition1">...</p>
                <p id="forecastHumidity1">Humidity: ...</p>
                <p id="forecastWind1">Wind: ...</p>
            </div>
            </td>
            <td>
            <div class="day_weather">
                <p id="forecastDate2">...</p>
                
                <p id="forecastTemperature2">...</p>
                <p id="forecastFahrenheit2">...</p>
                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon2"
                    src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
                <p id="forecastCondition2">...</p>
                <p id="forecastHumidity2">Humidity: ...</p>
                <p id="forecastWind2">Wind: ...</p>
            </div>
            </td>
            <td>
            <div class="day_weather"> 
                <p id="forecastDate3">...</p>
               
                <p id="forecastTemperature3">...</p>
                <p id="forecastFahrenheit3">...</p>
                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon3"
                    src="https://data.chinahighlights.com/image/weather/icon-weather/50d.png" /></div>
                <p id="forecastCondition3">...</p>
                <p id="forecastHumidity3">Humidity: ...</p>
                <p id="forecastWind3">Wind: ...</p>
            </div>
            </td>
            <td>
            <div class="day_weather">
                <p id="forecastDate4">...</p>
                
                <p id="forecastTemperature4">...</p>
                <p id="forecastFahrenheit4">...</p>
                <div class="infoimage weather_img"><img alt="" class="img-responsive" id="forecastIcon4"
                    src="https://data.chinahighlights.com/image/weather/icon-weather/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">
                <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>
// https://openweathermap.org/forecast5
var cityId = window.ch_forecast_city.id;
var weekMap = new Array("SUN.", "MON.", "TUE.", "WED.", "THU.", "FRI.", "SAT.");
var monthMap = new Array("Jan.", "Feb.", "Mar.", "Apr.", "May.", "Jun.", "Jul.", "Aug.", "Sept.", "Oct.", "Nov.", "Dec.");

function formatDate(date) {
    return monthMap[(date.getMonth())] + ' ' + date.getDate();
}
function formatWeek(date) {
    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';
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('todayFahrenheit').innerText = Math.round(convertToF(json.main.temp)) + '℉';
        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('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('forecastFahrenheit' + number).innerText =
                Math.round(convertToF(firstDay.main.temp)) + ' ~ ' + Math.round(convertToF(lastDay.main.temp)) + '℉'; 
            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('forecastHumidity' + number).innerText = 'Humidity: ' + firstDay.main.humidity + '%';
            document.getElementById('forecastWind' + number).innerText = 'Wind: ' + Math.round(firstDay.wind.speed * 3.6) + 'km/h';
        }
    });
</script>