就是愛尚生活 - 94i3 Life

 找回密碼
 免費註册

Sign in with facebook

Connect with friends.

人氣: 2519|回復: 0

[展示] 即時PM2.5數值 程式碼

  [複製鏈接]
字體大小: 正常 放大

新浪微博達人勛

總積分排名︰1
簽到
2175
鮮花(68) 雞蛋(2)
累計在線
348724分鐘
發表於 2018-4-20 12:36:11 | 顯示全部樓層 |閱讀模式
  
zzzzftybju.PNG
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>PM2.5</title>
  7. </head>

  8. <body>
  9.     <div id="edimax" style="text-align:center;">
  10.         <a href="http://taqm.epa.gov.tw/taqm/tw/PsiMap.aspx" class="media" target="_blank"
  11.             title="http://taqm.epa.gov.tw/taqm/tw/PsiMap.aspx" rel="nofollow"><img id="avatar" src="//www.chps.tn.edu.tw/dokuwiki/_media/ajax-loader.gif"
  12.                 alt="" width="100" /></a>
  13.         <p><span id="status"></span></p>
  14.         <p style="font-size:1.5em;">
  15.             PM2.5數值:<span id="pm25" style="color:blue;font-weight:bolder;font-size:1.5em;"></span>μg/m³</p>
  16.         <canvas id="pm25_guage" style="width:200px;"></canvas><br>
  17.         <p>
  18.             溫度:<span id="t" style="color:blue;font-weight:bolder;font-size:1.5em;"></span>°C,溼度:
  19.             <span id="h" style="color:blue;font-weight:bolder;font-size:1.5em;"></span>%
  20.         </p>
  21.         最後更新時間<br><span class="" id="time"></span>
  22.     </div>

  23.     <script type="text/javascript" src="//bernii.github.io/gauge.js/dist/gauge.min.js"></script>
  24.     <script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
  25.     <script type="text/javascript">
  26.         var opts = {
  27.             lines: 12, // The number of lines to draw
  28.             angle: 0.15, // The length of each line
  29.             lineWidth: 0.44, // The line thickness
  30.             pointer:
  31.             {
  32.                 length: 0.9, // The radius of the inner circle
  33.                 strokeWidth: 0.035, // The rotation offset
  34.                 color: '#000000' // Fill color
  35.             },
  36.             limitMax: 'false', // If true, the pointer will not go past the end of the gauge
  37.             colorStart: '#6FADCF', // Colors
  38.             colorStop: '#8FC0DA', // just experiment with them
  39.             strokeColor: '#E0E0E0', // to see which ones work best for you
  40.             generateGradient: true,
  41.             percentColors: [
  42.                 [0.0, "#31cf00"],
  43.                 [0.36, "#31cf00"],
  44.                 [0.54, "#ff9a00"],
  45.                 [0.71, "#990000"],
  46.                 [1.0, "#ce30ff"]
  47.             ]
  48.         };
  49.     </script>
  50.     <script type="text/javascript">
  51.         function update_pm25()
  52.         {
  53.             var ts = (new Date()).getTime();
  54.             var mac = '74DA3895DF40';
  55.             if (location.hash) {
  56.                 mac = location.hash;
  57.                 mac = mac.replace(/#/, '');
  58.             }
  59.             $.ajax(
  60.             {
  61.                 url: "//query.yahooapis.com/v1/public/yql",
  62.                 jsonp: "callback",
  63.                 dataType: "jsonp",
  64.                 data:
  65.                 {
  66.                     q: "select * from json where url='https://pm25.lass-net.org/data/last.php?device_id=" +
  67.                         mac + "&ts=" +
  68.                         ts + "'",
  69.                     diagnostics: false,
  70.                     format: "json"
  71.                 },
  72.                 success: function(response)
  73.                 {
  74.                     console.log(response);
  75.                     var j = null;
  76.                     if (response.query.results.json.feeds.AirBox)
  77.                     {
  78.                         j = response.query.results.json.feeds.AirBox;
  79.                     }
  80.                     if (response.query.results.json.feeds.AirBox2)
  81.                     {
  82.                         j = response.query.results.json.feeds.AirBox2;
  83.                     }
  84.                     if (j) {
  85.                         var name = j.device;
  86.                         var pm25 = parseInt(j.s_d0);
  87.                         var t = j.s_t0;
  88.                         var h = j.s_h0;
  89.                         var time = new Date(j.timestamp);
  90.                         time = time.toLocaleString();
  91.                         var baseurl = '//www.chps.tn.edu.tw';
  92.                         var img = '/dokuwiki/_media/psi:1.png';
  93.                         var target = document.getElementById(
  94.                             'pm25_guage'); // your canvas element
  95.                         var gauge = new Gauge(target).setOptions(
  96.                             opts); // create sexy gauge!
  97.                         gauge.maxValue = 100; // set max gauge value
  98.                         gauge.animationSpeed = 32; // set animation speed (32 is default value)
  99.                         gauge.set(pm25); // set actual value
  100.                         if (pm25 < 36)
  101.                         { // 低
  102.                             img = '/dokuwiki/_media/psi:1.png';
  103.                             status =
  104.                                 '<span style="color:#31cf00">空品良好適合趴趴走</span>';
  105.                         }
  106.                         else if (pm25 < 54)
  107.                         { // 中
  108.                             img = '/dokuwiki/_media/psi:2.png';
  109.                             status =
  110.                                 '<span style="color:#ff9a00">可正常戶外活動,若不適者請戴口罩</span>';
  111.                         }
  112.                         else if (pm25 < 71)
  113.                         { // 高
  114.                             img = '/dokuwiki/_media/psi:3.png';
  115.                             status =
  116.                                 '<span style="color:#990000">不適者減少戶外活動,敏感族群建議戴口罩</span>';
  117.                         }
  118.                         else
  119.                         { // 非常高
  120.                             img = '/dokuwiki/_media/psi:4.png';
  121.                             status =
  122.                                 '<span style="color:#ce30ff">不適者減少戶外活動,敏感族群避免外出</span>';
  123.                         }
  124.                         $('#edimax #name').text(name);
  125.                         $('#edimax #pm25').text(pm25);
  126.                         $('#edimax #t').text(t);
  127.                         $('#edimax #h').text(h);
  128.                         $('#edimax #time').text(time);
  129.                         $('#edimax #avatar').attr('src', baseurl +
  130.                             img);
  131.                         $('#edimax #status').html(status);
  132.                     }
  133.                 }
  134.             });
  135.         }
  136.         $(document).ready(function()
  137.         {
  138.             update_pm25();
  139.             setInterval(update_pm25, 1000 * 60 * 5);
  140.         });
  141.     </script>
  142. </body>

  143. </html>
複製代碼

http://94i3.tw/life/home.php?mod=space&uid=1&do=blog&id=6820
https://airbox.edimaxcloud.com/


就是愛尚生活 - 94i3Life - 歡迎您 加入 !

回復 鮮花(68) 雞蛋(2)論壇版權

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免費註册 | 新浪微博登陸 Sign in with facebook

本版積分規則


快速回復 返回列表 聯繫我們 搜索

line|關于我們|聯絡我們|就是愛尚生活 - 94i3 Life |簡體中文

GMT+8, 2018-9-19 07:28 PM

Powered by 就是愛尚 - 94i3.tw - X3.2

© 2007-2018 愛上誠信。愛上精緻。愛上專業。愛上時尚。愛上分享

94i3就是愛尚是一個經驗分享筆記平台,網友均可以在94i3免費互相學習別人分享之經驗。
※本站只提供空間,網友自由發表使用,也請會員網友尊重「論壇規則」、「論壇注意事項」,本網站內容均從網路上收集或網友們提供,其內容及言論的完整性以及正確性並不代表本站立場,本站不負任何法律責任,均與本站無關。倘若文章、圖片或是內容言論等有任何問題,請「聯絡我們」,我們將會第一時間優先處理或刪除。

快速回復 返回頂部 返回列表