Question

正如您在图片中看到的那样，每当有人进入输入框时，我都会使用jquery添加新的li项目。

然而，

我还希望它在字符串的左边添加一个2小时倒数计时器。我已经多次尝试但是我无法生产新的计时器。

例如，如果我说约翰......那么约翰将有一个2小时的计时器。如果我等了10分钟后再说＃34; pete＆＃34;。现在，约翰将有一个1:50米的计时器，皮特将有2个小时，依此类推。

这是我到目前为止所做的。

<div class="container">

<form id="myform" action="whatever.php">

<input id="in" type="text" placeholder="Serial"/>
<input type="submit" />
</form>

<div class="results">
<ul class="list">
</ul>
</div>

</div>

<script>
     (function($){
$('#myform').submit(function(e){
    var val = $(this).find('#in').val();
    $('ul.list').append('<li>' + val + '</li>');
    e.preventDefault();
});
})(jQuery);
</script>

Answer 1

将this answer应用于您的代码：

var twoHours = 60 * 60 * 2;

(function($){
	$('#formbutton').click(function(e){
    var val = $('#in').val();
    var counter = $('<span>');
    var item = $('<li>').text(val + ":").append(counter);
    $('ul.list').append(item);
    startTimer(twoHours, counter[0]);
	});
})(jQuery);

function startTimer(duration, display) {
    var timer = duration, hours, minutes, seconds;
    var intervalId = setInterval(function () {
        hours = parseInt(timer / 3600, 10);
        minutes = parseInt((timer % 3600) / 60, 10);
        seconds = parseInt(timer % 60, 10);

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = hours + ":" +  minutes + ":" + seconds;

        if (--timer < 0) {
            clearInterval(intervalId);
        }
    }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<form id="myform" action="#">

<input id="in" type="text" placeholder="Serial"/>
<button id="formbutton">Submit</button>
</form>

<div class="results">
<ul class="list">
</ul>
</div>

</div>

如何使用Ajax添加多个计时器

1 个答案: