js 和 java 將時間倒計時顯示

 需求：用戶購買產品，創建了一個訂單，但是還么有支付，此時給用戶三十分鍾剩余支付時間，前台頁面做倒計時功能，時間到達時，更改訂單狀態 ，輸出的格式是：29:23

java 實現

package com.project.test;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;

import org.apache.commons.validator.Var;
import org.junit.Test;
import org.omg.CORBA.PRIVATE_MEMBER;

import com.sun.org.apache.xerces.internal.parsers.IntegratedParserConfiguration;

import IceInternal.Time;
import sun.util.logging.resources.logging;

/*
 * @author xiaoyi
 * @see 倒計時轉化工具類
 */
public class TimeConvert {
    
private final static Long DEFAULT_TIME=(long) (30*60*1000);  //超時時間
    
    
    /*
     * @see 將字符串轉化為時間格式
     */
    public static Date convertStrToDate(String strDate){
        Calendar calendar=Calendar.getInstance();
        if(strDate != null){
            String[] dateAndTime=strDate.split(" ");
            String[] dateStr=dateAndTime[0].split("-");
            String[] TimeStr=dateAndTime[1].split(":");
            calendar.set(Integer.parseInt(dateStr[0]), Integer.parseInt(dateStr[1])-1, Integer.parseInt(dateStr[2]),
                    Integer.parseInt(TimeStr[0]), Integer.parseInt(TimeStr[1]), Integer.parseInt(TimeStr[2]));
        }
        return calendar.getTime();
    }
    
    /*
     * 左邊添加0
     */
    public static String addLeftZero(Long tempNum){
        String num="00";
        if(tempNum<10){
            num="0"+tempNum;
        }else if(tempNum==0){
            num= "00";
        }else{
            num=""+tempNum;
        }
        
        return num;
    }
    
    /*
     * //將毫秒數轉化為倒計時 eg :29:30
     */
    public static String  formatDate(Long num){
        String tem="00:00";
        if(num>0){
            Long minute=num/60/1000;
            Long yushu=num%(60*1000);
            Long second=yushu/1000;
            tem= TimeConvert.addLeftZero(minute)+":"+TimeConvert.addLeftZero(second);
        }else{
            tem= "00:00";
        }
        return tem;
    }
    
    
    /*
     * 計算還剩多少時間
     */
    public String calculateTime(String initTime){
        String  remainTime="00:00"; //剩余時間
        if(initTime !=null){
        Date nowDate=new Date();
        Long timeLength=(long) (TimeConvert.convertStrToDate(initTime).getTime()+DEFAULT_TIME-nowDate.getTime()); //求當時間和下單時間的差（毫秒）
            remainTime=TimeConvert.formatDate(timeLength);
        }
        return remainTime; 
    }
    
    //測試
    public static void main(String[] args) {
        TimeConvert timeConvert=new TimeConvert();
        SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        System.out.println(new TimeConvert().calculateTime("2017-12-29 15:09:56"));
　　　　　　
    }
    
}

 

將后台的數據傳遞到jsp頁面，怎么做倒計時，代碼如下

 

var showTimeInterval;
$(function(){
    setTimeout(function(){
         if($(".needTime").length>0){
             liveTime.initData('${orderDetail.ORDERID}');
            //定時器，修改訂單剩余支付時間
            showTimeInterval=window.setInterval(
                    function(){
                        liveTime.remindTime($(".needTime").html(),".needTime",".title"); //將倒計時格式
                    },1000); //每一秒刷新一次
            } 
    },1000)
      
});

 創建一個js

livetime.js

/*計算訂單的剩余時間*/
var globeNowTime=new Date();
var oderId=null;
var liveTime={
        initData:function(orderIdArgs){
            oderId=orderIdArgs;
        },
        convertStrToDate:function(dateString) {  //將字符串時間轉化
            if (dateString) { //2017-12-01 13:12:15
                    var arg1 = dateString.split(" ");  //分割日期和時分秒 
                    var arg2 = arg1[0].split('-'); 
                    var arg3=  arg1[1].split(':');
                    var date = new Date(arg2[0], arg2[1]-1, arg2[2],arg3[0],arg3[1],arg3[2]);  //分別對應 年 月 日 時 分 秒
                    return date;
                            } 
            },
            addLeftZero:function(tempNum){  //兩位數，左邊補0
                if(tempNum<10){
                    return "0"+tempNum;
                }else if(tempNum==0){
                    return "00";
                }else{
                    return tempNum;
                }
            },
            formatDate:function(num){  //將毫秒數轉化為倒計時 eg :29:30
                if(num>0){
                    var minute=parseInt(num/60/1000);
                    var yushu=num%(60*1000);
                    var second=parseInt(yushu/1000);
                    return liveTime.addLeftZero(minute)+":"+liveTime.addLeftZero(second);
                }else{
                    return "00:00";
                }
            },
            updateOrderInfo:function(){  //更新數據庫訂單狀態
                var url = "/core/recordExplain.updLiveOrderState.do";
                var postData={"orderId":oderId};
                $.getMyJSON(url,postData,function(data){
                    console.info("更新成功");
                });
            },
        globeCalculateTime:function(initTime){  //列表調用此方法    e 傳入this
            var remainTime="00:00"; //剩余時間
            var timeLength=globeNowTime.getTime()-liveTime.convertStrToDate(initTime).getTime(); //求當時間和下單時間的差（毫秒）
                remainTime=liveTime.formatDate(timeLength);
            return remainTime;  
            },
        calculateTime:function(initTime){  //定時器調用此方法
            var remainTime="00:00"; //剩余時間
            var nowDate=new Date();
            var timeLength=nowDate.getTime()-liveTime.convertStrToDate(initTime).getTime(); //求當時間和下單時間的差（毫秒）
                remainTime=liveTime.formatDate(timeLength);
            return remainTime; 
        },
        remindTime:function(getTime,className,className2){  //剩余時間倒計時
            var tt="00:00";
            if(getTime != null){
                var tempTime=getTime.split(":");
                var timeLength=parseInt(tempTime[0])*60*1000+parseInt(tempTime[1])*1000-1000;
                if(timeLength<1000){  //當訂單剩余時間小於1 秒的時候，開始更新數據庫的訂單狀態
                    //TODO something
                    liveTime.updateOrderInfo();  //更新數據
                    //並且將定時器關閉
                    clearInterval(showTimeInterval); 
                    //修改名稱
                    $(""+className2).html("訂單失效");
                }else{
                    tt=liveTime.formatDate(timeLength);
                }
                
            }
            
            $(""+className).html(tt);
        }
        
        
}

 

    屏幕已經開始倒計時