2012/11/6 13:08:53作者:佚名来源:网络
【实例名称】
JS代码实现全球的时间查看表
【实例描述】
在宾馆的大堂经常看到全球各地的一些时间,这也可用在宾馆或航空部门的网页上,用户可通过选择时区来查看不同地方的时间。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> </head> <body bgcolor="#cccccc" OnLoad="getTime(timezone, 0)"> <script language="JavaScript"> var timerRunning = false; var timezone = "格林尼治标准时间"; var adjust = 0; function getTime(tzone, diff) //获取指定时区的时间 { if (timerRunning) { clearTimeout(updatetime); timerRunning = false; } gmtOffset=eval(diff+adjust); //此处设置时区差别 timezone = tzone; checkDateTime(); } function checkDateTime () { var today = new Date(); //获取当前时间 var year = today.getYear() + 00; //获取年 var month = today.getMonth()+1; //获取月 var date = today.getDate(); //获取日期 var day = today.getDay(); //获取日 var hour = today.getHours(); //获取小时 var minute = today.getMinutes(); //获取分 var second = today.getSeconds(); //获取秒
var lastSat = date - (day+1); while (lastSat < 32) lastSat+=7; if (lastSat > 31) lastSat+=-7; var firstSat = date - (day+1); while (firstSat > 0) firstSat+=-7; if (firstSat < 1) firstSat+=7; if ((((month == 4) && (date >= firstSat)) || month > 4) && (month < 11 || ((month == 10) && day <= lastSat))) adjust += 60; yourOffset = (new Date()).getTimezoneOffset(); //当前计算机上的时间和UTC 之间相差的分钟数 yourOffset = yourOffset + adjust;
if ((((month == 4) && (date > 20)) || month > 4) && (month < 11 || ((month == 10) && day < 30))) adjust -= 60;
ourDifference = eval(gmtOffset - yourOffset); //根据本地时间和前面获取的与utc之间的差别 var half = eval(ourDifference % 60); //取60的余,剩下的是分钟数 ourDifference = Math.round(ourDifference / 60); //获取间隔的小时数 hour = eval(hour - ourDifference); //用本地小时-间隔的小时 var m = new Array("", "1","2","3", "4","5","6", "7","8","9", "10","11","12"); //月份数组 var leap = eval(year % 4); //判断闰年的变量(不太精确)
if ((half == -30) || (half == 30)) minute += 30; if (minute > 59) minute -= 60, hour++; //当超过60分钟时,小时数增加 if (minute < 0) minute += 60, hour--; //当小于60分钟时,小时数减少 if (hour > 23) hour -= 24, date += 1; //当超过24小时时,天数加1 if (((month == 4) || (month == 6) || (month == 9) || (month == 11)) && (date==31)) date = 1, month ++; //指定的月为30天,超过30,则月份加1 if (((month == 2) && (date > 28)) && (leap != 0)) date = 1, month ++; //2月份比较特殊 if ((month == 2) && (date > 29)) date = 1, month++; //非闰年时候的2月份 if (hour < 0) hour += 24, date --; //如果小时数小于0,则天数减1 if ((date == 32) && (month == 12)) month = m[1], date = 1, year++; //当超过一年时 if (date == 32) date = 1, month++; //当超过一月时 if ((date < 1) && (month == 1)) month= m[12], date = 31, year--; //当前月份为1月份时,如果天数小于1,则转到12月份 if (date < 1) date = 31, month --; //日子小于1时,月份减1 if (((month == 4) || (month == 6) || //一月30天的设置 (month== 9) || (month == 11)) && (date == 31)) date = 30; if ((month == 2) && (date > 28)) date = 29; //2月份的设置 if (((month == 2) && (date > 28)) && (leap != 0)) date=28; for (i=1; i<13; i++) { if (month == i) { month = m[i]; break; } }
var dateTime = hour; dateTime = ((dateTime < 10) ? "0":"") + dateTime; //显示两位数的时间 dateTime = " " + dateTime; dateTime += ((minute < 10) ? ":0" : ":") + minute; //显示两位数的分钟 dateTime += ((second < 10) ? ":0" : ":") + second; //显示两位数的秒 dateTime += (hour >= 12) ? "下午, " : "上午, "; //显示汉字:上午和下午 dateTime += year + "年" + month + "月" + date + "日" ; //显示年月日
document.clock.zonetime.value = dateTime; //显示所选时区的时间 document.clock.zonename.value = timezone; //显示选择的时区 updatetime=setTimeout("checkDateTime()", 1000); //定时更新时间-每隔1秒 timerRunning = true; } </script> <br> <form name=clock> <input type=text name=zonetime size=28> <br> <br> <b>当前选择的地区</b><br> <input type=text name=zonename size=21> <br> <br> <table border=1 cellpadding=5> <tr> <td align=center> <input type=button value="太平洋" onClick="getTime(this.value, +480)" name="button"> </td> <td align=center> <input type=button value="中心" onClick="getTime(this.value, +420)" name="button"> </td> <td align=center> <input type=button value="东方" onClick="getTime(this.value, +300)" name="button"> </td> </tr> <tr> <td align=center> <input type=button value="夏威夷" onClick=" getTime(this.value, +600)" name="button"> </td> <td align=center> <input type=button value="墨西哥" onClick="getTime(this.value, +360)" name="button"> </td> <td align=center> <input type=button value="新德里" onClick="getTime(this.value, -330)" name="button"> </td> </tr> <tr> <td align=center> <input type=button value="北京" onClick="getTime(this.value, -420)" name="button"> </td> <td align=center> <input type=button value="东京" onClick="getTime(this.value, -540)" name="button"> </td> <td align=center> <input type=button value="伦敦" onClick="getTime(this.value, +0)" name="button"> </td> </tr> </table> </form> </body> </html>
【运行效果】
【难点剖析】
本例的重点有两个:格林尼治时间的定义,以及当地时间与标准时间之间的时间差。全球被划分为24个时区,以通过英国格林尼治天文台的本初子午线为标准,其东西经度7.5度的范围为零时区,每个时区中央经线上的时间就是各时区的标准时间。“getTimezoneOffset”方法用来获取当地时间与UTC(标准时间)之间的时间差。因为此方法返回的是分钟数,所以可以通过“/60”的方式获取小时数,然后通过“%60”的方式获取剩余的分钟数。
【源码下载】
为了JS代码的准确性,请点击:全球的时间查看表 进行本实例源码下载
标签: 时间
相关文章
ip雷达 v5.0.2绿色版
详情WinSCPv5.15.1绿色中文版
详情filezilla client v5.5
详情wireshark中文版 v3.4.9
详情Boson Netsimv10.8破解版
详情风行播放器 v3.0.6.106
详情爱奇艺客户端 v10.1.0.6636官方版
详情搜狐影音 v7.0.19.0官方版
详情乐视视频 v7.3.2.192
详情华数tv客户端PC版 v1.1.2.0
详情cbox央视影音 v5.1.2.1经典版
详情软媒收音机(魔方) v1.13
详情倾听网络收音机 v3.0.0.0
详情魅影流声全球网络收音机 v1.0.0.1
详情酷狗电台 v8.2.75
详情暴龙网络收音机 v2.5.1
详情克莉2v1.0中文版
详情冬日计划v1.2中文版
详情刺客信条英灵殿v1.0吾爱破解版
详情刺客信条英灵殿终极v1.0免安装破解版
详情动物森友会v1.10.0最新破解版
详情哈迪斯杀出地狱v1.37中文破解版
详情嗜血印中文豪华版v1.0豪华版破解版 附游戏攻略秘籍
详情城市战斗v1.0中文破解版
详情尼尔人工生命v1.0steam免费破解版
详情尼尔人工生命升级版v1.0PC破解版
详情尼尔人工生命升级版v1.2247中文破解版
详情层层恐惧2中文破解版v1.0绿色免安装版
详情往日不再v1.0 steam破解版
详情往日不再v1.0pc破解版
详情救赎之路v1.0中文破解版
详情斯盖尔女仆v1.0中文破解版
详情新盗墓笔记官方版v1.215.589730
详情无尽的拉格朗日无限金币钻石版v1.2.267172破解版
详情明日之后无限小太阳版v1.0.246安卓版
详情双生幻想vivo版v6.6.83安卓版
详情剑网1归来内购免费版v1.1.116安卓版
详情模拟城市我是市长国际版v0.69.21342.22832安卓版
详情迷你世界999999迷你币版v1.20.5破解版
详情王牌战争无限内购版v9.7安卓版
详情云上城之歌不氪金版v10.16安卓版
详情王铲铲的致富之路破解版v1.1.8安卓版
详情创造与魔法无限点券版v1.0.0505安卓版
详情狩猎使命九游版v1.6.6.000
详情魔镜物语变态版v2.1.4无限金币版
详情黑月手游免费版v2.2.0安卓版
详情曙光英雄v1.0.12.0.20无限钻石版
详情原始传奇无限元宝版v1.6.806内购破解版
详情