详解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 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
Node.js事件驱动
Jun 18 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
JS实现百度搜索框关键字推荐
Feb 17 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
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python实现批量下载图片的方法
2015/07/08 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
python如何修改装饰器中参数
2018/03/20 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
django实现后台显示媒体文件
2020/04/07 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
Java基础面试题
2014/07/19 面试题
小学绿色学校申报材料
2014/08/23 职场文书
工作总结与自我评价
2014/09/18 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript