如何设置此javascript倒计时计时器的样式

How to style this javascript countdown timer

本文关键字：倒计时 javascript 计时器 样式 何设置 设置      更新时间：2023-09-26

我一直在学习如何创建javascript倒计时计时器的教程。我想在<h1>标签中显示每一个，这样我就可以用CSS进行样式设计，但到目前为止，我所有的尝试都失败了，老实说，我不知道该怎么做。任何帮助都感谢

Html

<span id="countdown"></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#countdown {
    font-size: 48px;
    border: 3px solid black;
    padding: 5px;
    background-color: #ffe;
}

请参阅http://jsfiddle.net/8mw6beqh/.

有趣的是，我在做同样的事情。我使用了firstwatch的方法，但无法针对每个方法。这是我完成的代码笔。

所以我为不同的元素创建了单独的变量。

var daysTimer = document.getElementById("dayTimer");
var hourTimer = document.getElementById("hourTimer");
var minuteTimer = document.getElementById("minuteTimer");
var secondTimer = document.getElementById("secondTimer");

并确保分别运行

// format countdown string + set tag value
dayTimer.innerHTML = days;
hourTimer.innerHTML = hours;
minuteTimer.innerHTML = minutes;
secondTimer.innerHTML = seconds;

我在一个无序列表中使用了它们，如下所示：

<div id="clock">
  <ul id=time>
    <li id="dayTimer"></li>
    <li id="hourTimer"></li>
    <li id="minuteTimer"></li>
    <li id="secondTimer"></li>
  </ul>
</div>
相关文章：