javascript学习之Date对象
前几天学习了一下date对象，于是写了一个简单的时间显示放到博客页面里(位于右上角)，类似这样的效果，时：分：秒 xxxx年xx月xx日。
下面来说一下具体实现步骤。
首先，既然date是一个对象，那么，在使用之前就需要创建这个对象var myDate = new Date();由于函数较简单且这个对象用的比较多，我就把它放到全局变量里面了。接着就要用这个对象现实时分秒年月日的显示。
首先，写显示时分秒的子函数。这个函数只要获取到时间之后显示到页面即可，需要的额外处理是分和秒只有一位数时要在前面加个0，然后这个函数要每隔1秒调用一次。
/*****************show hour & minutes & seconeds****************/
function showHms(){
var myDate = new Date();
var h=myDate.getHours();
var m=myDate.getMinutes();
var s=myDate.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById("hms").innerHTML=h+":"+m+":"+s;
t=setTimeout("showHms()",1000);
} /**********add a zero in front of numbers<***********/
function checkTime(i){
if (i<10){
i="0" + i;
}
return i;
}
然后写显示星期的函数。getDay()返回的是阿拉伯数字0~6，为了把数字转换为星期X，需要把星期几的字符串放到数组里，getDay()返回的数字对应到数组下标即可。
/**************show weekday*****************/
function showWeekday(){
var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.getElementById("weekday").innerHTML = weekday[myDate.getDay()];
}
再写显示年月日的函数。要注意getMonth()返回的数字比实际月份小一个月，所以要加1，写成这样(myDate.getMonth()+1)后才可以用连接符。
/***********show year & month & day************/
function showYmd(){
document.getElementById("ymd").innerHTML = myDate.getFullYear()+"年"+(myDate.getMonth()+1)+"月"+myDate.getDate()+"日";
}
最后根据需要调用上面写的三个子函数，需要显示哪个就调用哪个。
/************show time*****************/
function startTime(){
showHms();
showWeekday();
showYmd();
}
最后就是显示函数在上面时候调用了，我们可以选择在页面加载时调用<body onload="startTime()">，也可以在页面加载完成时调用，把js代码放到页面代码最后面</body>前面。
下面贴出完整代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head> <body> <div id="time">
<span id="hms"></span>
<span id="weekday"></span>
<span id="ymd"></span>
</div> <script type ="text/javascript">
var myDate = new Date(); /*****************show hour & minutes & seconeds****************/
function showHms(){
var myDate = new Date();
var h=myDate.getHours();
var m=myDate.getMinutes();
var s=myDate.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById("hms").innerHTML=h+":"+m+":"+s;
t=setTimeout("showHms()",1000);
} /**********add a zero in front of numbers<10***********/
function checkTime(i){
if (i<10){
i="0" + i;
}
return i;
} /**************show weekday*****************/
function showWeekday(){
var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.getElementById("weekday").innerHTML = weekday[myDate.getDay()];
} /***********show year & month & day************/
function showYmd(){
document.getElementById("ymd").innerHTML = myDate.getFullYear()+"年"+(myDate.getMonth()+1)+"月"+myDate.getDate()+"日";
} /************show time*****************/
function startTime(){
showHms();
showWeekday();
showYmd();
} startTime(); </script> </body>
</html>
javascript学习之Date对象的更多相关文章
- Javascript学习之Date对象详解
1.定义 创建 Date 实例用来处理日期和时间.Date 对象基于1970年1月1日世界协调时起的毫秒数 2.语法 构造函数 new Date() new Date(value) value代表自世 ...
- JavaScript学习08 Cookie对象
JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...
- JavaScript里的Date 对象属性及对象方法－－实现简单的日历
上网搜索"js 日历插件"就会出来各种效果的功能丰富的日历插件,很多都可以下载源码,然后根据各自的需求对源码进行修改就可以直接用了. 但今天讲的不是如何使用这些插件,而是讲如何实现 ...
- Javascript中的date对象和getTime()方法
有些时候我们需要计算两个日期间的天数,或者小时数等等.下面用JavaScript实现这个需求,然后学习一下需要用到的一些JavaScript函数. JavaScript程序如下: 1 <scri ...
- javascript类型系统——日期Date对象
× 目录 [1]静态方法 [2]构造函数 [3]实例方法 前面的话 Date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口.Date对象是在早期java中的java.ut ...
- JavaScript学习总结 之对象
JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...
- javascript 玩转Date对象
前言:最近在做一个日期选择功能,在日期转换的时候经常换到晕,总结一下常用的Date对象的相关用法,方便日后直接查看使用- 1. new Date()的使用方法有: 不接收任何参数:返回当前时间: 接收 ...
- javascript中的Date对象和Math对象
1.Date对象 1.创建Date对象 var time1=new Date() 方法1:不指定参数 var time1=new Date(); alert(time1.toLocaleString( ...
- JavaScript中的Date对象在IOS中的“大坑”
在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象. 但是在IOS5版本里面的Safari解释ne ...
随机推荐
- Delphi：Indy9的IdFTP完全使用
Delphi 7自带的INDY控件,其中包含了IdFTP,可以方便的实现FTP客户端程序,参考自带的例子,其中有上传.下载.删除文件,但是不包含对文件夹的操作,得自己实现上传.下载.删除整个文件夹(带 ...
- [bzoj2463][中山市选2009]谁能赢呢？_博弈论
博弈论 bzoj-2463 中山市选-2009 题目大意:题目链接. 注释:略. 想法: 如果$n$是偶数的话就可以被多米诺骨牌恰好覆盖,这样的话只需要先手先走向(1,1)对应的第二段,后者必定会将棋 ...
- [bzoj4698][Sdoi2008]Sandy的卡片_后缀数组_二分/单调队列_双指针
Sandy的卡片 bzoj-4698 Sdoi-2008 题目大意:题目链接. 注释:略. 想法: 这个题跟一个Usaco的题特别像.我们把这些串差分 现在我们要求的就是公共子串且出现次数不少于$k$ ...
- 用JQ实现基础的添加,插入,删除功能。
在eclipse里面运行代码即可,如果您是其他应用,请选择对您有帮助的代码即可,如果有写错或不懂的地方请联系QQ:1633420056,谢谢,祝学习进步 <!DOCTYPE html>&l ...
- Ubuntu 16.04 GNOME在桌面左侧添加启动器（Launcher）
安装Dash to Dock: git clone https://github.com/micheleg/dash-to-dock.git cd dash-to-dock/ make make in ...
- Builder设计模式
Builder模式,又称生成器或构建者模式,属于对象创建型模式,侧重于一步一步的构建复杂对象,只有在构建完成后才会返回生成的对象.Builder模式将一个复杂对象的构建与它的表示分离,使得同样的构建过 ...
- go语言中的timer 和ticker定时任务
https://mmcgrana.github.io/2012/09/go-by-example-timers-and-tickers.html --------------------------- ...
- MapReduce的Reduce side Join
1. 简单介绍 reduce side join是全部join中用时最长的一种join,可是这样的方法可以适用内连接.left外连接.right外连接.full外连接和反连接等全部的join方式.r ...
- linux下alias命令具体解释
linux下alias命令具体解释 用途说明 设置命令的别名.在linux系统中假设命令太长又不符合用户的习惯,那么我们能够为它指定一个别名. 尽管能够为命令建立"链接" 解决长文 ...
- OpenStack QA
1 能用devstack部署生产环境的OpenStack吗? 不能,记着,不能!有些选项对生产环境不合适.生产环境能够考虑使用Crowbar部署OpenStack.相关文档例如以下:http://op ...