每个html跨度的Javascript倒计时计时器

Javascript countdown timer to each html span

本文关键字：Javascript 倒计时 计时器 html 每个      更新时间：2023-09-26

我已经通过编程在我的html 中创建了<span>标记

我发现了一个简单的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);

但是这个例子让我只使用一个元素

但我需要像一样使用这个代码

<span onload="this.countdown(300)"></span>

所以300秒是由我的脚本动态改变的

所以在我的脚本工作之后，我进入了页面

 <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>

所以我需要一次运行所有的计时器，如何做到这一点？

尝试以下内容：

<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>

在脚本上：

$('.container').load(function(){
var span =$(this).find('span');
span.countdown(span.attr('data-countdown'));
})

注意：只看逻辑

相关文章：