2014-09-23 4 views
0

카운트 다운을 만들려고합니다. 기본적으로 클라이언트가 주문한 시간이 있습니다 (이는 "2014-08-14 12:52:09"와 같이 db에 저장된 dateTime 형식으로되어 있습니다). 또한 주문을 완료하는 데 걸리는 시간도 있습니다. "1"45 "또는 분"45 ")자바 스크립트 카운트 다운

나는 웹에서 카운트 다운 스크립트를 얻었고 두 시간을 모두 포맷하는 방법을 생각해 내는데 시간이 너무 많이 걸린다. 스크립트는 이해

나는이 가끔뿐만 아니라 시간을 포함 할 수있다 주문 시간 ----> 12시 52분 9초 만료 시간 ---> 45분

만료 시간 dB에서 오는있어 :.예 : 만료 시간 ---> 1 시간 45 분.

나는 순간에 함수 내부에 동봉 된 웹에서 가져온 스크립트 :

JS : 어떤 도움이 크게 감사합니다

function clockTicking(){ 

// set the date we're counting down to 
    var target_date = new Date("Aug 15, 2019").getTime(); 

    // variables for time units 
    var days, hours, minutes, seconds; 

    // get tag element 


    // update the tag with id "countdown" every 1 second 
    setInterval(function() { 

    // find the amount of "seconds" between now and target 
    var current_date = new Date().getTime(); 
    var seconds_left = (target_date - current_date)/1000; 

    // do some time calculations 
    days = parseInt(seconds_left/86400); 
    seconds_left = seconds_left % 86400; 

    hours = parseInt(seconds_left/3600); 
    seconds_left = seconds_left % 3600; 

    minutes = parseInt(seconds_left/60); 
    seconds = parseInt(seconds_left % 60); 

    // format countdown string + set tag value 
    $('.countdown').html(days + "d, " + hours + "h, "+ minutes + "m, " + seconds + "s"); 

    }, 1000); 

} 

.

답변

1

당신은에 스크립트의 시작을 변경할 수 있습니다이

function setTimer(hours, minutes, dateTime){ 

    var date = new Date(dateTime); 
    date.setHours(date.getHours() + hours); 
    date.setMinutes(date.getMinutes() + minutes); 

    var target_date = date.getTime(); 

    // rest of script 
    } 

다음 여기를 확인 2014년 9월 24일 1시 53분

에 카운트 다운 상대를 설정하는 setTimer(1,30, "2014 09 24 00:23")로 전화 : jsFiddle

+0

더 이상 Datetime 형식의 데이터베이스를 사용하지 않습니다. 주문이 이루어지면 배달 시간이 계산되어 "시, 분"형식으로 db에 삽입됩니다. –

+0

Humm, 혼란스러워하는 것 같아요. 항상 초기 지점과 비교할 시간이 필요합니다. 그렇지 않으면 항상 페이지를 새로 고치는 동안 비교 지점으로 Now() 시간을 사용하게됩니까? –

+0

우리는 고객이 주문한 시간과 배달 시간 또는 datetime이 만료되면 원하는 것을 달성 할 수 있는지 여부를 알아야합니다. –

1

이 질문에 대해서는 Moment.js (그리고 어떤 종류의 날짜/시간 구문 분석)을 권장합니다. 자신의 기능을 작성하는 것이 유혹적 일지 모르지만 종종 고려해야 할 사항이 많이 있으며 그만한 가치는 없습니다. Moment.js를 사용

은 당신이 달성하려고하는 것은 다음과 같이 수행 할 수 있습니다 물론

function clockTicking(){ 

    var target_date = moment('Aug 15, 2019', 'MMM DD, YYYY'); 
    // update the tag with id "countdown" every 1 second 
    setInterval(function() { 
     var moment_diff = moment.duration(target_date.diff(moment())); 
     // format countdown string + set tag value 
     $('.countdown').html(moment_diff.days() + "d, " + moment_diff.hours() + "h, "+ moment_diff.minutes() + "m, " + moment_diff.seconds() + "s"); 

    }, 1000); 

} 

, 차이가 너무 크기 때문에 (이 특정 예제는 정확하지 않은 것을 염두에 보관 차이가 한 달 미만인 경우에만 작동합니다.) 원래 게시물에서 차이가 일반적으로 몇 년이 아니라 시간으로 측정되어야한다고 언급 한 이후 문제가되어서는 안됩니다.

+0

Moment.js를 꼭보아야 할 것입니다. 팁 주셔서 감사합니다. :) –

1

정말 사용을 고려할 것 :

http://momentjs.com/docs/

당신이 처리 날짜 시간의 공정한 금액을 수행하는 경우.

그러나 두 시간 형식을 날짜 시간 개체로 변환하는 데 문제가있는 것 같습니다.

var stripNonNumberics = function(string) { 
    return Number(string.replace(/\D/g, '')); 
    } 

    var target_date = "1hour 45minutes"; // or var target_date = "45minutes"; 
    var split_date = target_date.split(' '); 
    var minutes; 

    // If it has hours 
    if (split_date[1]) { 
    minutes = stripNonNumberics(split_date[1]) + (stripNonNumberics(split_date[0]) * 60); 
    } else { 
    minutes = stripNonNumberics(split_date[0]); 
    } 

    console.log(new Date(new Date().getTime() + minutes*60000);); 
+0

고맙습니다. :) –

관련 문제