[英]Javascript countdown timer to each html span
I have programmatically created <span>
tag in my html 我在HTML中以编程方式创建了
<span>
标签
I found simple example of javascript to do countdown timer 我找到了一个简单的JavaScript例子来做倒数计时器
// 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
var countdown = document.getElementById("countdown");
// 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.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
But this example let me use only one element 但是这个例子让我只使用一个元素
But i need to use this code like 但是我需要像这样使用此代码
<span onload="this.countdown(300)"></span>
So 300 is seconds which dynamically changing by my script 300秒就是我的脚本动态变化的时间
So after my script work i get on page 所以在我的脚本工作之后,我会上
<span onload="this.countdown(150)"></span>
<span onload="this.countdown(3000)"></span>
<span onload="this.countdown(4500)"></span>
<span onload="this.countdown(600)"></span>
<span onload="this.countdown(390)"></span>
So i need run all this timer at once, how to do that? 所以我需要一次运行所有计时器,该怎么办?
Try something like below: 尝试以下操作:
<div class="container">
<span data-countdown="150"></span>
<span data-countdown="3000" ></span>
<span data-countdown="4500"></span>
<span data-countdown="600"></span>
<span data-countdown="390"></span>
</div>
on Script: 在脚本上:
$('.container').load(function(){
var span =$(this).find('span');
span.countdown(span.attr('data-countdown'));
})
Note: look at logic only 注意:仅看逻辑
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.