您的位置：首页 > 其它

便捷访问KMA天气图

2015-12-09 13:53 411 查看

KMA天气图的链接地址是这样的：http://web.kma.go.kr/repositary/image/cht/img/up50_2015120900.png 后面的up50是500hpa高度，20151209是日期，00是UTC时次，对应北京时间08时。

这个链接如果访问起来是不方便的，需要每次手动修改链接里的时间和高度，如果要看连着好几个时次的天气图变化更不方便。所以写了几行js代码，自动加载最新时次的天气图，可以点击上一张下一张切换时间，还可以手动选择日期时间高度（时间不能距离现在太久，太久之前的天气图服务器上没有存档）。

海平面气压:高度选择中选'000'。

有一点要注意，22时的时候20时次的图没有出来，22时过了一段时间后才更新出来，为了避免图片加载空白，设置的是更新时次3小时后才采用更新的图片地址。比如22时30分打开，仍然显示14时的图，23时打开，才会显示晚上20时的图。（也可以手动点击下一张。）

天气图更新需要时间，比如说早上9点之前看不到当天08时次的图，因为还没更新，只能看凌晨02时次的图。可以跨月，比如当前位于12月1日02时次的时候，点击上一张，则访问11月30日20时次的图。

Chrome图：

在线查看：http://aeropig.github.io/kma.html

github在国内有的时候访问速度慢。也可以把下面的代码保存成 .html 文件（确保是.html后缀而不是.html.txt）主流浏览器都可以使用。

（如果用某些浏览器打开，如果需要手动敲入日期，需要注意，月份和日期如果小于10，前面要加0，比如'2015-01-01'）

默认打开显示最近更新的500hpa图。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>KMA天气图</title>
<style>#header a{padding-left:1%}#footer a{padding-right:1%}#footer{text-align:center}</style>
</head>
<body>
<div id='header'>
日期：<input type='date' id='date'/>
时次：<select id='hh'><option value='02'>02</option><option value='08'>08</option><option value='14'>14</option><option value='20'>20</option></select>
Hpa：
<select id='hpa'><option value='up50'>500</option><option value='up70'>700</option><option value='up85'>850</option>
<option value='up92'>925</option><option value='sfc3'>000</option><option value='up30'>300</option><option value='up20'>200</option><option value='up10'>100</option></select>
<a href='#' onclick='reloadPic()'>载入图片</a><a href='#' onclick='last_next(-1)'>上一张</a><a href='#' onclick='last_next(1)'>下一张</a>
<a href='#' onclick='startPic()' id='run'>从当前选择时间开始动画</a><a href='#' onclick='endPic()' id='stop' style='display: none'>结束动画</a>
</div><br/>
<img id='pic' alt='Weather Chart'/><hr/>
<div id='footer'>微博：<a href='http://weibo.com/aeropig7' target='_blank'>西安气象爱好者</a>邮箱：<u>aeropig@163.com</u></div>
<script>function loadPic(){var d,e,f,g,h,a=new Date,b=a.getFullYear(),c=a.getMonth()+1;10>c&&(c='0'+c),d=a.getDate(),10>d&&(d='0'+d),e=b+'-'+c+'-'+d,f=a.getHours(),f>=23?f='20':f>=17?f='14':f>=11?f='08':f>=5?f='02':(f='20',g=chTime(e+'00',-4),e=g.substr(0,4)+'-'+g.substr(4,2)+'-'+g.substr(6,2)),document.getElementById('hh').value=f,document.getElementById('date').value=e,h=chTime(e+f,-8),document.getElementById('pic').src='http://web.kma.go.kr/repositary/image/cht/img/up50_'+h+'.png'}function reloadPic(){var a=document.getElementById('date').value,b=document.getElementById('hh').value,c=chTime(a+b,-8),d=document.getElementById('hpa').value;document.getElementById('pic').src='http://web.kma.go.kr/repositary/image/cht/img/'+d+'_'+c+'.png'}function last_next(a){var f,b=0>a?-6:6,c=document.getElementById('date').value,d=document.getElementById('hh').value,e=chTime(c+d,b);document.getElementById('date').value=e.substr(0,4)+'-'+e.substr(4,2)+'-'+e.substr(6,2),document.getElementById('hh').value=e.substr(8,2),f=document.getElementById('hpa').value,e=chTime(c+d,b-8),document.getElementById('pic').src='http://web.kma.go.kr/repositary/image/cht/img/'+f+'_'+e+'.png'}function chTime(a,b){var c=parseInt(a.substr(0,4)),d=parseInt(a.substr(5,2))-1,e=parseInt(a.substr(8,2)),f=parseInt(a.substr(10,2)),g=new Date(c,d,e,f+b);return c=g.getFullYear(),d=g.getMonth()+1,e=g.getDate(),f=g.getHours(),d=d>=10?d:'0'+d,e=e>=10?e:'0'+e,f=f>=10?f:'0'+f,c+''+d+e+f}function startPic(){reloadPic(),document.getElementById('run').style.display='none',document.getElementById('stop').style.display='inline',intPic=setInterval(function(){var a,b,c,d;return document.getElementById('run').href='#',a=document.getElementById('date').value.split('-'),b=document.getElementById('hh').value,c=(new Date).getTime(),d=new Date(a[0],a[1]-1,a[2],parseInt(b)).getTime(),324e5>c-d?(document.getElementById('run').style.display='inline',document.getElementById('stop').style.display='none',window.clearInterval(intPic),void 0):(last_next(1),void 0)},2e3)}function endPic(){document.getElementById('run').style.display='inline',document.getElementById('stop').style.display='none',clearInterval(intPic)}window.onload=loadPic</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航