您现在的位置是:网站首页 > 心得笔记
倒计时效果
简介在网站开发过程中,常常需要设置活动等的倒计时,这里刚好总结下关于javascript里的Date
在讲倒计时之前,需要先了解以下几个方法:
/* * Date() 返回当前的日期和时间 * getMonth()+1 返回月份(0-11) * getDate() 返回日期(1-31) * getDay() 返回星期几(0-6) * getHours() 返回小时数(0-23) * getMinutes() 返回分钟数(0-59) * getSeconds() 返回秒数(0-59) * getTime() 返回毫秒数 * getYear() 返回年份 如19 * getFullYear() 返回年完整格式 如2019 * * 使用方法: * var myDate = new Date(); * var year = myDate.getFullYear(); */
1、输出系统时间
$(function(){
showTime();
});
//始终两位数显示
function checkTime(i) {
if (i < 10) {
i = '0'+i;
}
return i;
}
function showTime() {
var weekArray = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var myDate = new Date();
// alert(myDate);//Tue Mar 12 2019 14:04:11 GMT+0800 (香港标准时间)
var year = myDate.getFullYear();
var month = myDate.getMonth()+1;
var date = myDate.getDate();
var day = weekArray[myDate.getDay()];
var hour = myDate.getHours();
var minute = checkTime(myDate.getMinutes());
var second = checkTime(myDate.getSeconds());
$(".date").html(year+'年'+month+'月'+date+'日'+hour+'时'+minute+'分'+second+'秒'+day);
setTimeout(showTime,500);//每个param2毫秒执行一次这个param1函数
}2、高考倒计时
//高考倒计时 距离高考还有几天(知道结束时间和当前时间,当前时间又是动态获取到的 用结束的-当前的=所剩时间)
$(function(){
//当前时间
var curtime = new Date();
//结束时间
var endtime = new Date('2019,6,6');
//时间差
var lefttime = endtime.getTime() - curtime.getTime();//毫秒数
//毫秒数转为天 1天=24*60*60*1000
var leftday = Math.ceil(lefttime/(24*60*60*1000));//Math.ceil()向上取整 大于或等于参数Math.ceil(12.0) 12 Math.ceil(12.1) 13
$(".date").html(leftday);
})3、限时抢购倒计时
//3、限时抢倒计时 还剩10天12小时20分20秒
$(function(){
showTime();
});
function showTime(){
//结束时间
var endtime = new Date('2019/6/6,09:00:00');
//当前时间
var curtime = new Date();
//时间差
var lefttime = parseInt((endtime.getTime() - curtime.getTime())/1000);//秒数
var day = parseInt(lefttime/(24*60*60));//天 parseInt()取整数
var hour = parseInt(lefttime/(60*60)%24);//小时数%24=天......小时
var minute = parseInt(lefttime/60%60);//分钟
var second = parseInt(lefttime%60);
// alert(day+'---'+hour+'---'+minute+'---'+second);//18035074---432841785---25970507111
if (lefttime <= 0) {
$(".date").html('团购结束');
} else {
$(".date").html(day+'天'+hour+'小时'+minute+'分钟'+second+'秒');
setTimeout(showTime,500);
}
}