您现在的位置是:网站首页 > 心得笔记
倒计时效果
简介在网站开发过程中,常常需要设置活动等的倒计时,这里刚好总结下关于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); } }