详解JavaScript的Date对象(制作简易钟表)


Posted in Javascript onApril 07, 2020

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

大概看了一下Date类型的方法,下面给出:

详解JavaScript的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/>");

输出的结果为:

详解JavaScript的Date对象(制作简易钟表)

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

详解JavaScript的Date对象(制作简易钟表)

那么我们既然知道了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对象(制作简易钟表)

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

Javascript 相关文章推荐
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
浅析2种JavaScript继承方式
Dec 04 #Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 #Javascript
浅析jQuery Mobile的初始化事件
Dec 03 #Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 #Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 #Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 #Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 #Javascript
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
php curl发送请求实例方法
2019/08/01 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
基于python实现删除指定文件类型
2020/07/21 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
酒店副总经理岗位职责范本
2014/02/04 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
大学生自荐书范文
2015/03/05 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers