详解JavaScript的Date对象（制作简易钟表）

网络编程 2024/11/19 佚名

3 1 2

JS提供了Date类型来处理时间和日期。Date类型内置一系列获取和设置日期时间信息的方法。下面我们简单的
概述一下这个Date类型。

大概看了一下Date类型的方法，下面给出：

上面的方法自己尝试即可，我只简单的演示一下JS正确输出的格式：

var today=new Date();//创建一个时间日期对象 
document.write("<h4>下面的是世界标准的时间输出：</h4>"); 
document.write(today+"<hr/>"); 
document.write("<h4>下面的是符合我们本地的时间输出：</h4>"); 
document.write(today.toLocaleString()+"<hr/>"); 
document.write("<h4>下面的是符合我们中国人的时间输出：</h4>"); 
document.write(today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate()+" "+today.getHours()+":"+today.getMinutes()+":"+today.getSeconds()+"<hr/>");

输出的结果为：

看到这里我就想到了电脑自带的本地时钟，单击任务栏上的时间，会弹出来一个钟表：

那么我们既然知道了JS中的Date类型，是否我们可以在网页上显示一个本地时间和日期的钟表，由于学习的JS知
识少，我就简单地做了一个简易钟表。
给出代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>综合实例之制作简易钟表</title> 
<style type="text/css"> 
* { 
 margin:0px; 
 padding:0px; 
 outline:none; 
} 
body { 
  background-color:#0E0E0E; 
 overflow:hidden; 
} 
.date { 
 width:860px; 
 height:250px; 
 border:1px solid #FFFFFF; 
 margin:auto; 
 margin-top:200px; 
 color:#FFFFFF; 
} 
#time1 { 
   width:860px; 
  height:100px; 
  margin:auto; 
  font-size:75px; 
  text-align:center; 
} 
#time2 { 
   font-size:125px; 
  text-align:center; 
} 
</style> 
<script type="text/javascript"> 
  function startTime()//显示日期的函数 
 { 
  var today=new Date();//创建日期时间对象 
  var n=today.getFullYear();//获取当前时间的年份 
  var m=today.getMonth();//获取当前时间的月份 
  var d=today.getDate();//获取当前时间的日期 
   var h=today.getHours();//获取当前时间的小时 
  var f=today.getMinutes();//获取当前时间的分钟 
  var s=today.getSeconds();//获取当前时间的秒钟 
  var weekday=new Array(7);//创建星期数组 
  weekday[0]="星期日"; 
  weekday[1]="星期一"; 
  weekday[2]="星期二"; 
  weekday[3]="星期三"; 
  weekday[4]="星期四"; 
  weekday[5]="星期五"; 
  weekday[6]="星期六"; 
  document.getElementById('time1').innerHTML=weekday[d+1]+" "+n+"-"+(m+1)+"-"+checkTime(d); 
   f=checkTime(f); 
   s=checkTime(s); 
   document.getElementById('time2').innerHTML=h+":"+f+":"+s; 
   t=setTimeout('startTime()',500); 
 } 
 function checkTime(i)//日期校验函数 
 { 
  if (i<10) 
  { 
   return i="0" + i; 
  } 
  else 
  { 
   return i; 
  } 
 } 
</script> 
</head> 
 
<!--body标签调用JS中的startTime()方法即打开网页就显示出当前年月日和时间--> 
<body onload="startTime()"> 
 
<!--封装整个显示日期区域--> 
<div class="date"> 
  <!--显示当前年月日--> 
  <div id="time1"></div> 
 <!--显示当前北京时间--> 
  <div id="time2"></div> 
</div> 
 
</body> 
</html>

看一下运行的结果：

通过在制作简单的钟表效果，学习JavaScript的Date对象，加深对Date对象的认识，希望对大家的学习有所帮助。

js,Date

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“详解JavaScript的Date对象（制作简易钟表）”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

详解JavaScript的Date对象（制作简易钟表）

简单对比分析JavaScript中的apply,call与this的使用

浅析2种JavaScript继承方式

评论“详解JavaScript的Date对象（制作简易钟表）”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接