• JavaScript显示剩余时间


    今天要做一个显示倒数计时还有几天几小时几分钟几秒的功能。上网看了下看到淘宝写的原代码。于是动了动脑筋把它给改了

     
    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> 
    
    本人脚本方面比较薄弱。正在研究前端当中。不好不正确可以指出。
  • 相关阅读:
    Gin框架结合gorm实现mysql增删改查
    Gin框架安装使用
    Golang常用排序算法比较
    Golang获取时间戳及格式化
    Golang使用goroutine交替打印序列
    Golang基础编程(六)-并发编程
    Golang基础编程(五)-指针
    Golang基础编程(四)-Map(集合)、Slice(切片)、Range
    模块化前端开发入门指南(三)
    模块化前端开发入门指南(二)
  • 原文地址:https://www.cnblogs.com/79039535/p/2100706.html
Copyright © 2020-2023  润新知