JavaScript显示剩余时间
2011-07-08 09:58 薛凯凯圆滚滚 阅读(1750) 评论(0) 编辑 收藏 举报今天要做一个显示倒数计时还有几天几小时几分钟几秒的功能。上网看了下看到淘宝写的原代码。于是动了动脑筋把它给改了
function showtime(ts) { var timerun = false; //是否启用 var Temp; //输出字符串 var tempts = ts - 1; //剩余秒数-1 var startTime = (new Date()).getTime(); //当前时间 var dateLeft = 0; //剩余天数 var hourLeft = 0; //剩余小时 var minuteLeft = 0; //剩余分钟 var secondLeft = 0; //剩余秒钟 var dateLeftStr = '';//剩余天数字符 var hourLeftStr = '';//剩余小时字符 var minuteLeftStr = '';//剩余分钟字符 var secondLeftStr = '';//剩余秒钟字符 if (ts < 0)//剩余秒数为负则全部清0 { ts = 0; dateLeft = 0; hourLeft = 0; minuteLeft = 0; secondLeft = 0; } else { dateLeft = parseInt(ts / 86400); //折合天数 ts = ts - dateLeft * 86400; //剩余秒数 hourLeft = parseInt(ts / 3600); //折合小时 ts = ts - hourLeft * 3600; //剩余秒数 minuteLeft = parseInt(ts / 60); //折合分钟 secondLeft = ts - minuteLeft * 60; //剩余秒数 dateLeftStr = dateLeft; hourLeftStr = hourLeft; minuteLeftStr = minuteLeft; secondLeftStr = secondLeft; } if (hourLeft < 10) hourLeftStr = '0' + hourLeft; //小时左补0 if (minuteLeft < 10) minuteLeftStr = '0' + minuteLeft; //分钟左补0 if (secondLeft < 10) secondLeftStr = '0' + secondLeft; //秒钟左补0 if (dateLeft > 0) //天数> 0,显示天数 dateLeftStr = dateLeftStr + '天 '; else //否则不显示天数 dateLeftStr = " "; if (hourLeft > 0) //小时> 0,显示小时数 hourLeftStr = hourLeftStr + '小时 '; else { //否则判断天数是否也为0 if (dateLeft != " ")//天数不为0 hourLeftStr = "00" + '小时 '; //显示小时数为00 else hourLeftStr = " "; //否则不显示小时数 } if (minuteLeft > 0)//分钟是否为0 minuteLeftStr = minuteLeftStr + '分钟 '; //显示分钟 else { if (dateLeft != " " || hourLeft != " ") minuteLeftStr = "00" + '分钟 '; //天数和小时有一个不为0则显示00分钟 else minuteLeftStr = " "; //否则不显示分钟 } if (secondLeft > 0) //秒钟是否为0 secondLeftStr = secondLeftStr + '秒 '; //不为0显示秒 else { if (dateLeftStr != " " || hourLeftStr != " " || minuteLeftStr != " ") secondLeftStr = "00" + '秒 '; //天数、小时、分钟有一个不为0则显示00秒 else secondLeftStr = " "; //否则不显示秒 } Temp = dateLeftStr + hourLeftStr + minuteLeftStr + secondLeftStr; //合并字符串 if (Temp == ' ') { Temp = " <B>结束</B> "; //时间到停止倒计时 } else { Temp = "" + Temp; timerun = true; } document.getElementById("showclock").innerHTML = Temp; if (timerun)//继续倒计时 setTimeout('showtime( ' + tempts + ') ', 1000); }
在document加载时调用
jquery写法
$(function () { showtime(290000); }
javascript写法
window.onload = function(){ showtime(290000); }
写完之后同事说他也写了一个对比了看看觉得他的思路也挺好的。附上原代码。可以在我的基础上改进,不过他的没有做补零
<script type="text/javascript"> var expire = 2648185; var expireTime = function(expires){ if(expires > 0){ var second = expires; } else{ var second = "0 分"; return second; } var day = hour = min = ""; if(second>86400){ day = Math.floor(second/86400)+"天 "; second = second%86400; } if(second>3600){ hour = Math.floor(second/3600)+"时 "; second = second%3600; } if(second>60){ min = Math.floor(second/60)+"分 "; second = second%60; } second = second+"秒"; return day+hour+min+second; } var timeEle = document.getElementById("expireTime"); var timer = window.setInterval(function(){ timeEle.innerHTML = expireTime(expire--); if(expire<0){ clearInterval(timer); } },1000) </script>