screen_weather.php 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <html>
  2. <head>
  3. <title>screen_weather</title>
  4. <style type="text/css">
  5. *{margin: 0;padding: 0px;}
  6. </style>
  7. </head>
  8. <body>
  9. <div style="width: 128px;height: 256px;background: #000;padding-left: 4px;padding-top: 7px;">
  10. <p style="margin-bottom: 5px;"><span style='line-height:15px;color:#fff;' id="time">2019-05-31 15:28:08</span></p>
  11. <p style='font-size:14px;color:#fff;line-height:19px;height: 20px;'>
  12. <span>温度:</span><span class="c" style="margin-left: 19px;">28.2</span>(°C)<br />
  13. <span>湿度:</span><span class="t" style="margin-left: 19px;">37.2</span>(RH)<br />
  14. <span>PM10:</span><span class="pm10" style="margin-left: 10px;">37</span>(μg/m³)<br />
  15. <span>PM2.5:</span><span class="pm25" style="margin-left: 7px;">32</span>(μg/m³)<br />
  16. <span>光照度:</span><span class="ill" style="margin-left: 5px;">86412</span>(lux)<br />
  17. <span>噪声:</span><span class="db" style="margin-left: 19px;">63.3</span>(db)
  18. </p>
  19. </div>
  20. </body>
  21. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  22. <script type="text/javascript">
  23. $(function(){
  24. var time = document.getElementById('time');
  25. time.innerHTML = get_time();
  26. function get_time() {
  27. var myDate = new Date();
  28. var year = myDate.getFullYear();
  29. var month = myDate.getMonth() + 1;
  30. month = month < 10 ? '0'+month : month;
  31. var day = myDate.getDate();
  32. day = day < 10 ? '0'+day : day;
  33. var h = myDate.getHours();
  34. h = h < 10 ? '0'+h : h;
  35. var m = myDate.getMinutes();
  36. m = m < 10 ? '0'+m : m;
  37. var s = myDate.getSeconds();
  38. s = s < 10 ? '0'+s : s;
  39. return year+'-'+month+'-'+day+' '+h+':'+m+':'+s;
  40. }
  41. var t1=window.setInterval(refreshCount, 1000);
  42. function refreshCount() {
  43. $('#time').text(get_time());
  44. }
  45. var t2=window.setInterval(get_data, 60000);
  46. function get_data() {
  47. $.post('/api/common/screen_weather',{weatherId:<?php echo $weatherId?>},function(data){
  48. if (data.code == '0000') {
  49. $('.c').text(data.data.temperature);
  50. $('.t').text(data.data.humidity);
  51. $('.pm10').text(data.data.PM10);
  52. $('.pm25').text(data.data.PM25);
  53. $('.ill').text(data.data.illumination);
  54. $('.db').text(data.data.noise);
  55. }
  56. },'json');
  57. }
  58. $.post('/api/common/screen_weather',{weatherId:<?php echo $weatherId?>},function(data){
  59. if (data.code == '0000') {
  60. $('.c').text(data.data.temperature);
  61. $('.t').text(data.data.humidity);
  62. $('.pm10').text(data.data.PM10);
  63. $('.pm25').text(data.data.PM25);
  64. $('.ill').text(data.data.illumination);
  65. $('.db').text(data.data.noise);
  66. }
  67. },'json');
  68. })
  69. // ajax({
  70. // url:'/api/common/screen_weather',
  71. // type:'POST',
  72. // dataType:'json',
  73. // data:{weatherId:"27"},
  74. // success:function(response,xml){
  75. // //请求成功后执行的代码
  76. // },
  77. // error:function(status){
  78. // //失败后执行的代码
  79. // }
  80. // });
  81. // function ajax(options){
  82. // options=options||{};
  83. // // optoins.type=(options.type||'GET').toUpperCase();
  84. // options.dataType=options.dataType||'json';
  85. // params=formatParams(options.data);
  86. // //创建-第一步
  87. // var xhr;
  88. // //非IE6
  89. // if(window.XMLHttpRequest){
  90. // xhr=new XMLHttpRequest();
  91. // }else{
  92. // //ie6及其以下版本浏览器
  93. // xhr=ActiveXObject('Microsoft.XMLHTTP');
  94. // }
  95. // //接收-第三步
  96. // xhr.onreadystatechange=function(){
  97. // if(xhr.readyState==4){
  98. // var status=xhr.status;
  99. // if(status>=200&&status<300){
  100. // options.success&&options.success(xhr.responseText,xhr.responseXML);
  101. // }else{
  102. // options.error&&options.error(status);
  103. // }
  104. // }
  105. // }
  106. // //连接和发送-第二步
  107. // if(options.type=='GET'){
  108. // xhr.open('GET',options.url+'?'+params,true);
  109. // xhr.send(null);
  110. // }else if(options.type=='POST'){
  111. // xhr.open('POST',options.url,true);
  112. // //设置表单提交时的内容类型
  113. // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  114. // xhr.send(params);
  115. // }
  116. // }
  117. // //格式化参数
  118. // function formatParams(data){
  119. // var arr=[];
  120. // for(var name in data){
  121. // arr.push(encodeURIComponent(name)+'='+encodeURIComponent(data[name]));
  122. // }
  123. // arr.push(('v='Math.random()).replace('.',''));
  124. // return arr.join('&');
  125. // }
  126. </script>
  127. </html>