시간 기간을위한 좋은 jQuery 플러그인 또는 JS 코드가 있습니까?

StackOverflow https://stackoverflow.com/questions/818830

문제

기본적으로 다음을 생산하고 싶습니다.

int 67 ~ 1 분 7 초

int 953에서 15 분 53 초

int 3869에서 1 시간 4 분 29 초

의사 코드 :

// original
<span class="time">67</span>

//output
<span class="time">1 minute 7 seconds</span>

// js
$('.time').format_duration();
도움이 되었습니까?

해결책

Guffa의 답변 대부분을 빌리면서 이것은 jQuery 플러그인으로 트릭을 수행해야합니다.

jQuery.fn.time_from_seconds = function() {
    return this.each(function() {
        var t = parseInt($(this).text(), 10);
        $(this).data('original', t);
        var h = Math.floor(t / 3600);
        t %= 3600;
        var m = Math.floor(t / 60);
        var s = Math.floor(t % 60);
        $(this).text((h > 0 ? h + ' hour' + ((h > 1) ? 's ' : ' ') : '') +
                     (m > 0 ? m + ' minute' + ((m > 1) ? 's ' : ' ') : '') +
                     s + ' second' + ((s > 1) ? 's' : ''));
    });
};

다음과 같은 HTML이있는 경우 :

<span class='time'>67</span>
<span class='time'>953</span>
<span class='time'>3869</span>

그리고 당신은 이것을 다음과 같이 부릅니다.

$('.time').time_from_seconds();

HTML은 다음과 같습니다.

<span class="time">1 minute 7 seconds</span>
<span class="time">15 minutes 53 seconds</span>
<span class="time">1 hour 4 minutes 29 seconds</span>

각 요소에는 다음에도 있습니다 데이터 속성 초 원래 포함 된 '원본'.

내 대답은 당신의 질문에 직접 답변하지만, 나는 어둠 속에서 총을 맞을 것입니다. 만약 당신이 인간의 시간에 무슨 일이 있었는지 보여주고 싶다면 (즉, "5 분 전") 거기에 있습니다. jQuery Timeago 플러그인 이것을 위해. 그래도 몇 초를 형식으로 받아 들일 것이라고 생각하지 않습니다. 그것은이어야합니다 ISO 8601 데이트.

다른 팁

<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script>

var tbl = [
    [ 7*24*60*60, 'week' ],
    [ 24*60*60, 'day' ],
    [ 60*60, 'hour' ],
    [ 60, 'minute' ],
    [ 1, 'second' ]
];

function convert() {
    var t = parseInt($('#val').val());
    var r = '';
    for (var i = 0; i < tbl.length; i++) {
        var d = tbl[i];
        if (d[0] < t) {
            var u = Math.floor(t / d[0]);
            t -= u * d[0];
            r += u + ' ' + d[1] + (u == 1 ? ' ' : 's ');
        }
    }
    $('#result').html(r);
}

</script>
</head>
<body>
<input id='val' type='text' size='10' />
<input type='button' value='convert' onclick='convert()' />
<div id='result' />
</body>
</html>

액세스하기 쉽도록 요소에 ID를 제공하십시오.

<span id="time">67</span>

이제 가치를 얻고 변환 할 수 있습니다.

var o = document.getElementById('time');
var t = parseInt(o.innerHTML);
var h = Math.floor(t / 3600);
t %= 3600;
var m = Math.floor(t / 60);
var s = t % 60;
o.innerHTML =
   (h > 0 ? h + ' hours ' : '') +
   (m > 0 ? m + ' minutes ' : '') +
   s + ' seconds';

편집하다:
Mike B가 제안한대로 Math.floor ()를 추가했습니다.

더 간결한 것을 찾고있는 경우에 따라 다른 시도 중 일부의 후행 공백 및 잘못된 다원화 문제를 피하고 싶을 경우.

function timeString( t ) {
    var ret = [], t = {
        hour: parseInt(t/3600),
        minute: parseInt(t/60%60),
        second: t%60
    };

    for ( var n in t )
        t[n] && ret.push( t[n], n + "s".substr( t[n] < 2 ) );

    return ret.join(" ");
}

우아하지는 않지만 작동해야합니다.

function format_duration(elem) {
var num = parseInt($(elem).text());
var hours = 0;
var mins = 0;
var secs = 0;
while (num > 0) {
  if (num < 60) {
    secs += num;
    num = 0;
  }
  else if (num < 3600) {
    mins++;
    num -= 60;
  }
  else if (num < 86400) {
    hours++;
    num -= 3600;
  }
}
var rv = "";
if (hours > 0) {
    rv += hours+" hours ";
}
if (mins > 0) {
    rv += mins+" mins ";
}
if (secs > 0) { 
    rv += secs+" secs ";
}
$(elem).text(rv);
}

(jQuery 사용에 답하기 위해 업데이트)

사용설정 타임 아웃(표현, Milisecs)

어디 표현 시간이있을 때 호출 할 기능이 될 수 있습니다. Milisecs 완성 됐습니다.

여러 시간 카운터를 조작하는 좋은 예는 다음에서 찾을 수 있습니다.http://www.plus2net.com/javaScript_tutorial/timer-set.php

좋은 guffa. 그러나 거기에 "바닥"전화를 추가해야합니다.

<snip>
    var h = Math.floor(t / 3600);
    t %= 3600;
    var m = Math.floor(t / 60);
<snip>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top