前几天学习了一下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. POJ 1061 青蛙的约会【扩欧】

    题意: 两只青蛙在地球同一纬度不同位置x,y向同一方向跳,每只青蛙跳的长度不同m,n,纬线总长度l,问两只青蛙是否能相遇,跳几次才相遇. 分析: 可知,问题可转化为求(m−n)∗a≡(y−x)(mod ...

  2. Delphi ADO的Lookup类型字段的问题

    关于ADO数据集控件中的Lookup类型字段,在其Lookupkeyfields属性指向的字段中存在NULL值的,就会出现'EOleException with message '发生未知错误',这个 ...

  3. Spring集成Jedis（不依赖spring-data-redis）（单机/集群模式）（待实践）

    Jedis是Redis的Java客户端,Spring将Jedis连接池作为一个Bean来配置.如果在Spring Data的官网上可以发现,Spring Data Redis已经将Jedis集成进去了 ...

  4. [Web Analytics] Into to Web Analytics

    Just to get started for myself. Any developer who doesn't care about the business is not a good soft ...

  5. linux一些硬件详情查看的高级方法（网卡，内存，硬盘，cpu）

    网卡-lspci内存大小和个数—— dmidecode|grep -A16 "Memory Device$"查看硬盘型号——smartctl -a /dev/sda查看硬盘大小—— ...

  6. Highcharts构建加权平均值图表

    Highcharts构建加权平均值图表 加权平均值图表是将图表中多个数据列值.依据加权算法计算获取平均值,并加入生成一个加权折线.在这里,我们直接使用第三方插件Dynamic Weighted Ave ...

  7. CentOS7.3编译安装Nginx设置开机启动

    起因 最近想玩nginx了,本来用yum -y install nginx安装也启动好了,但是买了本<Nginx高性能Web服务器详解>,我咋能辜负我的书费呢?于是我就直接ps -ef | ...

  8. 满足qps 同时兼顾 数据生产速率

    满足qps 同时兼顾  数据生产速率

  9. Nginx入门详解文档

    1 文章内容 掌握nginx+tomcat反向代理的使用方法. 掌握nginx作为负载均衡器的使用方法. 掌握nginx实现web缓存方法. 2 nginx介绍 2.1 什么是nginx Nginx是 ...

  10. 【HDU 2010】水仙花数

    http://acm.hdu.edu.cn/showproblem.php?pid=2010 春天是鲜花的季节,水仙花就是其中最迷人的代表,数学上有个水仙花数,他是这样定义的:“水仙花数”是指一个三位 ...