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



相关文章
|
16天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
116 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
4月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
2月前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
48 10
|
2月前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
58 8
|
4月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
152 57
|
3月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
4月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
50 1
JavaScript中对象的数据拷贝
|
4月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
4月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
78 5

热门文章

最新文章