一个简单的JS倒计时

时间:2023-02-01 22:04:39
看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时。全当学习JS。
主要思路:主要用到Date对象,声明一个变量获取当前时间,在声明一个变量获取结束时间,结束时间-当前时间=剩余时间(倒计时),中间涉及到一些简单的数学运算和取整。
注:getDay()获取到星期的时候是0~6,0为星期天。所以声明一个数组来转换成大写的星期。在数组[getDay()]就得到星期格式。
HTML内容:
<span>显示当前时间:</span>
<span id="show" style="color: red"></span>
<div id='timeshow' style="color: red"></div>
<div id='timeleft' style="color:red;"></div>
JS内容:
showTime();
function showTime(){
var myData=new Date(); //获取当前时间
var endTime=new Date('2050/10/22,12:20:12') //设定倒计时结束时间
var lefttime=(endTime.getTime()-myData.getTime())/(24*60*60*1000); //结束时间-当前时间=剩下时间(毫秒数)把得到的数字转化成毫秒数(得到差的毫秒数/一天的毫秒数=天数)
//一天=24小时 1小时=60分钟 1分钟=60秒 1秒=1000毫秒
lefttime=Math.ceil(lefttime) //对得到的毫秒数进行四舍五入
 
var leftHMS=parseInt((endTime.getTime()-myData.getTime())/1000); //得到剩余的毫秒数
var ds=parseInt(leftHMS/(24*60*60)); //换算成天
var xs=parseInt(leftHMS/(60*60)%24); //得到小时 取模24小时
var fz=parseInt(leftHMS/60%60); //得到分钟
var mz=parseInt(leftHMS%60); //得到秒数
 
 
var year=myData.getFullYear(); //获取年
var month=myData.getMonth()+1; //获取月 必须+1
var data=myData.getDate(); //获取日
var h=myData.getHours();
var m=myData.getMinutes();
var s=myData.getSeconds();
m=checkTime(m);
s=checkTime(s);
function checkTime(i){
if(i<10){
return '0'+i;
}else{
return i;
}
};
//分钟和秒数都是一位数,所以需要用0补位
var d=myData.getDay(); //获取星期(因星期打印出事0~6,所以用数组形式转化成对应的星期)
var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
document.getElementById("show").innerHTML=year+'年'+month+'月'+data+'日'+'&nbsp;'+weekday[myData.getDay()]+'&nbsp;'+
h+':'+m+':'+s;
//打印出年月日
document.getElementById("timeshow").innerHTML='离高考还有:'+lefttime+'天';
//打印出倒计时天数
document.getElementById('timeleft').innerHTML='离世界末日还有:'+ds+'天'+xs+'小时'+fz+'分钟'+mz+'秒';
}
setInterval(function(){
showTime();
},500)
//定时调用showTime函数