任务视频V2.0

任务视频V1.0

知识点

Date对象

要使用Date对象，必须先使用new运算符创建它，Date对象的构造函数通过可选的参数，可生成过去、现在和将来的Date对象，创建Date常见方式有三种。

1. 不带参数

var myDate=new Date();

创建一个含有系统当前日期和时间的Date对象变量myDate。

2. 创建一个指定日期的Date对象

        var myDate=new Date(“2019/05/01”);

        使用代表日期和时间的字符串创建一个特定日期的Date对象，上述语句创建了2019年5月1日的Date变量myDate。

3. 创建一个指定时间的Date对象

var myDate=new Date(2014, 6, 1, 10, 30, 20, 50);

        语句创建了一个包含确切日期和时间的Date变量myDate，即2014年6月1日10点30分20秒50毫秒。

Date对象的常用方法                                                   

教学课件V2.0

教学课件V1.0

在页面动态显示时钟效果

任务描述

在“我的博客”首页动态显示客户端系统时间，如下图所示。

任务分析

在页面动态显示系统时间，可以采用以下步骤：

1. 完成静态页面设计，标识要显示系统时间的位置，此例已完成该步骤。

2. 定义函数，使用日期和时间对象，获取客户端系统时间。

3. 为id为time的标签赋值。

4. 使用定时函数，每隔一秒重新调用一次函数。

任务实现

1. 完成静态页面设计，关键html代码如下：

……

        <li><ahref="index.html">首页</a></li>   

        <liid="time"></li>    

 ……

2. 添加脚本代码，定义函数，实现动态时钟效果，代码如下：

<scripttype="text/javascript">

functionshowTime()

{

        var myDate=new Date();                 //定义日期与时间变量

        var hour=myDate.getHours();

        var minutes=myDate.getMinutes();

        var seconds=myDate.getSeconds();

        if(hour<10)

                 hour="0"+hour;

        if(minutes<10)

                 minutes="0"+minutes;

        if(seconds<10)

                 seconds="0"+seconds;

        document.getElementById("time").innerHTML="当前时间为："+

hour+":"+minutes+":"+seconds;             //给id为time的标签赋值

        setTimeout("showTime()",1000);  //设置定时函数，1秒执行一次showTime函数

}

window.onload=showTime;                    //页面加载时调用showTime函数

</script>

案例素材

根据所给素材，在如图所示的页面文本框中动态显示客户端当前时间。

参考答案