简体   繁体   English

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

[英]How do I add multiple timers with Ajax

As you can see in the picture, I am using jquery to add a new li item everytime someone is put into the input box. 如您在图片中看到的,每当有人将其放入输入框时,我都会使用jquery添加新的li项目。

However, 然而,

I also want it to add a 2 hour countdown timer to the left of the string. 我还希望它在字符串的左侧添加一个2小时倒计时计时器。 I have tried multiple times but I can not get a new timer to produce. 我已经尝试了多次,但无法获得新的计时器。

For instance, If I say John.. Then john will have a 2 hour timer. 例如,如果我说约翰。那么约翰将有一个2个小时的计时器。 If I wait 10 minutes after and say "pete". 如果我等10分钟后再说“皮特”。 Now john will have a 1:50m timer and pete will have 2 hours and so on. 现在,约翰将有一个1:50m的计时器,皮特将有2个小时,依此类推。

This is what I have so far. 到目前为止,这就是我所拥有的。

Example of 1 示例1

Example of 2 例子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>

Applying this answer to your code: 将此答案应用于您的代码:

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM