代码改变世界

JavaScript显示剩余时间

2011-07-08 09:58  薛凯凯圆滚滚  阅读(1752)  评论(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> 
本人脚本方面比较薄弱。正在研究前端当中。不好不正确可以指出。