Javascript Date对象 --- 时间戳及淘宝倒计时抢购功能实现
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript Date对象 --- 时间戳及淘宝倒计时抢购功能实现相关的知识,希望对你有一定的参考价值。
时间戳(timestamp)是指格林威治时间 1970年 01月 01日 00时 00分 00秒 (北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数。
Date.parse( datestring )
parse( ) 方法可以解析一个日期的时间字符串,并返回 1970/01/01 午夜距离该日期时间的毫秒数
//获取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时间)之间的毫秒数
//获取当前客户端系统的时间 var now = new Date(); //获取1970/01/01午夜至今的毫秒数 var diffMilliSec = now.getTime(); console.log(‘1970/01/01至当前时间的毫秒数:‘ +diffMilliSec); //1970/01/01至当前时间的毫秒数:1481352455327
Date( )
返回当前(执行程序那一刻)的时间和日期
//获取当前客户端系统的时间 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);
//按照 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 );
//用毫秒数返回一个日期时间 var time3 = new Date(1120752000000); console.log(time3); //Fri Jul 08 2005 00:00:00 GMT+0800 (中国标准时间)
dateObject.getFullYear( )
返回是一个四位数的年份
//获取当前客户端系统的时间 var now = new Date(); //获取当前时间的年份 var year = now.getFullYear(); console.log(‘当前时间的年份是:‘ +year); //当前时间的年份是:2016
dateObject.getMonth( )
返回值是 0(一月份)到 11(十二月份)之间的一个整数
//获取当前客户端系统的时间 var now = new Date(); //获取当前时间的月份 var month = now.getMonth()+1; console.log(‘当前时间的月份是:‘ +month); //当前时间的月份是:12
dateObject.getDate( )
返回值是 1 ~ 31 之间的一个整数
//获取当前客户端系统的时间 var now = new Date(); //获取当前时间的天(是几号) var date = now.getDate(); console.log(‘当前时间是:‘ +date +‘号‘); //当前时间是:10号
dateObject.getDay( )
返回值是 0(周日)到 6(周六)之间的一个整数
//获取当前客户端系统的时间 var now = new Date(); //获取当前时间的星期(是星期几) var day = now.getDay(); console.log(‘当前时间是星期:‘ +day); //当前时间是星期:6
dateObject.getHours( )
返回值是 0(午夜24点)到 23(晚上11点)之间的一个整数
//获取当前客户端系统的时间 var now = new Date(); //获取当前时间的小时 var hour = now.getHours(); hour = hour<10?0+hour:hour; //如果该值小于10,则仅返回一位数字 console.log(‘当前时间的小时是:‘ + now); //当前时间的小时是:14
dateObject.getMinutes( )
返回值是 0 ~ 59 之间的一个整数
//获取当前客户端系统的时间 var now = new Date(); //获取当前时间的分钟数 var minute = now.getMinutes(); minute = minute<10?0+minute:minute; //如果该值小于10,则仅返回一位数字 console.log(‘当前时间的分钟数是:‘ +minute); //当前时间的分钟数是:30
dateObject.getSeconds( )
返回值是 0 ~ 59 之间的一个整数
//获取当前客户端系统的时间 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,则仅返回一位数字。)
//获取当前客户端系统的时间 var now = new Date(); //获取当前时间的毫秒数 var millisecond = now.getMilliseconds(); console.log(‘当前时间的毫秒数是:‘ +millisecond); //当前时间的毫秒数是:915
dateObject.getTimezoneOffset( )
返回本地时间与 GMT时间之间的时间差,以分钟为单位
返回之所以以分钟计,而不是以小时计,原因是某些国家所占有的时区甚至不到一个小时的间隔
//获取当前客户端系统的时间 var now = new Date(); //获取本地时间与GMT时间之间的时间差 var diff= now.getTimezoneOffset(); console.log(‘本地时间与GMT时间的时间差是:‘ +diff +‘分钟‘); //本地时间与GMT时间的时间差是:-480分钟
注意:两个日期对象可相减,结果是毫秒差
dateObject.toString( )
将 dateObject 输出为国际标准时间格式
//获取当前客户端系统的时间 var now = new Date(); var t1 = now.toString(); console.log(‘将当前时间输出为国际标准格式:‘ +t1); //将当前时间输出为国际标准格式:Sat Dec 10 2016 15:06:43 GMT+0800 (中国标准时间)
dateObject.toLocaleString( )
将 dateObject 输出为当地完整标准时间格式
//获取当前客户端系统的时间 var now = new Date(); var t2 = now.toLocaleString(); console.log(‘将当前时间输出为本地标准时间格式:‘ +t2); //将当前时间输出为本地标准时间格式:2016/12/10 下午3:11:00
dateObject.toLocaleDateString( )
将 dateObject 输出为当地时间格式,仅包含日期
//获取当前客户端系统的时间 var now = new Date(); var t3 = now.toLocaleDateString(); console.log(‘当地时间格式,仅包含日期:‘ +t3); //当地时间格式,仅包含日期:2016/12/10
dateObject.toLocaleTimeString( )
将 dateObject 输出为当地时间格式,仅包含日期
//获取当前客户端系统的时间 var now = new Date(); var t4 = now.toLocaleTimeString(); console.log(‘当地时间格式,仅包含时间:‘ +t4); //当地时间格式,仅包含时间:下午3:15:08
马上就双十二剁手节了,咱们也可以把这些知识串起来做一个简单的抢购倒计时功能:
<!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>
效果:
本文出自 “dapengtalk” 博客,请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1881498
以上是关于Javascript Date对象 --- 时间戳及淘宝倒计时抢购功能实现的主要内容,如果未能解决你的问题,请参考以下文章