风云二号气象卫星云图
因为项目需要,免费的API也没找到,所以自己用JS来扒取卫星云图
卫星云图url
(希望气象台的小哥不会改路径…)
首先是保存云图url,找路径规律,不同时间点url如下(以下url只做参考,实际已失效,中国气象台卫星云图应该是只留存了最近5小时内的10张图):
11.15:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214031500000.JPG
10.45:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214024500000.JPG
10.15:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214021500000.JPG
09.45:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214014500000.JPG
09.15:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214011500000.JPG
08.45:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214004500000.JPG
08.15:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214001500000.JPG
07.45:
http://image.nmc.cn/product/2017/12/13/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171213234500000.JPG
从上可知后面的数字为:年+月+日+时+分(url均为UTC时间,但图片上水印是北京时间)且半小时更新一次
代码:
window.οnlοad=function(){
//全局变量
var i=0;//图片序号
var t;//settimeout
var arr = new Array();
//获取整点过15分钟卫星云图url
function time15() {
var date1 = new Date();
//获取当前时间的时间戳
time1 = Date.parse(date1);
//当前时间减去5个小时
date1.setHours(date1.getHours() - 5);
//获取5小时前时间戳
time2 = Date.parse(date1);
var ok = 1;
while(ok) {
time1 = time1 - 1000 * 60 * 60; //每一小时执行一次
if(time1 < time2) {
ok = 0;
} else {
date2 = new Date(time1)
var hour = date2.getUTCHours().toString(); //utc时
var days = date2.getUTCDate().toString(); //utc天
var month = (date2.getUTCMonth() + 1).toString();
var years = date2.getUTCFullYear().toString();
if(hour.length == 1) {
hour = "0" + hour;
}
if(days.length == 1) {
days = "0" + days;
}
if(month.length == 1) {
month = "0" + month;
}
var str = "http://image.nmc.cn/product/" + years + "/" + month + "/" + days + "/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_" + years + month + days + hour + 15 + "00000.JPG"
arr.push(str)
}
}
}
time15();
//获取整点过45分钟卫星云图url
function time45(){
var date1 = new Date();
//获取当前时间的时间戳
time1 = Date.parse(date1);
//当前时间减去5个小时
date1.setHours(date1.getHours() - 5);
//获取5小时前时间戳
time2 = Date.parse(date1);
var ok = 1;
while(ok) {
time1 = time1 - 1000 * 60 * 60; //每一小时执行一次
if(time1 < time2) {
ok = 0;
} else {
date2 = new Date(time1)
var hour = date2.getUTCHours().toString(); //utc时
var days = date2.getUTCDate().toString(); //utc天
var month = (date2.getUTCMonth() + 1).toString();
var years = date2.getUTCFullYear().toString();
if(hour.length == 1) {
hour = "0" + hour;
}
if(days.length == 1) {
days = "0" + days;
}
if(month.length == 1) {
month = "0" + month;
}
var str = "http://image.nmc.cn/product/" + years + "/" + month + "/" + days + "/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_" + years + month + days + hour + 45 + "00000.JPG"
arr.push(str)
}
}
}
time45();
arr.sort()//数组排序
arr.reverse()//逆序
//页面加载完成渲染当前时期
var date=new Date();
document.getelementbyid('datetime').innerHTML=date.getFullYear()+"年"+(date.getmonth()+1)+"月"+date.getDate()+"日";
//页面加载所有的图片到一个对象,以免出现切换图片加载闪屏
var img={};
for(i=0;i<arr.length;i++){
img[i]=arr[i];
}
//页面加载完成渲染第一张
document.getElementById('map').src =img[0];
var map=document.getElementById('map');
//循环播放
function time(){
if(i<=0){
i=9;
}else{
i=i-1;
}
map.src = img[i];
t=setTimeout(time,1000)
}
function stop(){
clearTimeout(t);
}
//左侧箭头点击事件
document.getElementsByClassName('iconLeft')[0].οnclick=function(){
i=i+1;
if(i>9){
i=0;
}
document.getElementById('map').src = img[i];
}
//右侧箭头点击事件
document.getElementsByClassName('iconRight')[0].οnclick=function(){
i=i-1;
if(i<0){
i=9;
}
document.getElementById('map').src = img[i];
}
//判断icon类名
function isContains(str, substr) {
return new RegExp(substr).test(str);
}
//播放&暂停按钮
var boFang=document.getElementById('bofang');
boFang.οnclick=function(){
//切换播放&暂停icon,执行&停止clearTimeout自执行事件
var classVal=bofang.getAttribute("class");
if(isContains(classVal,"icon-bofang")){
classVal=classVal.replace("icon-bofang","icon-zanting");
boFang.setAttribute("class",classVal);
time();
}else{
classVal=classVal.replace("icon-zanting","icon-bofang");
boFang.setAttribute("class",classVal);
stop();
}
}
}
更新了一下,因为每次渲染都是字符串拼接导致切换一张图片会闪屏(浏览器特性),故把图片都预先加载到一个对象中,图片切换时直接调用对象,就不不会闪屏了。
相关阅读
///<summary> /// 获取标准北京时间 ///</summary> ///<returns></returns> public static Dat
推荐使用requests库,相比urllib使用要简介的多 requests向目标站点发送请求,获得一个HTTPresponse响应 import requests requests
使用ServletFileUpload 实现文件上传 和获取文件信息
1、我使用的是ServletFileUpload来实现同个form表单中图片和文字信息的同时上传(支持多文件上传),首先我们先看下前端JSP页面的实例
很多淘宝联盟新人还不太了解淘宝联盟隐藏券的有关操作,大家可能对于淘宝联盟还是比较陌生。但是淘宝联盟是可以领取影藏券的哦!那
js中currentStyle和getComputedStyle获取css样式区别
js中获取样式我了解到三种。一种是通过obj.offsetAttr来获取样式,通过这种方法来获取元素的宽高时,如果没有边框,可以正确获取,如果使