详解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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
js中生成map对象的方法
Jan 09 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
angular实现form验证实例代码
Jan 17 Javascript
JS闭包用法实例分析
Mar 27 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
vue 动态绑定背景图片的方法
Aug 10 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
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
php强制运行广告的方法
2014/12/01 PHP
js代码实现微博导航栏
2015/07/30 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python实现简易内存监控
2018/06/21 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
Python能做什么
2020/06/02 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
就业表自我评价分享
2014/02/06 职场文书
贷款担保书范文
2014/05/13 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书