前几天学习了一下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对象的更多相关文章

  1. Javascript学习之Date对象详解

    1.定义 创建 Date 实例用来处理日期和时间.Date 对象基于1970年1月1日世界协调时起的毫秒数 2.语法 构造函数 new Date() new Date(value) value代表自世 ...

  2. JavaScript学习08 Cookie对象

    JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...

  3. JavaScript里的Date 对象属性及对象方法－－实现简单的日历

    上网搜索"js 日历插件"就会出来各种效果的功能丰富的日历插件,很多都可以下载源码,然后根据各自的需求对源码进行修改就可以直接用了. 但今天讲的不是如何使用这些插件,而是讲如何实现 ...

  4. Javascript中的date对象和getTime()方法

    有些时候我们需要计算两个日期间的天数,或者小时数等等.下面用JavaScript实现这个需求,然后学习一下需要用到的一些JavaScript函数. JavaScript程序如下: 1 <scri ...

  5. javascript类型系统——日期Date对象

    × 目录 [1]静态方法 [2]构造函数 [3]实例方法 前面的话 Date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口.Date对象是在早期java中的java.ut ...

  6. JavaScript学习总结 之对象

    JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...

  7. javascript 玩转Date对象

    前言:最近在做一个日期选择功能,在日期转换的时候经常换到晕,总结一下常用的Date对象的相关用法,方便日后直接查看使用- 1. new Date()的使用方法有: 不接收任何参数:返回当前时间: 接收 ...

  8. javascript中的Date对象和Math对象

    1.Date对象 1.创建Date对象 var time1=new Date() 方法1:不指定参数 var time1=new Date(); alert(time1.toLocaleString( ...

  9. JavaScript中的Date对象在IOS中的“大坑”

    在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象. 但是在IOS5版本里面的Safari解释ne ...

随机推荐

  1. hdu - 1689 Just a Hook (线段树区间更新)

    http://acm.hdu.edu.cn/showproblem.php?pid=1698 n个数初始每个数的价值为1,接下来有m个更新,每次x,y,z 把x,y区间的数的价值更新为z(1<= ...

  2. Maximum Product Subarray(最大连续乘积子序列)

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  3. 洛谷 P2033 Chessboard Dance

    P2033 Chessboard Dance 题目描述 在棋盘上跳舞是件有意思的事情.现在给你一张国际象棋棋盘和棋盘上的一些子以及你的初始位置和方向.求按一定操作后,棋盘的状态. 操作有四种,描述如下 ...

  4. 洛谷 P1318 积水面积

    P1318 积水面积 题目描述 一组正整数,分别表示由正方体迭起的柱子的高度.若某高度值为x,表示由x个正立方的方块迭起(如下图,0<=x<=5000).找出所有可能积水的地方(图中蓝色部 ...

  5. Servlet的服务端响应

    以下内容引用自http://wiki.jikexueyuan.com/project/servlet/server-response.html: 当一个Web服务器对浏览器响应一个HTTP请求时,响应 ...

  6. sh变更权限

    添加权限 假设您创建一个 “Hello world” 的 shell 脚本.当您第一次创建脚本时,它通常是不可执行的.使用 chmod 命令和 +x 选项添加执行权限,如清单 5 所示. 清单 5. ...

  7. 制作svg动画

    要实现一步一步画出来一个图片,css3做不到吧.除非一张张的图片定时显示.想不到别的招了.如今用的是一个插件,做了一个svg动画. 插件地址:http://lazylinepainter.info/ ...

  8. Java算法-奇怪的分式

    题目: 上小学的时候,小明常常自己发明新算法.一次,老师出的题目是: 1/4 乘以 8/5 小明竟然把分子拼接在一起,分母拼接在一起,答案是:18/45 老师刚想批评他.转念一想.这个答案凑巧也对啊, ...

  9. Unix/Linux 软件安装

    Unix/Linux 软件安装 首先我们明确.在Unix like的机器上,一套软件并不唯独一个程序,而是一堆程序代码文件. 比如main.c,haha.c,sin_value.c这三个源码文件. 1 ...

  10. dorker 安装

    http://www.docker.org.cn/book/install/install-docker-win7-win8-requirements-38.html1. 你先去下载Docker To ...