详解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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
小程序富文本提取图片可放大缩小
May 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
python文件排序的方法总结
2020/09/13 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
SQL数据库笔试题
2016/03/08 面试题
会议邀请书范文
2014/02/02 职场文书
中国入世承诺
2014/04/01 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
骨干教师培训方案
2014/05/06 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书