JavaScript 动态网页实例 —— 日期时间应用

前言

日期和时间也是网站设计中不可或缺的重要内容。本章基于JavaScript中Date 对象的基本概念,介绍日期和时间的各种应用。鉴于其他章节已间接涉及部分内容,本章主要介绍各类不同时钟的设计,以及各种不同形式的时间的实现,同时,还涉及日历的设计和倒计时效果的实现。

本文例子icon-default.png?t=N7T8https://download.csdn.net/download/cccloveforever/89195752 

5.1带开关的时钟

本节实例给出一个带开关的时钟的实现方法。通过按钮,用户可以控制时钟的显示与隐藏。

要点

本节代码主要使用了 Window对象的setTimeout()方法和clearTimeout()方法,两者的主要功能和用法如下。

  • Window 对象支持一些设置计时器的方法,用于执行特定函数。这些方法包括 setTimeout( )和clearTimeout( )。
  • setTimeout()方法的功能是设置一个超时,以便在将来的某个时间触发某段代码的运行。基本语法是“timerId=setTimeout(要执行的代码,以毫秒为单位的时间)”。其中,“要执行的代码”可以是一个函数,也可以是其他 JavaScript 语句;“以毫秒为单位的时间”指代码执行前需要等待的时间,即超时时间。
  • 可以使用clearTimeout(timerId)取消超时设置。

<script language="JavaScript">
<!--
var enabled=0;    
function TOfunc() {       
TO = window.setTimeout( "TOfunc()", 1000);       
var today = new Date();   
document.clock.disp.value = today.toLocaleString();
}
//-->
</script>
<form name="clock">
<input type="text" name="disp" value="" size=30 onFocus="this.blur()"><br>
<input type="radio" name="rad" value="off" onClick="
if( enabled==1 ) 
{
document.clock.disp.value='';
clearTimeout( TO ); 
enabled = 0;
}
" checked>
关<font color="#FFFF99"> </font> 
<input type="radio" name="rad" value="on" onClick="
if( enabled == 0 ) {
var TO = setTimeout( 'TOfunc()', 1000 );
enabled = 1;
}
">
开<font color="#FFFF99"> </font> 

分析

  • (1)程序定义了一个名为disp的文本框,用于显示文本时钟。其onFocus 属性设置为“ this.blur( )”。
  • (2)程序还定义了“开”和“关”两个单选按钮。“开”按钮的onclick时间调用一段JavaScript 代码。若文本框中没有显示文本时钟,则使用 setTimeout()调用函数TOfunc(),超时时间设置为1000毫秒,表示每隔1秒更新一次。
  • (3)“关”按钮的 onclick 时间调用一段 JavaScript 代码。若文本框中已经显示了文本时钟,则使用“document.clock.disp.value=";”清除文本框中显示的内容。并通过“clealTimeout(To);”取消先前的超时设置。

5.2 不同风格的时间显示

同样是文本时钟,也可以有多种不同的显示方式。本节实例给出了文本时钟的6种不同显示方式。读者可根据自己需求,选择合适的样式使用。

要点

本节代码主要使用了 Date 对象的 getYear 方法、getMonth方法、getDate 方法、getDay方法、getHours 方法、getMinutes方法、getSeconds方法等,主要功能和用法如下。

  • Date 对象用于表示日期和时间。在计算机内部,日期本质上就是一个数值,是自 1970。年 00:00:00开始的相对于某个日期的以毫秒为单位的数值。通过该数值,可以推算出对应的具体日期和时间。
  • getYear( )方法返回 Date 对象实例中的年数。
  • getMonth()方法返回 Date 对象实例中的月份数,取值范围为0~11,比传统表示法的数字小 1。
  • getDate()方法返回 Date 对象实例中的日期数。
  • getDay()方法返回 Date 对象实例中的星期数。
  • getHours()方法返回 Date 对象实例中的小时数。
  • getMinutes()方法返回 Date 对象实例中的分钟数。
  • getSeconds()方法返回 Date 对象实例中的秒数。

<script language="JavaScript">
<!--
function initArray()
{
  for(i=0;i<initArray.arguments.length;i++)
  this[i]=initArray.arguments[i];
}
var isnMonths=new initArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var isnDays=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
today=new Date();
hrs=today.getHours();
min=today.getMinutes();
sec=today.getSeconds();
clckh=""+((hrs>12)?hrs-12:hrs);
clckm=((min<10)?"0":"")+min;clcks=((sec<10)?"0":"")+sec;
clck=(hrs>=12)?"下午":"上午";
var stnr="";
var ns="0123456789";
var a="";

function getFullYear(d)
{
  yr=d.getYear();if(yr<1000)
  yr+=1900;return yr;}
  document.write("<table>");
  
//下面各行分别是一种风格,把不需要的删掉即可
document.write("<TR><TD>风格一:</TD><TD>"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年");
document.write("<TR><TD>风格二:</TD><TD>"+clckh+":"+clckm+":"+clcks+""+clck+"</TD></TR>");
document.write("<TR><TD>风格三:</TD><TD>"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年 "+clckh+":"+clckm+":"+clcks+""+clck+"</TD></TR>");
document.write("<TR><TD>风格四:</TD><TD>"+(today.getMonth()+1)+"/"+today.getDate()+"/"+(getFullYear(today)+"").substring(2,4)+"</TD></TR>");
document.write("<TR><TD>风格五:</TD><TD>"+hrs+":"+clckm+":"+clcks+"</TD></TR>");
document.write("<TR><TD VALIGN=TOP>风格六:</TD><TD>"+today+"</TD></TR>");
document.write("</table>");
//-->
</script>

分析

  • (1)程序首先使用变量isnMonths和isnDays分别定义了12个月的汉语名称和一个星期中7天的汉语名称。
  • (2)随后,通过使用 date()依次获取当前的时、分、秒。对于时、分、秒,只有1位的,增加前置 0,使页面布局更整齐美观。
  • (3)最后,使用了一系列的 document.write()语句,共显示了6种风格的文本时钟,比较简单,参照显示结果,很好理解,这里不再赘述。

5.3 倒计时效果

本节实例给出一个倒计时效果的实现方法。可以根据预先设定的时间进行以秒为单位的倒计时显示。

要点

本节代码主要使用了 Date 构造函数和 Math对象的 foor(n)方法,二者的主要功能和用法如下。

  • 最简单的构造函数是 Date(),以当前的日期和时间初始化一个 Date 对象实例。可以。指定一个自 1970年 00:00:00开始的毫秒值初始化一个对象实例,也可以指定一个格式正确的日期时间字符串,还可以指定年、月、日、时、分、秒、毫秒等多个参数初始化一个 Date 对象实例。例如,“new Date(2006,6,18);”就创建了一个代表 2006年6月18日00:00:00的Date对象实例。
  • Math 对象的 foor(n)方法用于求小于或等于n的整数。其中n是一个数值型或可转换为数值型的常量、变量或表达式。

<script language="JavaScript">
<!--
var DifferenceHour = -1
var DifferenceMinute = -1
var DifferenceSecond = -1
var Tday = new Date("Janu 1, 2222 23:59:59")
var daysms = 24 * 60 * 60 * 1000
var hoursms = 60 * 60 * 1000
var Secondms = 60 * 1000
var micros
  • 38
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值