天气增加华氏度

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

@@ -1,5 +1,5 @@
 <div class="table-responsive" style="margin-bottom: 30px;">
-<table class="weather_info">
+    <table class="weather_info">
         <tbody>
         <tr>
             <td>
@@ -7,7 +7,7 @@
             
                 <p id="todayDate">...</p>Today      
                 <p id="todayTemperature">...</p>
-            <p id="todayTemperature0">...</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>
@@ -20,7 +20,7 @@
                 <p id="forecastDate1">...</p>
                 
                 <p id="forecastTemperature1">...</p>
-            <p id="todayTemperature1">...</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>
@@ -33,7 +33,7 @@
                 <p id="forecastDate2">...</p>
                 
                 <p id="forecastTemperature2">...</p>
-            <p id="todayTemperature2">...</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>
@@ -46,7 +46,7 @@
                 <p id="forecastDate3">...</p>
                
                 <p id="forecastTemperature3">...</p>
-            <p id="todayTemperature3">...</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>
@@ -59,7 +59,7 @@
                 <p id="forecastDate4">...</p>
                 
                 <p id="forecastTemperature4">...</p>
-            <p id="todayTemperature4">...</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>
@@ -72,7 +72,7 @@
                 <p id="forecastDate5">...</p>
                 
                 <p id="forecastTemperature5">...</p>
-            <p id="todayTemperature5">...</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>
@@ -82,8 +82,8 @@
             </td>
         </tr>
         </tbody>
-</table>
-</div>
+    </table>
+    </div>
 <script>
 // https://openweathermap.org/forecast5
 var cityId = window.ch_forecast_city.id;
@@ -95,6 +95,10 @@ function formatDate(date) {
 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) => {
@@ -109,6 +113,7 @@ fetch(weatherUrl)
         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 = 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('todayCondition').innerText = json.weather[0].main;
         document.getElementById('todayHumidity').innerText = 'Humidity: ' + json.main.humidity + '%';
@@ -156,10 +161,12 @@ fetch(forecastUrl)
             let lastDay = oneDayList[oneDayList.length - 1];
             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('forecastTemperature' + number).innerText =
                 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('forecastCondition' + number).innerText = firstDay.weather[0].main;
             document.getElementById('forecastHumidity' + number).innerText = 'Humidity: ' + firstDay.main.humidity + '%';