Javascript Date对象 --- 时间戳及淘宝倒计时抢购功能实现-阿里云开发者社区

开发者社区> 技术小牛人> 正文

Javascript Date对象 --- 时间戳及淘宝倒计时抢购功能实现

简介:
+关注继续查看

时间戳(timestamp)是指格林威治时间 1970年 01月 01日 00时 00分 00秒 (北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数。



Date.parse( datestring ) 

parse( ) 方法可以解析一个日期的时间字符串,并返回 1970/01/01 午夜距离该日期时间的毫秒数

1
2
3
4
5
6
7
8
//获取2005年7月8日到格林威治时间相差的毫秒数
var timeDifference = Date.parse('2005/7/8');
console.log(timeDifference);  //1120752000000
 
//把毫秒数转成年
var years = timeDifference/(365*24*60*60*1000);
console.log('从1970年1月1日到2005年7月8日已经过了:'+years +'年了!');
//从1970年1月1日到2005年7月8日已经过了:35.538812785388124年了!



dateObject.getTime( )

返回 dateObject 指定的日期和时间据 1970/01/01午夜(GMT时间)之间的毫秒数

1
2
3
4
5
6
//获取当前客户端系统的时间
var now = new Date();
 
//获取1970/01/01午夜至今的毫秒数
var diffMilliSec = now.getTime();
console.log('1970/01/01至当前时间的毫秒数:' +diffMilliSec);  //1970/01/01至当前时间的毫秒数:1481352455327



Date( )

返回当前(执行程序那一刻)的时间和日期

1
2
3
4
//获取当前客户端系统的时间
var now = new Date();
console.log('当前时间是:' +now);
//当前时间是:Sat Dec 10 2016 13:26:25 GMT+0800 (中国标准时间)


(1)、按照某种格式输出一个日期对象

new Date('yyyy/mm/dd hh:mm:ss') / new Date(yyyy,mm,dd,hh,mm,ss);

1
2
3
4
5
6
7
//按照 YYYY-MM-DD hh:mm:ss的格式输出一个时间
var time1 = new Date('2016-08-25 12:26:36');
console.log(time1); //Thu Aug 25 2016 12:26:36 GMT+0800 (中国标准时间)
 
//按照 YYYY,MM,DD,hh,mm,ss的格式输出一个时间
var time2 = new Date(2008,09,12,08,08,08);
console.log(time2);  //Sun Oct 12 2008 08:08:08 GMT+0800 (中国标准时间)


(2)、用毫秒数创建一个对象

new Date( ms ); 

1
2
3
//用毫秒数返回一个日期时间
var time3 = new Date(1120752000000);
console.log(time3);  //Fri Jul 08 2005 00:00:00 GMT+0800 (中国标准时间)



dateObject.getFullYear( )

返回是一个四位数的年份

1
2
3
4
5
6
//获取当前客户端系统的时间
var now = new Date();
 
//获取当前时间的年份
var year = now.getFullYear();
console.log('当前时间的年份是:' +year); //当前时间的年份是:2016



dateObject.getMonth( )

返回值是 0(一月份)到 11(十二月份)之间的一个整数

1
2
3
4
5
6
//获取当前客户端系统的时间
var now = new Date();
 
//获取当前时间的月份
var month = now.getMonth()+1;
console.log('当前时间的月份是:' +month); //当前时间的月份是:12



dateObject.getDate( )

返回值是 1 ~ 31 之间的一个整数

1
2
3
4
5
6
//获取当前客户端系统的时间
var now = new Date();
 
//获取当前时间的天(是几号)
var date = now.getDate();
console.log('当前时间是:' +date +'号');  //当前时间是:10号



dateObject.getDay( )

返回值是 0(周日)到 6(周六)之间的一个整数

1
2
3
4
5
6
//获取当前客户端系统的时间
var now = new Date();
 
//获取当前时间的星期(是星期几)
var day = now.getDay();
console.log('当前时间是星期:' +day);  //当前时间是星期:6



dateObject.getHours( )

返回值是 0(午夜24点)到 23(晚上11点)之间的一个整数

1
2
3
4
5
6
7
//获取当前客户端系统的时间
var now = new Date();
 
//获取当前时间的小时
var hour = now.getHours();
hour = hour<10?0+hour:hour; //如果该值小于10,则仅返回一位数字
console.log('当前时间的小时是:' + now);  //当前时间的小时是:14



dateObject.getMinutes( )

返回值是 0 ~ 59 之间的一个整数

1
2
3
4
5
6
7
//获取当前客户端系统的时间
var now = new Date();
 
//获取当前时间的分钟数
var minute = now.getMinutes();
minute = minute<10?0+minute:minute;  //如果该值小于10,则仅返回一位数字
console.log('当前时间的分钟数是:' +minute);  //当前时间的分钟数是:30



dateObject.getSeconds( )

返回值是 0 ~ 59 之间的一个整数

1
2
3
4
5
6
7
//获取当前客户端系统的时间
var now = new Date();
 
//获取当前时间的秒数
var second = now.getSeconds();
second = second<10?0+second:second;  //如果该值小于10,则仅返回一位数字
console.log('当前时间的秒数是:' +second);  //当前时间的秒数是:29



dateObject.getMilliseconds( )

返回值是 0 ~ 999 之间的一个整数(如果该值小于 100,则仅返回两位数字,如果该值小于 10,则仅返回一位数字。)

1
2
3
4
5
6
//获取当前客户端系统的时间
var now = new Date();
 
//获取当前时间的毫秒数
var millisecond = now.getMilliseconds();
console.log('当前时间的毫秒数是:' +millisecond);  //当前时间的毫秒数是:915



dateObject.getTimezoneOffset( )

返回本地时间与 GMT时间之间的时间差,以分钟为单位

返回之所以以分钟计,而不是以小时计,原因是某些国家所占有的时区甚至不到一个小时的间隔

1
2
3
4
5
6
//获取当前客户端系统的时间
var now = new Date();
 
//获取本地时间与GMT时间之间的时间差
var diff= now.getTimezoneOffset();
console.log('本地时间与GMT时间的时间差是:' +diff +'分钟'); //本地时间与GMT时间的时间差是:-480分钟



注意:两个日期对象可相减,结果是毫秒差



dateObject.toString( )

将 dateObject 输出为国际标准时间格式

1
2
3
4
5
//获取当前客户端系统的时间
var now = new Date();
 
var t1 = now.toString();
console.log('将当前时间输出为国际标准格式:' +t1); //将当前时间输出为国际标准格式:Sat Dec 10 2016 15:06:43 GMT+0800 (中国标准时间)



dateObject.toLocaleString( )

将 dateObject 输出为当地完整标准时间格式

1
2
3
4
5
//获取当前客户端系统的时间
var now = new Date();
 
var t2 = now.toLocaleString();
console.log('将当前时间输出为本地标准时间格式:' +t2); //将当前时间输出为本地标准时间格式:2016/12/10 下午3:11:00



dateObject.toLocaleDateString( )

将 dateObject 输出为当地时间格式,仅包含日期

1
2
3
4
5
//获取当前客户端系统的时间
var now = new Date();
 
var t3 = now.toLocaleDateString();
console.log('当地时间格式,仅包含日期:' +t3); //当地时间格式,仅包含日期:2016/12/10




dateObject.toLocaleTimeString( )

将 dateObject 输出为当地时间格式,仅包含日期

1
2
3
4
5
//获取当前客户端系统的时间
var now = new Date();
 
var t4 = now.toLocaleTimeString();
console.log('当地时间格式,仅包含时间:' +t4); //当地时间格式,仅包含时间:下午3:15:08



马上就双十二剁手节了,咱们也可以把这些知识串起来做一个简单的抢购倒计时功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #timeArea{color:#f00;}
        #timeArea span{
            border:1px solid #ddd;
            padding:5px;
            margin:0 5px;
            -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
        }
    </style>
</head>
<body>
 
<div id="timeArea"></div>
 
<script src="dist/js/jquery-1.8.3.min.js"></script>
<script>
    countDown();
    function countDown(){
        //定义抢购开始的时间
        var start = new Date('2016/12/9 00:00:00');
        //把开始的时间转为毫秒数
        start = Date.parse(start);
 
        //定义抢购结束的时间
        var end = new Date('2016/12/10 23:59:59');
        //把结束的时间转为毫秒数
        end = Date.parse(end);
 
        //定义当前的时间
        var now = new Date();
        //把当前时间转为毫秒数
        now = Date.parse(now);
 
        var timeArea = $('#timeArea');
        if(now<start){
            timeArea.html('抢购尚未开始,请耐心等待!')
        }else if(now>end){
            timeArea.html('抢购已经结束,请持续关注本站,祝您下轮抢购成功!')
        }else{
            //倒计时的时间的毫秒差
            var diff = end - now;
 
            var date = parseInt(diff/(24*60*60*1000));
            //获取倒计时结束的小时数
            var hour = parseInt(diff/(60*60*1000)-date*24);
            hour=hour<10?'0'+hour:hour;
            //获取倒计时结束的分钟数
            var minute = parseInt(diff/(60*1000) -date*24*60 -hour*60);
            minute=minute<10?'0'+minute:minute;
            //获取倒计时结束的秒数
            var second = parseInt(diff/1000 - date*24*60*60 - hour*60*60 - minute*60);
            timeArea.html('抢购剩余时间:<span>'+date+'</span>天'+'<span>'+hour+'</span>小时'+'<span>'+minute+'</span>分钟'+'<span>'+second+'</span>秒')
        }
        setTimeout('countDown()',1000);
    }
 
 
 
</script>
</body>
</html>


效果:

wKioL1hLty-B-r92AADCddwSbvo867.gif

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1881498



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java 8中 Date 获取时间所在 周一,月第一天,季度第一天,年第一天的方式
Java 8 中 日期,时间API 完全重构。抛弃了原来非常复杂的 calendar. 还加入了线程安全的等更加友好的API。本文主要是记录分享 常用的 时间所在周,月,季度,年的 第一天获取方式。
83 0
jQuery EasyUI API 中文文档 - 日期时间框(DateTimeBox)
DateTimeBox  日期时间框 扩展自 $.fn.datebox.defaults。用 $.fn.datetimebox.defaults 重写了 defaults。     依赖 datebox timespinner 用法 1.
953 0
浅谈python的对象的三大特性之继承
前面我们定义了人的类,并用这个类实例化出两个人jack和lily,查看了它们的内存空间。 现在我们再来看看类中所存在的对向对象编程的三大特性之继承的一些特性。 前面定义了一个人的类,可是我们还知道,人都有属于自己的职业,比如说老师类,医生类,警察类等。
774 0
Java Data Access Object Pattern(数据访问对象模式)
数据访问对象模式(Data Access Object Pattern)或 DAO 模式用于把低级的数据访问 API 或操作从高级的业务服务中分离出来。以下是数据访问对象模式的参与者。
710 0
了解超然物外的static-方法篇 | 带你学《Java面向对象编程》之十一
本节简明赅要地指出了静态方法的一些使用场景与限制,并结合实际案例展示了一项static的用途。
1142 0
了解超然物外的static-属性篇 | 带你学《Java面向对象编程》之十
本节通过传统类与使用static的类之间的比较,突出了static对于存储超大量重复性数据的优异表现。
920 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载