倒计时
1 Date()对象
var myDate=new Date()
Date 对象会自动把当前日期和时间保存为其初始值。
2 getTime()函数
2.1 定义和用法
getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
2.2 语法
dateObject.getTime()
2.3 返回值
dateObject 指定的日期和时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数。
该方法总是结合一个 Date 对象来使用。
2.4 例子
在本例中,我们将取得从 1970/01/01 至今的毫秒数,并输出它:
<script type="text/javascript">
var d = new Date()
document.write(d.getTime() + " milliseconds since 1970/01/01")
//1468916791243 milliseconds since 1970/01/01
</script>
3 setTime()
3.1 定义和用法
setTime() 方法以毫秒设置 Date 对象。
3.2 语法
dateObject.setTime(millisec)
millisec:要设置的日期和时间据 GMT 时间 1970 年 1 月 1 日午夜之间的毫秒数。这种类型的毫秒值可以传递给 Date() 构造函数,可以通过调用 Date.UTC() 和 Date.parse() 方法获得该值。以毫秒形式表示日期可以使它独立于时区。
3.3 返回值
返回参数 millisec。在 ECMAScript 标准化之前,该方法不返回值。
该方法总是结合一个 Date 对象来使用。
3.4 例子
在本例中,我们将向 1970/01/01 添加 77771564221 毫秒,并显示新的日期和时间:
<script type="text/javascript">
var d = new Date()
d.setTime(77771564221)
document.write(d)
//Mon Jun 19 1972 11:12:44 GMT+0800 (CST)
</script>
4 时间与毫秒数互相转换
4.1 日期时间转换成毫秒时间
var time = (new Date("2016/07/19 16:38:04")).getTime(); //得到毫秒数
//1468917484000
若时间为其他格式,最好转换为统一格式:2016/07/19 16:38:04 再进行毫秒转换。如果不使用统一格式,在微信中会出错。
例:
var oldTime = '2016-07-19 16:38:04';
var newTime = oldTime.replace(new RegExp("-","gm"),"/");
var time = (new Date(newTime)).getTime(); //得到毫秒数
//1468917484000
4.2 毫秒数时间转化为日期时间
var oldTime = 1468917484000;
var newTime = new Date(oldTime); //就得到普通的时间了
//Tue Jul 19 2016 16:38:04 GMT+0800 (CST)
5 倒计时Demo
js文件(countdown.js)
function countdown(endTime,callback){
function fomtime()
{
var systemTime=new Date();
var overTime=new Date();
overTime.setTime(endTime);
var difftime = parseInt((overTime.valueOf() - systemTime.valueOf())/1000);
if( difftime <= 0 ){
callback && callback();
return;
}
var day = parseInt(difftime / (60*60*24));
var dayRemainder = difftime % (60*60*24);
var hours = parseInt(dayRemainder / (60*60));
var hoursRemainder = dayRemainder % (60*60);
var minu = parseInt(hoursRemainder / 60);
var seco = hoursRemainder % 60;
callback && callback({
day: day < 10 ? '0'+day : day,
hours: hours < 10 ? '0'+hours : hours,
minu: minu < 10 ? '0'+minu : minu,
seco: seco < 10 ? '0'+seco : seco
});
setTimeout(function(){
fomtime()
},1000);
}
fomtime();
}
html文件(index.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时</title>
</head>
<body>
<div style='margin-top:300px;margin-left:300px'>
倒计时:
<span id='day'></span>天
<span id='hours'></span>小时
<span id='minu'></span>分
<span id='seco'></span>秒
</div>
<script type="text/javascript" src='countdown.js'>
<script type="text/javascript">
var time='2016-7-21 13:34:35'; //以毫秒为单位
time = time.replace(new RegExp("-","gm"),"/");
time = (new Date(time)).getTime();
countdown(time,callback);
function callback(time){
if( !time ){
document.getElementById('day').innerHTML='00';
document.getElementById('hours').innerHTML='00';
document.getElementById('minu').innerHTML='00';
document.getElementById('seco').innerHTML='00';
}else{
document.getElementById('day').innerHTML= time.day;
document.getElementById('hours').innerHTML=time.hours;
document.getElementById('minu').innerHTML=time.minu;
document.getElementById('seco').innerHTML=time.seco;
}
}
</script>
</body>
</html>