blueyanghualong
- 浏览: 228580 次
- 性别:
- 来自: 杭州
-
文章分类
最新评论
-
yjz毕竟是云：
总结的不错！
字符流与字节流的区别 -
yiqing：
不错 有帮助
HTTP Basic Authentication认证 -
assertme：
a8350020 写道第一种方法的线程池其实是没有意义的Fut ...
线程返回值的方式介绍 -
a8350020：
第一种方法的线程池其实是没有意义的Future.get()会阻 ...
线程返回值的方式介绍 -
endual：
一个上午都无法配置好的我的eclipse使用svn 哎。。。
总结一下SVN的用法
Js DATE类学习
在第4章中，我们讨论了JavaScript中的日期和时间，在JavaScript中，日期和时间是通过Date对象来描述的。我们还学习了Date对象的一些属性和方法，例如：
● Date对象的getDate()、getDay()、getMonth()和getFullYear()方法，用以从Date对象中获取相应的日期值。
● Date对象的setDate()、setMonth()和 setFullYear()方法，用以设置一个已有的Date对象相应的日期值。
● Date对象的getHours()、getMinutes()、getSeconds()和getMilliseconds()方法，用以从Date对象中获取相应的时间值。
● Date对象的setHours()、setMinutes()、setSeconds()和 setMilliseconds()方法，用以设置一个已有的Date对象相应的时间值。
但是在第4章中，我们并没有讨论时区的概念，即世界上不同的地理位置处于不同的时区。在本章中，我们将学习本地日期时间与世界时(world time)的关系，并修正前面所忽略的问题。
例如，假如在你的Web站点上具有一个聊天室，如果你想在某一指定的日期和时间组织一次聊天会。如果你的网站吸引了其他国家的访客，那么简单地将聊天会的时间定为15:30开始就不太好。这是因为15:30可以是美国东部标准时间，也可以是太平洋标准时间、或者是英国时间，甚至是吉隆坡时间。当然，我们也可以说明是15:30 EST，即美国东部标准时间15:30，然后让访客自己去计算他所在时区的时间，但这样做并非就能够万无一失，因为不但美国有东部标准时间(EST)，澳大利亚同样也有EST。如果能自动地将该时间转换为访客所在时区的时间，那岂不是更好？在本章中，我们将介绍如何实现这种转换。
除了介绍世界时外，在本章中还将介绍如何在Web页面中创建计时器(timer)。使用计时器，可以每隔一定时间间隔就触发一次代码的执行，也可以在指定的时间间隔之后执行一次某段代码(例如，在页面加载之后5秒执行某段代码)。在本章中，我们将介绍如何使用计时器在Web页面上创建一个实时显示时间的时钟，以及利用计时器在浏览器窗口的状态栏中创建滚动的文本信息。在Web应用程序中，计时器是非常有用的，它还可以用来创建动画或者页面特效。最后，我们将把计时器应用在“在线小测试”程序中，以允许用户为回答问题设置一个时限。
9.1 世界时(World Time)
“现在”这个概念的含义指的是不同地点在此刻的同一时间。但是，此刻的时间是用数字来表示的，在不同的时区，该数字是不同的。因此，我们需要一种标准的时间值，来表示不同地点的同一时间。这就是协调世界时(Coordinated Universal Time，UTC)，该标准于1964年执行，是国际性的民用和科学记时的基础。它的前身是格林尼治标准时间(Greenwich Mean Time，GMT)，实际上，UTC时间0:00正是伦敦格林尼治的午夜。
表9-1显示了UTC时间0:00时，世界各地的本地时间：
表 9-1
圣弗朗西斯科
纽约(EST)
伦敦，格林尼治
德国，柏林
日本，东京
下午 4:00
下午 7:00
0:00 (午夜)
上午 1:00
上午 9:00
注意：
上表给出的是各地的冬季时间—— 夏令时没有考虑在内。
JavaScript中的Date对象提供了许多方法以支持UTC时间，这些方法与前面看到的那些日期时间的方法非常类似。对于每一个set或get类型的日期时间方法，都具有一个相应的UTC时间方法。例如，对于用以设置Date对象本地时间的小时值的setHours()方法,相应地具有一个setUTCHours()方法，用以设置UTC时间的小时值。在下面的小节中，我们将详细介绍这些方法。
另外，Date对象的很多方法都包含了对应于世界时的方法。
Date对象具有toUTCString()方法和toLocaleString()方法，toUTCString()方法将把Date对象中保存的UTC日期和时间以一个字符串的形式返回，而toLocaleString()方法将把Date对象中保存的本地日期和时间以一个字符串的形式返回。大部分现代浏览器都支持一些附加的方法，如toLocaleTimeString()、toTimeString()、toLocaleDateString()和toDateString()方法。
如果只想计算当前本地时间与UTC时间之间的差值，只需使用getTimezoneOffset()方法。如果当前时区在UTC之后，如美国的时区，getTimezoneOffset()方法将返回一个正数。如果当前时区在UTC之前，如澳大利亚或日本，则getTimezoneOffset()方法将返回一个负数。
下面的代码演示了Date对象的toLocaleString()、toUTCString()、getTimezoneOffset()、toLocaleTimeString()、toTimeString()、toLocaleDateString()和toDateString()方法的使用，并将相应的日期时间值输出在页面上。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>example</title>
<script language="JavaScript" type="text/javascript">
var localTime = new Date();
</script>
</head>
<body>
<h4>
UTC Time is
<script language="JavaScript" type="text/javascript">
document.write(localTime.toUTCString());
</script>
</h4>
<h4>
Local Time is
<script language="JavaScript" type="text/javascript">
document.write(localTime.toLocaleString());
</script>
</h4>
<h4>
Time Zone Offset is
<script language="JavaScript" type="text/javascript">
document.write(localTime.getTimezoneOffset());
</script>
</h4>
<h4>
Using toLocalTimeString() gives:
<script language="JavaScript" type="text/javascript">
if (localTime.toLocaleTimeString)
{
document.write(localTime.toLocaleTimeString())
}
</script>
</h4>
<h4>
Using toTimeString() gives:
<script language="JavaScript" type="text/javascript">
if (localTime.toTimeString)
{
document.write(localTime.toTimeString() )
}
</script>
</h4>
<h4>
Using toLocaleDateString() gives:
<script language="JavaScript" type="text/javascript">
if (localTime.toLocaleDateString)
{
document.write(localTime.toLocaleDateString())
}
</script>
</h4>
<h4>
Using toDateString() gives:
<script language="JavaScript" type="text/javascript">
if (localTime.toDateString)
{
document.write(localTime.toDateString())
}
</script>
</h4>
</body>
</html>
将上面的代码保存为timetest.htm，并在浏览器中加载该文件。你所看到的页面将因运行该页面的计算机所处的时区的不同而不同。但是，浏览器中的页面将与图9-1显示的页面类似：
图 9-1
这里，当前计算机的时间是美国东部标准时间(例如，纽约)2006年9月26日上午10:59:10。
代码解说
上面的代码是怎样运行的呢？在页面顶部的脚本块中，定义了一个Date对象，如下面这行代码所示：
var localTime = new Date();
该代码将创建一个新的Date对象，并将该Date对象初始化为客户端计算机的当前日期和时间(注意，实际上Date对象只是简单地保存一个毫秒数，该毫秒数是自1970年1月1日0时0分0秒0毫秒到客户端计算机当前日期时间的毫秒数)。
在页面代码中，具有8个脚本块，其中使用了3个世界时的方法。注意，一些方法被放在了if条件判断语句中，例如下面的语句：
if (localTime.toLocaleTimeString)
{
document.write(localTime.toLocaleTimeString())
}
该if语句用以检查浏览器是否支持toLocaleTimeString()方法，如果浏览器支持toLocaleTimeString()方法，才能使用该方法。一些低版本的浏览器并不支持所有的日期/时间方法，因此需要先进行检查以避免发生难堪的错误。
下面的代码将把toUTCString()方法返回的字符串输出到页面上：
document.write(localTime.toUTCString());
其中的toUTCString()方法将把Date对象localTime中的日期/时间转换为相应的UTC日期/时间。
接着，下面的代码将把toLocaleString()方法返回的本地日期/时间输出到页面上：
document.write(localTime.toLocaleString());
当前时间是用户计算机的时间，并且该方法返回的字符串可能是夏令时(如果计算机被调整为夏令时的话)。
接下来，下面的代码则输出本地时间与UTC时间之间的差值：
document.write(localTime.getTimezoneOffset());
在图9-1中可以看到，纽约时间与UTC时间之间的差是240分钟，或者说是4小时。但是在前面的表格中，我们已经看到纽约时间是位于UTC时间之后5小时，这是怎么回事呢？
其实，这是由于在纽约的9月26日，正在使用夏令时。使用夏时制时，当UTC时间为0:00时，纽约时间为下午8:00；而对于冬季时间，当UTC时间为0:00时，纽约时间为下午7:00。因此，在使用夏时制时，getTimezoneOffset()方法将返回240分钟的差值，而当使用冬季时间时，getTimezoneOffset()方法将返回300分钟的差值。
请对比图9-1和图9-2，在图9-2中，计算机的时间被提前了2个月。
图 9-2
下面是两个方法：toLocaleTimeString()方法和toTimeString()方法，如下所示：
<h4>
Using toLocalTimeString() gives:
<script language="JavaScript" type="text/javascript">
document.write(localTime.toLocaleTimeString())
</script>
</h4>
<h4>
Using toTimeString() gives:
<script language="JavaScript" type="text/javascript">
document.write(localTime.toTimeString() )
</script>
</h4>
这些方法用以显示Date对象中日期/时间的时间部分。toLocaleTimeString()方法用以显示用户计算机上的本地时间。第二个方法toTimeString()则用以显示时间部分，另外在时间值之后加上相应的时区(在本例中，即EST，表示美国东部标准时间)。
最后两个函数用以显示日期/时间的日期部分。其中，toLocaleDateString()方法将按用户计算机上设定的格式显示日期。在Windows操作系统中，可以通过Windows系统控制面板的“区域和语言选项”来设置日期显示的格式。但是，由于该函数依赖于用户计算机的设置，因此对于不同的计算机，该函数所显示的日期形式将有所不同。toDateString()方法将以标准格式显示用户计算机上的当前日期。
当然，上面的这个例子依赖于用户计算机的时钟设置是否正确，很多用户可能错误地设置了自己计算机的时区，因此并不能保证时区100%正确。
设置和获取Date对象的UTC日期/时间
在创建一个新的Date对象时，可以将其初始化为一个日期/时间值，或者默认地让JavaScript将该Date对象初始化为当前的日期和时间。无论哪一种方法，JavaScript都会把Date对象设置为本地的日期/时间。如果要将Date对象设置为UTC时间，则应该采用setUTC类型的方法，例如：setUTCHours()。
下面列出了7个用于设置UTC日期/时间的方法：
● setUTCDate()
● setUTCFullYear()
● setUTCHours()
● setUTCMilliseconds()
● setUTCMinutes()
● setUTCMonth()
● setUTCSeconds()
这些函数的名称已经说明了函数的实际功能。因此，让我们直接来看一个实际的例子，在该例子中将设置UTC时间。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<script language= "JavaScript" type="text/javascript">
var myDate = new Date();
myDate.setUTCHours(12);
myDate.setUTCMinutes(0);
myDate.setUTCSeconds(0);
document.write("<h3>" + myDate.toUTCString() + "</h3>")
document.write("<h3>" + myDate.toLocaleString() + "</h3>")
</script>
</body>
</html>
将上面的代码保存为settimetest.htm文件。在浏览器中加载该文件，将看到如图9-3所示的页面，页面上显示的实际日期将依赖于当前计算机所在的时区和当前的日期。
我们可以修改计算机上时区或者年份及时间的设置，以测试在不同时区或者夏时制时页面的变化。例如我现在在英国，我可以将当前计算机上的设置修改为美国东部标准时间，以对上面的例子进行测试。在Windows系统中，可以打开控制面板，双击“日期/时间”图标进行设置。
那么，这个例子的功能是什么呢？首先声明了一个变量myDate，并将其初始化为一个新的Date对象。由于使用了默认构造函数，并未将该Date对象设置为任何指定的日期时间值，因此该Date对象将包含当前的日期和时间。
图 9-3
接着，使用setUTC类型的方法，对小时、分钟和秒进行了设置，即将时间设置为12:00:00 UTC(注意是中午，而不是午夜)。
接下来，将myDate输出为一个UTC时间的字符串，即当前日期和UTC时间12:00:00。但是，当我们将Date对象输出为一个本地时间字符串时，将得到一个当前的日期和一个将UTC时间12:00:00转换为相应的本地时间的值。当然，本地时间的值依赖于用户计算机的当前时区。例如由于夏令时的缘故，在夏季，UTC时间12:00:00将是纽约时间08:00:00，而在冬季则是纽约时间07:00:00。在英国，UTC时间12:00:00的冬季时间将是12:00:00，而夏季时间将是13:00:00。
与设置UTC的日期/时间类似，为了获取UTC的日期/时间，相应地具有获取UTC日期和时间的方法。不同之处在于，获取UTC日期/时间使用的是getUTC类型的方法，例如，对于setUTCHours()方法，相应地具有getUTCHours()方法。
● getUTCDate()
● getUTCDay()
● getUTCFullYear()
● getUTCHours()
● getUTCMilliseconds()
● getUTCMinutes()
● getUTCMonth()
● getUTCSeconds()
值得注意的是，对于获取UTC的日期/时间，具有一个额外的方法，即getUTCDay()方法。getUTCDay()方法的功能与getDay()方法类似，它返回一个表示星期几的数字，其中，0表示星期日，6表示星期六。由于只要确定了年、月、日，就能唯一地确定星期几，因此，setUTC类型的方法中并没用setUTCDay()方法。
在介绍计时器之前，让我们应用上面学到的关于Date对象和世界时的新知识来创建一个世界时转换器。在本章稍后的内容中，在学习了如何使用计时器之后，我们将把该世界时转换器升级为一个世界时的时钟。
世界时转换器包含两个页面。第一个页面是一个框架集页面，第二个是包含世界时转换器表单的页面。下面是需要创建的第一个页面，即框架集页面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
</head>
<frameset cols="250,*" frameborder="0">
<frame src="worldtimeconverter.htm" name=formFrame>
<frame src="about:blank" name=resultsFrame>
</frameset>
</html>
上面的框架集只是简单地将页面分为两个框架页。由于框架集的边框被设置为0，因此该框架集看起来就像是一个页面。将该框架集页面保存为WorldTimeConverter Frameset.htm文件。
左边的框架页包含了一个表单，用户可以在该表单中选择一个城市，右边的框架页中将显示转换的结果。由于右框架页中的页面是通过代码生成的，因此在这里并不需要创建右框架页中的页面文件。
左框架页的代码如下所示：
<html>
<head>
<script language="javascript" type="text/javascript">
var timeDiff;
var selectedCity;
var daylightSavingAdjust = 0;
function updateTimeZone()
{
var lstCity = document.form1.lstCity;
timeDiff = lstCity.options[lstCity.selectedIndex].value;
selectedCity = lstCity.options[lstCity.selectedIndex].text;
updateTime();
}
function getTimeString(dateObject)
{
var timeString;
var hours = dateObject.getHours();
if (hours < 10)
hours = "0" + hours;
var minutes = dateObject.getMinutes();
if (minutes < 10)
minutes = "0" + minutes;
var seconds = dateObject.getSeconds()
if (seconds < 10)
seconds = "0" + seconds;
timeString = hours + ":" + minutes + ":" + seconds;
return timeString;
}
function updateTime()
{
var nowTime = new Date();
var resultsFrame = window.top.resultsFrame.document;
resultsFrame.open()
resultsFrame.write("Local Time is " + getTimeString(nowTime) + "<br>");
nowTime.setMinutes(nowTime.getMinutes() + nowTime.getTimezoneOffset() +
parseInt(timeDiff) + daylightSavingAdjust);
resultsFrame.write(selectedCity + " time is " + getTimeString(nowTime));
resultsFrame.close();
}
function chkDaylightSaving_onclick()
{
if (document.form1.chkDaylightSaving.checked)
{
daylightSavingAdjust = 60;
}
else
{
daylightSavingAdjust = 0;
}
updateTime();
}
</script>
</head>
<body onload="updateTimeZone()">
<form name=form1>
<select size=5 name=lstCity language=JavaScript onchange=
"updateTimeZone();">
<option value=60 selected>Berlin
<option value=330>Bombay
<option value=0>London
<option value=180>Moscow
<option value=-300>New York (EST)
<option value=60>Paris
<option value=-480>San Francisco (PST)
<option value=600>Sydney
</select>
<p>
It’s summertime in the selected city
and its country adjusts for summertime daylight saving
<input type="checkbox" name=chkDaylightSaving language=JavaScript
onclick="return chkDaylightSaving_onclick()">
</p>
</form>
</body>
</html>
将该页面保存为WorldTimeConverter.htm文件。然后在浏览器中加载框架集页面WorldTimeConverterFrameset.htm。
该表单如图9-4所示。无论何时，当用户单击了下拉列表框中的一个城市，右框架页中将显示用户计算机的本地时间以及所选中城市对应的时间。在如图9-4所示的例子中，本地时区被设置为美国东部标准时间(如纽约时间)，而所选中的城市为Berlin(柏林)，并且表示夏令时的复选框已经被选中。
图 9-4
需要指出的是，该例子仅仅作为演示使用，并不是一个无懈可击的程序，原因在于夏令时的问题。某些国家并没用使用夏令时，一些国家则在一年中固定的时期使用夏令时，还有的国家在一年中不同的时间使用夏令时。这使得我们难以在程序中准确地预设某个国家使用夏令时的时期。因此，为了解决这个问题，我们在页面中加入了一个复选框，以允许用户在选择一个城市时，可以自己设置该城市是否使用了夏令时，并且，我们假定用户所选择的城市的夏令时是提前1小时。
另外，还有一个难以避免的问题就是，一些用户可能错误地设置了自己所在的时区。这样一来，该程序的运行结果将与预想的不同。
代码解说
我们先来看一下框架集的定义页面，即WorldTimeConverterFrameset.htm页面。之后再考察WorldTimeConverter.htm页面。
<frame src="about:blank" name=resultsFrame>
在上面的代码中，将右框架页的src属性设置为"about:blank"。对于某些浏览器来说这是必需的，特别是Netscape浏览器—— 如果不将src属性设置为"about:blank"，则由于没有任何页面加载在框架页中，使用document.write()方法向页面写入内容时就可能会造成错误。注意，就目前的情况而言，该示例在Opera 7浏览器中将不能正常运行。如果要使之正常运行，还需要创建一个空白的HTML页面，并在resultsFrame框架页中加载该空白页面。
下面我们将讨论WorldTimeConverter.htm页面，该页面是实现本例功能的关键。在该页面的表单中，使用<select>标记定义了一个下拉列表框：
<select size=5 name=lstCity language=JavaScript onchange=
"updateTimeZone();">
<option value=60 selected>Berlin
<option value=330>Bombay
<option value=0>London
<option value=180>Moscow
<option value=-300>New York (EST)
<option value=60>Paris
<option value=-480>San Francisco (PST)
<option value=600>Sydney
</select>
每一个option元素表示一个选项，该选项在下拉列表框中显示一个城市的名称，选项的值为该城市所在时区(冬季时间)与UTC时间之间相差的分钟数。因此，对于伦敦，该地区使用的就是UTC时间，因此该选项的值为0。对于巴黎，其所在时区在UTC时间之前1小时，因此巴黎选项的值为60(即60分钟)。对于纽约，其所在时区在UTC时间之后5小时，因此纽约选项的值为–300。
在代码中捕获了<select>元素的change事件，并将该事件处理器连接到了updateTimeZone()函数，该函数定义于脚本代码块的顶部。在updateTimeZone()函数中，使用了如下所示的三个全局变量，这三个变量是在脚本块的顶部定义的。
var timeDiff;
var selectedCity;
var daylightSavingAdjust = 0;
在updateTimeZone()函数中，将更新其中两个全局变量的值，即将变量timeDiff的值设置为下拉列表框中被选中项的值(即所选中城市时间与UTC时间之间的差值)，并将变量selectedCity的值设置为下拉列表框中被选中项的文本(即所选中城市的名称)。
function updateTimeZone()
{
var lstCity = document.form1.lstCity;
timeDiff = lstCity.options[lstCity.selectedIndex].value;
selectedCity = lstCity.options[lstCity.selectedIndex].text;
在updateTimeZone()函数的最后，调用了updateTime()函数，如下面的代码所示：
updateTime();
}
在介绍updateTime()函数之前，我们先来看一下页面表单底部的复选框。当用户在下拉列表框中选中的城市是在夏季使用夏令时的城市时，用户可以选中该复选框以表示使用夏令时。
<input type="checkbox" name=chkDaylightSaving language=JavaScript
onclick="return chkDaylightSaving_onclick()">
可以看到，复选框的click事件连接到了另一个函数：chkDaylightSaving_onclick()。
function chkDaylightSaving_onclick()
{
if (document.form1.chkDaylightSaving.checked)
{
daylightSavingAdjust = 60;
}
else
{
daylightSavingAdjust = 0;
}
在上面代码的if语句中，使用了复选框的checked属性，如果复选框被选中则checked属性返回true，否则返回false。如果复选框已经被选中，则将daylightSavingAdjust变量的值设置为60，以表示夏令时，否则将其设置为0。
updateTime();
}
在chkDaylightSaving_onclick()函数的结尾，再次调用了updateTime()函数。下面我们来分析一下updateTime()函数。
在updateTime()函数中，将当前时间和所选中城市时区的相应时间输出在右框架页中，即名为resultsFrame的框架页，该框架页已经在框架集中定义过。
在updateTime()函数的开始，定义了一个新的Date对象，并保存在变量nowTime之中。该Date对象将被初始化为当前的本地时间。
function updateTime()
{
var nowTime = new Date();
接下来，为了使代码更简洁易读，我们定义了一个变量resultsFrame，用以引用包含在resultsFrame框架页中的document对象：
var resultsFrame = window.top.resultsFrame.document;
通过变量resultsFrame就可以引用resultsFrame框架页中的document对象，以打开文档并进行输入。document对象的open()方法将清除当前文档中的任何内容，并提供一个空白的文档以供输入HTML。首先，在文档中输入的是nowTime对象中保存的本地时间。但是，我们希望将时间以一个良好的格式来显示，如“小时:分钟:秒”的格式，因此，需要另一个函数getTimeString()，以完成格式化显示的功能。稍后我们将讨论getTimeString()函数。
resultsFrame.open()
resultsFrame.write("Local Time is " + getTimeString(nowTime) + "<br>");
上面的代码将当前的时间输出在resultsFrame框架页中，接下来，我们将计算所选中城市所在时区的时间，然后输出到resultsFrame框架页中。
在第4章中，我们已经知道，如果将一个Date对象各部分的值(如小时、分钟或秒钟)设置为超过其正常范围的值时，JavaScript将假定你要对相应的日期、小时或者分钟进行调整。例如，如果把某个Date对象所保存日期的小时数设置为36，则JavaScript将把日期加上1天，然后把小时数设置为12。下面的代码利用了JavaScript的这个特性：
nowTime.setMinutes(nowTime.getMinutes() + nowTime.getTimezoneOffset() +
parseInt(timeDiff) + daylightSavingAdjust);
让我们分析一下上面的代码，看看这段代码是如何工作的。假定你在纽约，纽约的现在时间是夏季时间5:11，而我们想知道柏林时间现在是几点，这该如何计算呢？
首先，获取当前本地时间的分钟数，现在是5:11，因此，nowTime.getMinutes()将返回分钟数11。
第二步，以分钟为单位，使用nowTime.getTimezoneOffset()方法，计算用户本地时间与UTC时间的差值。如果现在你在纽约，由于纽约夏季时间与UTC时间相差4小时，即相差240分钟。
第三步，计算所选中城市的标准冬季时间与UTC时间差值的整数，并将该值保存在变量timeDiff中。在这里，我们使用了parseInt()函数，这是由于如果不将差值字符串转换为数值，则JavaScript将假定我们要把两个字符串连接在一起，而不是把两个数字加起来求和。值得注意的是，变量timeDiff中保存的是HTML元素的值，而HTML元素的值都是字符串类型，即使字符串中的字符都是数字字符，该值也仍然是一个字符串类型的值。对于柏林来说，柏林时间与UTC时间相差60分钟，因此，变量timeDiff的值为60。
最后，在分钟数上再加上变量daylightSavingsAdjust的值。该变量的值是在函数chkdaylightsaving_onclick()中设置的，稍后我们将讨论这个函数。因为在夏季，柏林将使用夏令时，因此变量daylightSavingsAdjust的值为60。
因此，上面的代码将计算如下所示的表达式：
11 + 240 + 60 + 60 = 371
这样，nowTime.setMinutes()方法中的参数将被设置为371分钟。显然，小时之后的分钟数不可能为371，因此JavaScript将假定371分钟表示5:00之后的6小时11分，即11:11—— 这正是我们所需要的柏林时间。
在updateTime()函数的最后，将所选中城市的时间输出在resultsFrame框架页中，然后关闭文档的输入。
resultsFrame.write(selectedCity + " time is " + getTimeString(nowTime));
resultsFrame.close();
}
在updateTime()函数中，使用了getTimeString()函数以格式化时间字符串。下面将讨论getTimeString()函数。该函数接收一个Date对象作为参数，并根据该Date对象来创建一个形如“小时:分钟:秒”的字符串。
function getTimeString(dateObject)
{
var timeString;
var hours = dateObject.getHours();
if (hours < 10)
hours = "0" + hours;
var minutes = dateObject.getMinutes();
if (minutes < 10)
minutes = "0" + minutes;
var seconds = dateObject.getSeconds()
if (seconds < 10)
seconds = "0" + seconds;
timeString = hours + ":" + minutes + ":" + seconds;
return timeString;
}
为什么要用这个函数来格式化时间字符串呢？为什么不使用下列形式的字符串呢？
getHours() + ":" + getMinutes() + ":" + getSeconds()
这是由于上面形式的字符串不能对小于10的小时、分钟或者秒值进行相应的格式化，例如，12点过1分，按上面的格式将显示为12:1:00，而我们需要的是12:01:00。
因此，在getTimeString()函数中，分别获取了小时、分钟和秒的值，并检查是否小于10。如果小于10的小时、分钟或秒，则在前面添加一个0字符。当对小时、分钟和秒检查完毕，再把小时、分钟、秒连接成一个字符串，返回给函
● Date对象的getDate()、getDay()、getMonth()和getFullYear()方法，用以从Date对象中获取相应的日期值。
● Date对象的setDate()、setMonth()和 setFullYear()方法，用以设置一个已有的Date对象相应的日期值。
● Date对象的getHours()、getMinutes()、getSeconds()和getMilliseconds()方法，用以从Date对象中获取相应的时间值。
● Date对象的setHours()、setMinutes()、setSeconds()和 setMilliseconds()方法，用以设置一个已有的Date对象相应的时间值。
但是在第4章中，我们并没有讨论时区的概念，即世界上不同的地理位置处于不同的时区。在本章中，我们将学习本地日期时间与世界时(world time)的关系，并修正前面所忽略的问题。
例如，假如在你的Web站点上具有一个聊天室，如果你想在某一指定的日期和时间组织一次聊天会。如果你的网站吸引了其他国家的访客，那么简单地将聊天会的时间定为15:30开始就不太好。这是因为15:30可以是美国东部标准时间，也可以是太平洋标准时间、或者是英国时间，甚至是吉隆坡时间。当然，我们也可以说明是15:30 EST，即美国东部标准时间15:30，然后让访客自己去计算他所在时区的时间，但这样做并非就能够万无一失，因为不但美国有东部标准时间(EST)，澳大利亚同样也有EST。如果能自动地将该时间转换为访客所在时区的时间，那岂不是更好？在本章中，我们将介绍如何实现这种转换。
除了介绍世界时外，在本章中还将介绍如何在Web页面中创建计时器(timer)。使用计时器，可以每隔一定时间间隔就触发一次代码的执行，也可以在指定的时间间隔之后执行一次某段代码(例如，在页面加载之后5秒执行某段代码)。在本章中，我们将介绍如何使用计时器在Web页面上创建一个实时显示时间的时钟，以及利用计时器在浏览器窗口的状态栏中创建滚动的文本信息。在Web应用程序中，计时器是非常有用的，它还可以用来创建动画或者页面特效。最后，我们将把计时器应用在“在线小测试”程序中，以允许用户为回答问题设置一个时限。
9.1 世界时(World Time)
“现在”这个概念的含义指的是不同地点在此刻的同一时间。但是，此刻的时间是用数字来表示的，在不同的时区，该数字是不同的。因此，我们需要一种标准的时间值，来表示不同地点的同一时间。这就是协调世界时(Coordinated Universal Time，UTC)，该标准于1964年执行，是国际性的民用和科学记时的基础。它的前身是格林尼治标准时间(Greenwich Mean Time，GMT)，实际上，UTC时间0:00正是伦敦格林尼治的午夜。
表9-1显示了UTC时间0:00时，世界各地的本地时间：
表 9-1
圣弗朗西斯科
纽约(EST)
伦敦，格林尼治
德国，柏林
日本，东京
下午 4:00
下午 7:00
0:00 (午夜)
上午 1:00
上午 9:00
注意：
上表给出的是各地的冬季时间—— 夏令时没有考虑在内。
JavaScript中的Date对象提供了许多方法以支持UTC时间，这些方法与前面看到的那些日期时间的方法非常类似。对于每一个set或get类型的日期时间方法，都具有一个相应的UTC时间方法。例如，对于用以设置Date对象本地时间的小时值的setHours()方法,相应地具有一个setUTCHours()方法，用以设置UTC时间的小时值。在下面的小节中，我们将详细介绍这些方法。
另外，Date对象的很多方法都包含了对应于世界时的方法。
Date对象具有toUTCString()方法和toLocaleString()方法，toUTCString()方法将把Date对象中保存的UTC日期和时间以一个字符串的形式返回，而toLocaleString()方法将把Date对象中保存的本地日期和时间以一个字符串的形式返回。大部分现代浏览器都支持一些附加的方法，如toLocaleTimeString()、toTimeString()、toLocaleDateString()和toDateString()方法。
如果只想计算当前本地时间与UTC时间之间的差值，只需使用getTimezoneOffset()方法。如果当前时区在UTC之后，如美国的时区，getTimezoneOffset()方法将返回一个正数。如果当前时区在UTC之前，如澳大利亚或日本，则getTimezoneOffset()方法将返回一个负数。
下面的代码演示了Date对象的toLocaleString()、toUTCString()、getTimezoneOffset()、toLocaleTimeString()、toTimeString()、toLocaleDateString()和toDateString()方法的使用，并将相应的日期时间值输出在页面上。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>example</title>
<script language="JavaScript" type="text/javascript">
var localTime = new Date();
</script>
</head>
<body>
<h4>
UTC Time is
<script language="JavaScript" type="text/javascript">
document.write(localTime.toUTCString());
</script>
</h4>
<h4>
Local Time is
<script language="JavaScript" type="text/javascript">
document.write(localTime.toLocaleString());
</script>
</h4>
<h4>
Time Zone Offset is
<script language="JavaScript" type="text/javascript">
document.write(localTime.getTimezoneOffset());
</script>
</h4>
<h4>
Using toLocalTimeString() gives:
<script language="JavaScript" type="text/javascript">
if (localTime.toLocaleTimeString)
{
document.write(localTime.toLocaleTimeString())
}
</script>
</h4>
<h4>
Using toTimeString() gives:
<script language="JavaScript" type="text/javascript">
if (localTime.toTimeString)
{
document.write(localTime.toTimeString() )
}
</script>
</h4>
<h4>
Using toLocaleDateString() gives:
<script language="JavaScript" type="text/javascript">
if (localTime.toLocaleDateString)
{
document.write(localTime.toLocaleDateString())
}
</script>
</h4>
<h4>
Using toDateString() gives:
<script language="JavaScript" type="text/javascript">
if (localTime.toDateString)
{
document.write(localTime.toDateString())
}
</script>
</h4>
</body>
</html>
将上面的代码保存为timetest.htm，并在浏览器中加载该文件。你所看到的页面将因运行该页面的计算机所处的时区的不同而不同。但是，浏览器中的页面将与图9-1显示的页面类似：
图 9-1
这里，当前计算机的时间是美国东部标准时间(例如，纽约)2006年9月26日上午10:59:10。
代码解说
上面的代码是怎样运行的呢？在页面顶部的脚本块中，定义了一个Date对象，如下面这行代码所示：
var localTime = new Date();
该代码将创建一个新的Date对象，并将该Date对象初始化为客户端计算机的当前日期和时间(注意，实际上Date对象只是简单地保存一个毫秒数，该毫秒数是自1970年1月1日0时0分0秒0毫秒到客户端计算机当前日期时间的毫秒数)。
在页面代码中，具有8个脚本块，其中使用了3个世界时的方法。注意，一些方法被放在了if条件判断语句中，例如下面的语句：
if (localTime.toLocaleTimeString)
{
document.write(localTime.toLocaleTimeString())
}
该if语句用以检查浏览器是否支持toLocaleTimeString()方法，如果浏览器支持toLocaleTimeString()方法，才能使用该方法。一些低版本的浏览器并不支持所有的日期/时间方法，因此需要先进行检查以避免发生难堪的错误。
下面的代码将把toUTCString()方法返回的字符串输出到页面上：
document.write(localTime.toUTCString());
其中的toUTCString()方法将把Date对象localTime中的日期/时间转换为相应的UTC日期/时间。
接着，下面的代码将把toLocaleString()方法返回的本地日期/时间输出到页面上：
document.write(localTime.toLocaleString());
当前时间是用户计算机的时间，并且该方法返回的字符串可能是夏令时(如果计算机被调整为夏令时的话)。
接下来，下面的代码则输出本地时间与UTC时间之间的差值：
document.write(localTime.getTimezoneOffset());
在图9-1中可以看到，纽约时间与UTC时间之间的差是240分钟，或者说是4小时。但是在前面的表格中，我们已经看到纽约时间是位于UTC时间之后5小时，这是怎么回事呢？
其实，这是由于在纽约的9月26日，正在使用夏令时。使用夏时制时，当UTC时间为0:00时，纽约时间为下午8:00；而对于冬季时间，当UTC时间为0:00时，纽约时间为下午7:00。因此，在使用夏时制时，getTimezoneOffset()方法将返回240分钟的差值，而当使用冬季时间时，getTimezoneOffset()方法将返回300分钟的差值。
请对比图9-1和图9-2，在图9-2中，计算机的时间被提前了2个月。
图 9-2
下面是两个方法：toLocaleTimeString()方法和toTimeString()方法，如下所示：
<h4>
Using toLocalTimeString() gives:
<script language="JavaScript" type="text/javascript">
document.write(localTime.toLocaleTimeString())
</script>
</h4>
<h4>
Using toTimeString() gives:
<script language="JavaScript" type="text/javascript">
document.write(localTime.toTimeString() )
</script>
</h4>
这些方法用以显示Date对象中日期/时间的时间部分。toLocaleTimeString()方法用以显示用户计算机上的本地时间。第二个方法toTimeString()则用以显示时间部分，另外在时间值之后加上相应的时区(在本例中，即EST，表示美国东部标准时间)。
最后两个函数用以显示日期/时间的日期部分。其中，toLocaleDateString()方法将按用户计算机上设定的格式显示日期。在Windows操作系统中，可以通过Windows系统控制面板的“区域和语言选项”来设置日期显示的格式。但是，由于该函数依赖于用户计算机的设置，因此对于不同的计算机，该函数所显示的日期形式将有所不同。toDateString()方法将以标准格式显示用户计算机上的当前日期。
当然，上面的这个例子依赖于用户计算机的时钟设置是否正确，很多用户可能错误地设置了自己计算机的时区，因此并不能保证时区100%正确。
设置和获取Date对象的UTC日期/时间
在创建一个新的Date对象时，可以将其初始化为一个日期/时间值，或者默认地让JavaScript将该Date对象初始化为当前的日期和时间。无论哪一种方法，JavaScript都会把Date对象设置为本地的日期/时间。如果要将Date对象设置为UTC时间，则应该采用setUTC类型的方法，例如：setUTCHours()。
下面列出了7个用于设置UTC日期/时间的方法：
● setUTCDate()
● setUTCFullYear()
● setUTCHours()
● setUTCMilliseconds()
● setUTCMinutes()
● setUTCMonth()
● setUTCSeconds()
这些函数的名称已经说明了函数的实际功能。因此，让我们直接来看一个实际的例子，在该例子中将设置UTC时间。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<script language= "JavaScript" type="text/javascript">
var myDate = new Date();
myDate.setUTCHours(12);
myDate.setUTCMinutes(0);
myDate.setUTCSeconds(0);
document.write("<h3>" + myDate.toUTCString() + "</h3>")
document.write("<h3>" + myDate.toLocaleString() + "</h3>")
</script>
</body>
</html>
将上面的代码保存为settimetest.htm文件。在浏览器中加载该文件，将看到如图9-3所示的页面，页面上显示的实际日期将依赖于当前计算机所在的时区和当前的日期。
我们可以修改计算机上时区或者年份及时间的设置，以测试在不同时区或者夏时制时页面的变化。例如我现在在英国，我可以将当前计算机上的设置修改为美国东部标准时间，以对上面的例子进行测试。在Windows系统中，可以打开控制面板，双击“日期/时间”图标进行设置。
那么，这个例子的功能是什么呢？首先声明了一个变量myDate，并将其初始化为一个新的Date对象。由于使用了默认构造函数，并未将该Date对象设置为任何指定的日期时间值，因此该Date对象将包含当前的日期和时间。
图 9-3
接着，使用setUTC类型的方法，对小时、分钟和秒进行了设置，即将时间设置为12:00:00 UTC(注意是中午，而不是午夜)。
接下来，将myDate输出为一个UTC时间的字符串，即当前日期和UTC时间12:00:00。但是，当我们将Date对象输出为一个本地时间字符串时，将得到一个当前的日期和一个将UTC时间12:00:00转换为相应的本地时间的值。当然，本地时间的值依赖于用户计算机的当前时区。例如由于夏令时的缘故，在夏季，UTC时间12:00:00将是纽约时间08:00:00，而在冬季则是纽约时间07:00:00。在英国，UTC时间12:00:00的冬季时间将是12:00:00，而夏季时间将是13:00:00。
与设置UTC的日期/时间类似，为了获取UTC的日期/时间，相应地具有获取UTC日期和时间的方法。不同之处在于，获取UTC日期/时间使用的是getUTC类型的方法，例如，对于setUTCHours()方法，相应地具有getUTCHours()方法。
● getUTCDate()
● getUTCDay()
● getUTCFullYear()
● getUTCHours()
● getUTCMilliseconds()
● getUTCMinutes()
● getUTCMonth()
● getUTCSeconds()
值得注意的是，对于获取UTC的日期/时间，具有一个额外的方法，即getUTCDay()方法。getUTCDay()方法的功能与getDay()方法类似，它返回一个表示星期几的数字，其中，0表示星期日，6表示星期六。由于只要确定了年、月、日，就能唯一地确定星期几，因此，setUTC类型的方法中并没用setUTCDay()方法。
在介绍计时器之前，让我们应用上面学到的关于Date对象和世界时的新知识来创建一个世界时转换器。在本章稍后的内容中，在学习了如何使用计时器之后，我们将把该世界时转换器升级为一个世界时的时钟。
世界时转换器包含两个页面。第一个页面是一个框架集页面，第二个是包含世界时转换器表单的页面。下面是需要创建的第一个页面，即框架集页面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
</head>
<frameset cols="250,*" frameborder="0">
<frame src="worldtimeconverter.htm" name=formFrame>
<frame src="about:blank" name=resultsFrame>
</frameset>
</html>
上面的框架集只是简单地将页面分为两个框架页。由于框架集的边框被设置为0，因此该框架集看起来就像是一个页面。将该框架集页面保存为WorldTimeConverter Frameset.htm文件。
左边的框架页包含了一个表单，用户可以在该表单中选择一个城市，右边的框架页中将显示转换的结果。由于右框架页中的页面是通过代码生成的，因此在这里并不需要创建右框架页中的页面文件。
左框架页的代码如下所示：
<html>
<head>
<script language="javascript" type="text/javascript">
var timeDiff;
var selectedCity;
var daylightSavingAdjust = 0;
function updateTimeZone()
{
var lstCity = document.form1.lstCity;
timeDiff = lstCity.options[lstCity.selectedIndex].value;
selectedCity = lstCity.options[lstCity.selectedIndex].text;
updateTime();
}
function getTimeString(dateObject)
{
var timeString;
var hours = dateObject.getHours();
if (hours < 10)
hours = "0" + hours;
var minutes = dateObject.getMinutes();
if (minutes < 10)
minutes = "0" + minutes;
var seconds = dateObject.getSeconds()
if (seconds < 10)
seconds = "0" + seconds;
timeString = hours + ":" + minutes + ":" + seconds;
return timeString;
}
function updateTime()
{
var nowTime = new Date();
var resultsFrame = window.top.resultsFrame.document;
resultsFrame.open()
resultsFrame.write("Local Time is " + getTimeString(nowTime) + "<br>");
nowTime.setMinutes(nowTime.getMinutes() + nowTime.getTimezoneOffset() +
parseInt(timeDiff) + daylightSavingAdjust);
resultsFrame.write(selectedCity + " time is " + getTimeString(nowTime));
resultsFrame.close();
}
function chkDaylightSaving_onclick()
{
if (document.form1.chkDaylightSaving.checked)
{
daylightSavingAdjust = 60;
}
else
{
daylightSavingAdjust = 0;
}
updateTime();
}
</script>
</head>
<body onload="updateTimeZone()">
<form name=form1>
<select size=5 name=lstCity language=JavaScript onchange=
"updateTimeZone();">
<option value=60 selected>Berlin
<option value=330>Bombay
<option value=0>London
<option value=180>Moscow
<option value=-300>New York (EST)
<option value=60>Paris
<option value=-480>San Francisco (PST)
<option value=600>Sydney
</select>
<p>
It’s summertime in the selected city
and its country adjusts for summertime daylight saving
<input type="checkbox" name=chkDaylightSaving language=JavaScript
onclick="return chkDaylightSaving_onclick()">
</p>
</form>
</body>
</html>
将该页面保存为WorldTimeConverter.htm文件。然后在浏览器中加载框架集页面WorldTimeConverterFrameset.htm。
该表单如图9-4所示。无论何时，当用户单击了下拉列表框中的一个城市，右框架页中将显示用户计算机的本地时间以及所选中城市对应的时间。在如图9-4所示的例子中，本地时区被设置为美国东部标准时间(如纽约时间)，而所选中的城市为Berlin(柏林)，并且表示夏令时的复选框已经被选中。
图 9-4
需要指出的是，该例子仅仅作为演示使用，并不是一个无懈可击的程序，原因在于夏令时的问题。某些国家并没用使用夏令时，一些国家则在一年中固定的时期使用夏令时，还有的国家在一年中不同的时间使用夏令时。这使得我们难以在程序中准确地预设某个国家使用夏令时的时期。因此，为了解决这个问题，我们在页面中加入了一个复选框，以允许用户在选择一个城市时，可以自己设置该城市是否使用了夏令时，并且，我们假定用户所选择的城市的夏令时是提前1小时。
另外，还有一个难以避免的问题就是，一些用户可能错误地设置了自己所在的时区。这样一来，该程序的运行结果将与预想的不同。
代码解说
我们先来看一下框架集的定义页面，即WorldTimeConverterFrameset.htm页面。之后再考察WorldTimeConverter.htm页面。
<frame src="about:blank" name=resultsFrame>
在上面的代码中，将右框架页的src属性设置为"about:blank"。对于某些浏览器来说这是必需的，特别是Netscape浏览器—— 如果不将src属性设置为"about:blank"，则由于没有任何页面加载在框架页中，使用document.write()方法向页面写入内容时就可能会造成错误。注意，就目前的情况而言，该示例在Opera 7浏览器中将不能正常运行。如果要使之正常运行，还需要创建一个空白的HTML页面，并在resultsFrame框架页中加载该空白页面。
下面我们将讨论WorldTimeConverter.htm页面，该页面是实现本例功能的关键。在该页面的表单中，使用<select>标记定义了一个下拉列表框：
<select size=5 name=lstCity language=JavaScript onchange=
"updateTimeZone();">
<option value=60 selected>Berlin
<option value=330>Bombay
<option value=0>London
<option value=180>Moscow
<option value=-300>New York (EST)
<option value=60>Paris
<option value=-480>San Francisco (PST)
<option value=600>Sydney
</select>
每一个option元素表示一个选项，该选项在下拉列表框中显示一个城市的名称，选项的值为该城市所在时区(冬季时间)与UTC时间之间相差的分钟数。因此，对于伦敦，该地区使用的就是UTC时间，因此该选项的值为0。对于巴黎，其所在时区在UTC时间之前1小时，因此巴黎选项的值为60(即60分钟)。对于纽约，其所在时区在UTC时间之后5小时，因此纽约选项的值为–300。
在代码中捕获了<select>元素的change事件，并将该事件处理器连接到了updateTimeZone()函数，该函数定义于脚本代码块的顶部。在updateTimeZone()函数中，使用了如下所示的三个全局变量，这三个变量是在脚本块的顶部定义的。
var timeDiff;
var selectedCity;
var daylightSavingAdjust = 0;
在updateTimeZone()函数中，将更新其中两个全局变量的值，即将变量timeDiff的值设置为下拉列表框中被选中项的值(即所选中城市时间与UTC时间之间的差值)，并将变量selectedCity的值设置为下拉列表框中被选中项的文本(即所选中城市的名称)。
function updateTimeZone()
{
var lstCity = document.form1.lstCity;
timeDiff = lstCity.options[lstCity.selectedIndex].value;
selectedCity = lstCity.options[lstCity.selectedIndex].text;
在updateTimeZone()函数的最后，调用了updateTime()函数，如下面的代码所示：
updateTime();
}
在介绍updateTime()函数之前，我们先来看一下页面表单底部的复选框。当用户在下拉列表框中选中的城市是在夏季使用夏令时的城市时，用户可以选中该复选框以表示使用夏令时。
<input type="checkbox" name=chkDaylightSaving language=JavaScript
onclick="return chkDaylightSaving_onclick()">
可以看到，复选框的click事件连接到了另一个函数：chkDaylightSaving_onclick()。
function chkDaylightSaving_onclick()
{
if (document.form1.chkDaylightSaving.checked)
{
daylightSavingAdjust = 60;
}
else
{
daylightSavingAdjust = 0;
}
在上面代码的if语句中，使用了复选框的checked属性，如果复选框被选中则checked属性返回true，否则返回false。如果复选框已经被选中，则将daylightSavingAdjust变量的值设置为60，以表示夏令时，否则将其设置为0。
updateTime();
}
在chkDaylightSaving_onclick()函数的结尾，再次调用了updateTime()函数。下面我们来分析一下updateTime()函数。
在updateTime()函数中，将当前时间和所选中城市时区的相应时间输出在右框架页中，即名为resultsFrame的框架页，该框架页已经在框架集中定义过。
在updateTime()函数的开始，定义了一个新的Date对象，并保存在变量nowTime之中。该Date对象将被初始化为当前的本地时间。
function updateTime()
{
var nowTime = new Date();
接下来，为了使代码更简洁易读，我们定义了一个变量resultsFrame，用以引用包含在resultsFrame框架页中的document对象：
var resultsFrame = window.top.resultsFrame.document;
通过变量resultsFrame就可以引用resultsFrame框架页中的document对象，以打开文档并进行输入。document对象的open()方法将清除当前文档中的任何内容，并提供一个空白的文档以供输入HTML。首先，在文档中输入的是nowTime对象中保存的本地时间。但是，我们希望将时间以一个良好的格式来显示，如“小时:分钟:秒”的格式，因此，需要另一个函数getTimeString()，以完成格式化显示的功能。稍后我们将讨论getTimeString()函数。
resultsFrame.open()
resultsFrame.write("Local Time is " + getTimeString(nowTime) + "<br>");
上面的代码将当前的时间输出在resultsFrame框架页中，接下来，我们将计算所选中城市所在时区的时间，然后输出到resultsFrame框架页中。
在第4章中，我们已经知道，如果将一个Date对象各部分的值(如小时、分钟或秒钟)设置为超过其正常范围的值时，JavaScript将假定你要对相应的日期、小时或者分钟进行调整。例如，如果把某个Date对象所保存日期的小时数设置为36，则JavaScript将把日期加上1天，然后把小时数设置为12。下面的代码利用了JavaScript的这个特性：
nowTime.setMinutes(nowTime.getMinutes() + nowTime.getTimezoneOffset() +
parseInt(timeDiff) + daylightSavingAdjust);
让我们分析一下上面的代码，看看这段代码是如何工作的。假定你在纽约，纽约的现在时间是夏季时间5:11，而我们想知道柏林时间现在是几点，这该如何计算呢？
首先，获取当前本地时间的分钟数，现在是5:11，因此，nowTime.getMinutes()将返回分钟数11。
第二步，以分钟为单位，使用nowTime.getTimezoneOffset()方法，计算用户本地时间与UTC时间的差值。如果现在你在纽约，由于纽约夏季时间与UTC时间相差4小时，即相差240分钟。
第三步，计算所选中城市的标准冬季时间与UTC时间差值的整数，并将该值保存在变量timeDiff中。在这里，我们使用了parseInt()函数，这是由于如果不将差值字符串转换为数值，则JavaScript将假定我们要把两个字符串连接在一起，而不是把两个数字加起来求和。值得注意的是，变量timeDiff中保存的是HTML元素的值，而HTML元素的值都是字符串类型，即使字符串中的字符都是数字字符，该值也仍然是一个字符串类型的值。对于柏林来说，柏林时间与UTC时间相差60分钟，因此，变量timeDiff的值为60。
最后，在分钟数上再加上变量daylightSavingsAdjust的值。该变量的值是在函数chkdaylightsaving_onclick()中设置的，稍后我们将讨论这个函数。因为在夏季，柏林将使用夏令时，因此变量daylightSavingsAdjust的值为60。
因此，上面的代码将计算如下所示的表达式：
11 + 240 + 60 + 60 = 371
这样，nowTime.setMinutes()方法中的参数将被设置为371分钟。显然，小时之后的分钟数不可能为371，因此JavaScript将假定371分钟表示5:00之后的6小时11分，即11:11—— 这正是我们所需要的柏林时间。
在updateTime()函数的最后，将所选中城市的时间输出在resultsFrame框架页中，然后关闭文档的输入。
resultsFrame.write(selectedCity + " time is " + getTimeString(nowTime));
resultsFrame.close();
}
在updateTime()函数中，使用了getTimeString()函数以格式化时间字符串。下面将讨论getTimeString()函数。该函数接收一个Date对象作为参数，并根据该Date对象来创建一个形如“小时:分钟:秒”的字符串。
function getTimeString(dateObject)
{
var timeString;
var hours = dateObject.getHours();
if (hours < 10)
hours = "0" + hours;
var minutes = dateObject.getMinutes();
if (minutes < 10)
minutes = "0" + minutes;
var seconds = dateObject.getSeconds()
if (seconds < 10)
seconds = "0" + seconds;
timeString = hours + ":" + minutes + ":" + seconds;
return timeString;
}
为什么要用这个函数来格式化时间字符串呢？为什么不使用下列形式的字符串呢？
getHours() + ":" + getMinutes() + ":" + getSeconds()
这是由于上面形式的字符串不能对小于10的小时、分钟或者秒值进行相应的格式化，例如，12点过1分，按上面的格式将显示为12:1:00，而我们需要的是12:01:00。
因此，在getTimeString()函数中，分别获取了小时、分钟和秒的值，并检查是否小于10。如果小于10的小时、分钟或秒，则在前面添加一个0字符。当对小时、分钟和秒检查完毕，再把小时、分钟、秒连接成一个字符串，返回给函
分享到：
发表评论
相关推荐
### JavaScript中的Date Format（JS日期格式化）方法详解 #### 概述 在日常的Web开发工作中，我们经常需要处理日期和时间相关的数据。JavaScript 的 `Date` 对象提供了多种方法来获取和设置日期时间，但原生 API 并...
### JavaScript Date 对象获取年、月、日的具体值 在JavaScript中，`Date`对象用于处理日期和时间。本文将详细介绍如何...此外，使用第三方库如`moment.js`可以更方便地处理复杂的日期操作，值得进一步学习和掌握。
JavaScript中的Date对象是用于处理日期和时间的核心组件。在JavaScript中，Date对象提供了一系列的方法来创建、修改和读取日期和时间。这篇文章将深入探讨Date对象的各个方面，帮助你更好地理解和应用这个对象。 1....
"js_date_time.rar"可能是一个自定义实现的解决方案，但也可能是基于现有的JavaScript日期时间库，如Bootstrap Datepicker, jQuery UI Datepicker或者Moment.js等。这些库提供了丰富的功能，如语言支持、日期范围...
JavaScript Date Selector1是一款用于网页中的日期选择工具，它极大地增强了用户在输入日期时的交互体验。这个控件通常被开发者用来替代HTML原生的日期输入框，提供更友好的界面和更灵活的功能。 在JavaScript中，...
你可以通过查看官方文档或下载的压缩包中的示例文件（jQuery date_input(日期选择)）来进一步学习和实践。 总结，jQuery date_input 插件是网页开发中处理日期输入的得力助手，其易用性、灵活性和良好的兼容性使其...
在JavaScript编程中，日期和时间处理是常见的任务之一。`Date`对象是JavaScript内置的处理日期和时间...通过深入研究`dateControl.js`的源码，我们可以学习到如何构建这样的插件，以及如何优化日期时间的用户交互体验。
基于流行的JavaScript库jQuery和AngularJS框架，wui-date使得在网页上添加交互式、用户友好的日期选择功能变得异常简单。该组件源码精简，仅有几百行，体现了高效和易维护的设计理念。 1. **jQuery与AngularJS集成*...
3. **日期和时间处理**：JavaScript的Date对象可能与C#的DateTime类不完全兼容，工具类可能提供了适应后台环境的日期和时间处理方法。 4. **字符串操作**：提供常用的字符串处理函数，如格式化、查找、替换等。 5....
本资源包“js系统学习资料”是为初学者精心整理的一套全面的学习资料，旨在帮助菜鸟级别的学习者系统地掌握JavaScript的核心概念和实用技巧。 首先，我们要了解JavaScript的基础。JavaScript语法基于ECMAScript规范...
本人学习Bootstrap框架时，使用时间选择插件daterangepicker时，费劲千辛万苦搜集齐全的依赖文件，包括使用时依赖的所有css与js，亲测有效，是本人零基础入门使用时使用的所有依赖文件，希望可以帮助到大家。
在“学习资料 js学习资料”这个主题下，我们主要关注JavaScript的基础知识、实例应用以及与CSS的协同工作。 1. JavaScript基础： - 变量：JavaScript中的变量用于存储数据，可以使用var、let或const关键字声明。 ...
JavaScript培训学习PPT教程（js资料和源代码） DOM事件总结（教辅）.pdf DOM事件（ppt）.pdf JavaScripr之while循环（源代码）.zip JavaScript中的循环总结（教辅）.pdf JavaScript之Date对象（源代码）.zip ...
在JavaScript中，Date对象是处理日期和时间的关键组成部分。它允许开发者创建、操作和格式化日期实例，这...通过学习和实践这个"Date Object in Javascript"压缩包中的内容，你将能够更好地理解和应用这一核心概念。
随着学习的深入，可以尝试挑战更复杂的问题，如构建交互式的网页应用，或者利用JavaScript进行服务器端开发（Node.js）。 总之，这个"JavaScript入门学习资料包"为初学者提供了一个全面学习JavaScript的平台，从...
`dateformat.js` 是开源的，这意味着开发者可以自由地查看源码、学习、修改并贡献到项目中。同时，社区的支持使得这个库能够不断更新和完善，以满足不断变化的开发需求。 在 `dateformat.js-master` 压缩包中，通常...
**jQuery Date Range Picker** 是一个基于JavaScript库jQuery的日期范围选择插件，它允许用户在网页上方便地选择两个日期之间的范围。这个插件对于那些需要处理时间区间，如预订系统、数据分析或报告生成等场景非常...
在这个名为“经典javascript日期控件选择器，javascript学习资料，经典js案例”的压缩包中，包含了丰富的JavaScript学习资源和一个特别经典的时间控件。这个时间控件允许用户根据特定的格式定义日期和时间，而且设计...
首先，`NextDate`函数通常指的是获取给定日期之后的下一个日期，这涉及到日期和时间的处理，这部分内容在许多编程语言中都有涉及，如Python的datetime模块、Java的Calendar类或JavaScript的Date对象等。在这些语言中...
"前端学习笔记-黑马程序员JS" 本资源主要介绍了 JavaScript 的基本概念和语法，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象等知识点。 变量 在 JavaScript 中，变量可以在三种位置书写：...