2

以下に、正常に動作するjavascriptカウントダウンタイマーがあります。

    <h1><span id='countdown'><?php echo $dbSessionDuration; ?></span></h1>

...

  $(document).ready(function() {
    var time = <?php echo json_encode($dbSessionDuration); ?>,
      parts = time.split(':'),
      hours = +parts[0],
      minutes = +parts[1],
      seconds = +parts[2],
      span = $('#countdown');


    function correctNum(num) {
      return (num<10)? ("0"+num):num;
    }

    var timer = setInterval(function(){
        seconds--;
        if(seconds == -1) {
            seconds = 59;
            minutes--;

            if(minutes == -1) {
                minutes = 59;
                hours--;

                if(hours==-1) {
                  alert("timer finished");
                  clearInterval(timer);
                  return;
                }
            }
        }
        span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds));
    }, 1000);

});

今、私が考えたのは、上記の例を使用してそれを操作し、反対のことを実行して、00：00：00（時間、分、秒）から始まるカウントアップタイマーを作成することです。

しかし、問題はそれが機能していないということです。何も起きていません。以下の関数で時間が必要かどうかはわかりません。カウントアップとして、時間は必要なだけ長くなる可能性があるためです。しかし、私の質問は、カウントアップタイマーを完全に機能するように修正するにはどうすればよいですか？

<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

...

$(document).ready(function() {
var response = "00:00:00",
      parts = time.split(':'),
      hours = +parts[0],
      minutes = +parts[1],
      seconds = +parts[2],
      input = $('.responseTime');


    function correctResponse(responsenum) {
      return (responsenum<10)? ("0"+responsenum):responsenum;
    }

    var responsetimer = setInterval(function(){
        seconds--;
        if(seconds == +59) {
            seconds = 00;
            minutes--;

            if(minutes == +59) {
                minutes = 00;
                hours--;

                  return;

            }
        }
        input.text(correctResponse(hours) + ":" + correctResponse(minutes) + ":" + correctResponse(seconds));
    }, 1000);


  });

アップデート：

また、補足として、私が信じているカウントダウンタイマーは、毎秒2秒ごとにカウントダウンしていることに気づきました。これをカウントダウンタイマー用に並べ替えて、カウントアップタイマーに含めるにはどうすればよいですか？

以下のコードは、インクリメント++を含み、.textではなく.valを含むように変更しましたが、何が起こっているのかというと、00：00：00から始まり、00：59：60まで下がり、その後停止します。 ：

var response = "00:00:00",
          parts = time.split(':'),
          hours = +parts[0],
          minutes = +parts[1],
          seconds = +parts[2],
          input = $('.responseTime');


        function correctResponse(responsenum) {
          return (responsenum<10)? ("0"+responsenum):responsenum;
        }

        var responsetimer = setInterval(function(){
            seconds++;
            if(seconds == +59) {
                seconds = 00;
                minutes++;

                if(minutes == +59) {
                    minutes = 00;
                    hours++;

                      return;

                }
            }
            input.val(correctResponse(hours) + ":" + correctResponse(minutes) + ":" + correctResponse(seconds));
        }, 1000);


      });
4

5 に答える 5

2

これは、そのようなタイマーを実装する方法です。

function startTimer() {
    var time = 0
    setInterval(function(){
        time++
        var sec = time % 60
        var min = (time-sec)/60 % 60
        var hour = (time-sec-min*60)/3600
        var str= hour+':'+("0"+min).slice(-2)+':'+("0"+sec).slice(-2)
        $('.responseTime').val(str)
    },1000);
}

responseTimeタイマーを表示するためのクラスを使用した入力。（ところでidを使用しないのはなぜですか？）

いつでも適切な呼び出しを開始startTimer()します（例では を使用document.onload=startTimer）

0 以外の時間から開始する場合はtime、適切な秒数を設定します。カウントダウンの場合は、 (おそらく、いくつかのロジスティクスを追加する) にtime++置き換えtime--ますtime==0。

于 2013-02-07T22:52:05.530 に答える
2

jQueryでは、val('value')関数を使用して入力フィールドの値を変更/設定します。

input.text(...)に変更input.val(...)

また：

  1. 秒をインクリメントした後、 を使用seconds = seconds % 60;してそれらを に戻し0ます。
  2. また、data-attributesjavascript に値を渡すために使用することを検討してください。
于 2013-02-07T22:25:48.163 に答える
2

次のように、現在のカウントダウン タイマーを簡単に変更できます: http://jsfiddle.net/Sergiu/CDpeJ/3

var timer = setInterval(function(){
    seconds++;
    if(seconds == 60) {
        seconds = 00;
        minutes++;

        if(minutes == 60) {
            minutes = 00;
            hours++;
        }
    }
    var newTime = hours + ":" + minutes + ":" + seconds;
    if(!newTime.match(/^(20|21|22|23|[01]\d|\d)(([:.][0-5]\d){1,2})$/)) newTime = "finished";
    $('#timeInput').val(newTime);
}, 1000);
于 2013-02-07T22:32:07.010 に答える
0

Jquery で val を text に変更して、Mariusnn ソリューションと Oerd の提案を JSFiddle に追加しました。

HTMLファイル

<body> <h1 style="color:blue">Time</h1> <h2><span class="responseTime" style="color:indianred"></span> </h2> </body>

JS コード

` var startTimer;

startTimer = function() {
var time;
time = 0;
setInterval((function() {
    var hour, min, sec, str;
    time++;
    sec = time % 60;
    min = (time - sec) / 60 % 60;
    hour = (time - sec - (min * 60)) / 3600;
    count = hour + ':' + ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2);
    $('.responseTime').text(count);
    }), 1000);
   };

$( document ).ready(function() {
    startTimer();
});

`

JS フィドル ソリューションはこちらです。

https://jsfiddle.net/hzLf3e38/4/

于 2016-02-09T12:31:32.710 に答える
0

カウントアップこれを試してください

var millis = <?php echo $dbSessionDurationTime; ?> ( diff in seconds )

function displaytimer(){
    var hours = Math.floor(millis / 36e5),
        mins = Math.floor((millis % 36e5) / 6e4),
        secs = Math.floor((millis % 6e4) / 1000);
        //Here, the DOM that the timer will appear using jQuery
        $('.count').html(hours+':'+mins+':'+secs);  
}

setInterval(function(){
    millis += 1000;
    displaytimer();
}, 1000);
于 2016-01-19T10:02:41.720 に答える