详解JavaScript的Date对象（制作简易钟表）
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对象的认识，希望对大家的学习有所帮助。
相关推荐
-
利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'
-
C++实现图形界面时钟表盘代码
本文实例讲述了C++实现图形界面时钟表盘代码,分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: //POINT的数组可以这么用 POINT pt[]={ 0, 450, 225,390, 390,225, 450,0, 390,-225, 225,-390, 0,-450, -225,-390, -390,-2
-
jquery+html5制作超酷的圆盘时钟表
自己封装的一个用HTML5+jQuery写的时钟表 代码: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <
-
Android打造属于自己的时间钟表
1.概述 本文主要讲解的是如何自定义一个时间钟表,通过简单的练习可以简单学习Android当中自定义view的一些常用绘图技巧,优化android绘图操作.言归正传,首先看下我们需要实现的效果: 当我们看到这个效果的时候脑子里应该有一定的思路了,我们应该把它分解成以下几个步骤: 1.仪表盘(圆) 2.刻度线(长 中 短) 3.刻度值(1-12) 4.指针(时 分 秒) 5.移动指针,计算指针位置 现在我们已经很清楚自己的思路了,那么我们一个一个来. 第一步:1.自定义View的属性,首先在r
-
详解JavaScript的Date对象（制作简易钟表）
JS提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期时间信息的方法.下面我们简单的 概述一下这个Date类型. 大概看了一下Date类型的方法,下面给出: 上面的方法自己尝试即可,我只简单的演示一下JS正确输出的格式: var today=new Date();//创建一个时间日期对象 document.write("<h4>下面的是世界标准的时间输出:</h4>"); document.write(today+"
-
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
问题描述: 使用JavaScript生成一个倒数7天的数组. 比如今天是10月1号,生成的数组是["9月25号","9月26号","9月27号","9月28号","9月29号","9月30号","10月1号"]. 这个难点就是需要判断这个月份(可能还需要上一个月份)是30天还是31天,而且还有瑞年的2月28天或者29天. 解答思路: 不需要那么复杂,在js中非常简单,
-
详解JavaScript中Arguments对象用途
目录 前言 Arguments 的基本概念 Arguments 的作用 获取实参和形参的个数 修改实参值 改变实参的个数 检测参数合法性 函数的参数个数不确定时,用于访问调用函数的实参值 遍历或访问实参的值 总结 在实际开发中,Arguments 对象非常有用.灵活使用 Arguments 对象,可以提升使用函数的灵活性,增强函数在抽象编程中的适应能力和纠错能力. JavaScript 中 Arguments 对象的用途总结. 前言 相信我们很多人在代码开发的过程中都使用到过一个特殊的对象 --
-
图文详解JavaScript的原型对象及原型链
对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了.所以我自己也想尝试一下,看看能不能把原型中的重要知识点拆分出来,用最简单的图表形式说清楚. 我们知道原型是一个对象,其他对象可以通过它实现属性继承.但是尼玛除了prototype,又有一个__
-
详解JavaScript中Date.UTC()方法的使用
此方法需要一个日期,并返回自1970年1月1日按照通用时间午夜的毫秒数. 语法 Date.year,month,day,[hours,[minutes,[seconds,[ms]]]) 注:括号内的数据是可选的 下面是参数的详细信息: year : 四位数字表示年 month : 0和11之间的整数,表示月份 day : 1到31之间的整数,表示日期 hours : 0到23之间的整数,表示小时 minutes : 0到59之间的整数,表示分钟 seconds : 0到59之间的整数,表示秒 m
-
详解JavaScript中js对象与JSON格式字符串的相互转换
首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是js中JSON格式的字符串,它只是一个js的字符串. var JSONStr2 = "{'name' : '张三'}"; 我们看JSON语法中对于字符串的定义:是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义.一个字符(character)即一个单独的字符串(characte
-
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new
-
javascript中Date对象应用之简易日历实现
前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛,本文将详细说明简易日历的实现思路. 效果演示 HTML说明 使用type=number的两个input分别作为年和月的输入控件,这样在高级浏览器下自带调节按钮 按照周日到周一的顺序进行星期的排列 <div class="box"> <header class='control'> <input id="conYear" class="con-i
-
详解JavaScript面向对象实战之封装拖拽对象
目录 概述 1.如何让一个DOM元素动起来 2.如何获取当前浏览器支持的transform兼容写法 3.如何获取元素的初始位置 5.我们需要用到哪些事件? 6.拖拽的原理 7. 我又来推荐思维导图辅助写代码了 8.代码实现 part1.准备工作 part2.功能函数 part3.声明三个事件的回调函数 9.封装拖拽对象 概述 为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖
-
详解 javascript对象创建模式
创建模式 在javascript中,主要有以下几种创建模式: 工厂模式 构造函数模式 原型模式 组合模式 动态原型模式 寄生构造函数模式 稳妥构造模式 工厂模式 工厂模式是软件工程领域一种广为人知的设计模式.javascript实现方式: function createPerson(name, obj, job) { var o = new Object(); o.name = name; o.obj = obj; o.job = job; o.sayName = function() { al