前几天学习了一下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. Ubuntu 16.04安装Atom（加强版文本工具）

    安装: sudo add-apt-repository ppa:webupd8team/atom sudo apt-get update sudo apt-get install atom 或者直接上 ...

  2. 对一个deb包的解压、改动、又一次打包全过程方法

    /*********************************************************************  * Author  : Samson  * Date   ...

  3. Linux 中浏览网页的命令行

    Linux系统环境的WEB网站浏览器工具,常用的有w3m.Links.Lynx三个工具 第一.w3m w3m文本浏览器是基于GPL协议发布的且支持表格.颜色.SSL连接以及内链图像,因速度快而著称. ...

  4. makefile中的一点知识

    makefile文件里以下这一部分展开是什么样的呢? .. . mytarget=foo  $(mytarget): $(mytarget).c        gcc -o $(mytarget) $ ...

  5. Python输入输出及其他

    print用法 print会输出一个\n,也就是换行符,这样光标移动到了下一行行首,接着输出,之前已经通过stdout输出的东西依旧保留,而且保证我们在下面看到最新的输出结果.回车 \r 本义是光标重 ...

  6. C# MVC 用户登录状态判断 【C#】list 去重（转载） js 日期格式转换（转载） C#日期转换（转载） Nullable<System.DateTime>日期格式转换 （转载） Asp.Net MVC中Action跳转（转载）

    C# MVC 用户登录状态判断   来源:https://www.cnblogs.com/cherryzhou/p/4978342.html 在Filters文件夹下添加一个类Authenticati ...

  7. Python开发【第5节】【函数基础】

    1.函数 函数的本质就是功能的封装. 函数的作用 提升代码的重复利用率,避免重复开发相同代码 提高程序开发效率 便于程序维护 2.函数定义 def 函数名(参数): """ ...

  8. install Django in mac

    install Eclipse & Python(pydev) in mac install django in mac $ curl -O https://pypi.python.org/p ...

  9. tf.float32 implicity

    简介  |  TensorFlow https://tensorflow.google.cn/programmers_guide/low_level_intro 我们来构建一个简单的计算图.最基本的指 ...

  10. 【NOIP1999】【Codevs 1046】旅行家的预算

    http://codevs.cn/problem/1046/ Solution: 贪心,如果当前油价很低,它就比起当前剩余油的价还低就可以替换,并且每次加满,最后把剩的油卖掉即可 油价用单调链表(不知 ...