Question

这是我添加JavaScript的第一个项目，我似乎无法使其正常运行。我正在尝试建立一个倒数计时器，但是倒数计时器不会显示。为什么会这样？我已经尝试了所有我能想到的。再次，这是我第一个结合JS的项目。

def od2d(val):                                                                  

  if isinstance(val, (OrderedDict, dict)):                                    
      return {k: od2d(v) for k, v in val.items()}                             
  elif isinstance(val, (tuple, list)):                                        
      return [od2d(v) for v in val]                                           
  else:                                                                       
      return val

var holidazeEnd = new Date("July, 3 2019 12:00:00").getTime();

var timer = setInterval(function () {

  let now = holidazeEnd().getTime();
  let t = holidazeEnd - now;

  if (t >= 0) {

    let days = Math.floor(t / (1000 * 60 * 60 * 24));
    let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
    let secs = Math.floor((t % (1000 * 60)) / 1000);

    document.getElementsByClassName("timer-days").innerHTML = days + "<span class= 'label'>Days</span>";


    document.getElementsByClassName("timer-hours").innerHTML = ("0" + hours).slice(-2) +
      "<span class= 'label'>Hours</span>";


    document.getElementsByClassName("timer-minutes").innerHTML = ("0" + minutes).slice(-2) +
      "<span class= 'label'>Minutes</span>";


    document.getElementsByClassName("timer-seconds").innerHTML = ("0" + seconds).slice(-2) +
      "<span class= 'label'>Seconds</span>";
  } else {
    document.getElementById("timer").innerHtml = "Happy Independence Day!";
  }
}, 1000);

body {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  height: 780px;
  background-color: aquamarine;
}
#timer {
  color: red;
  font-size: 60px;
  background-color: black;
}
.label {
  color: green;
  font-size: 50px;
}

Answer 1

尝试一下，但是我改用console.log。

var holidazeEnd=new Date("July, 3 2019 12:00:00").getTime();
var timer= setInterval(function(){

let now=new Date().getTime();
let t=holidazeEnd-now;

if (t >= 0) {

let days = Math.floor(t / (1000 * 60 * 60 * 24));
let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
let secs = Math.floor((t % (1000 * 60)) / 1000);

console.log("days: " +days +" Hours: "+hours + " mins: " +mins + "secs: "+secs);
}

else{
console.log("Happy Independence Day");}
},1000);

body {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  height: 780px;
  background-color: aquamarine;
}
#timer {
  color: red;
  font-size: 60px;
  background-color: black;
}
.label {
  color: green;
  font-size: 50px;
}

<div class="container">
  <p id="timer">
    <span class="timer-days"></span>
    <span class="timer-hours"></span>
    <span class="timer-minutes"></span>
    <span class="timer-seconds"></span>
  </p>
</div>

Answer 2

我的版本...

const
  timer   = document.getElementById('timer'),
  t_day   = document.getElementsByClassName("timer-days")[0],   // getElementsByClassName return array
  t_hours = document.getElementsByClassName("timer-hours")[0],
  t_mins  = document.getElementsByClassName("timer-minutes")[0],
  t_secs  = document.getElementsByClassName("timer-seconds")[0];


var holidazeEnd = new Date("July, 3 2019 12:00:00").getTime();

var timerInterval = setInterval(function () {

  let now = new Date().getTime();    
  let t = holidazeEnd - now;

  if (t >= 0)
  {
    t_day.textContent   = Math.floor(t / (1000 * 60 * 60 * 24));
    t_hours.textContent = ("0" + Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2);
    t_mins.textContent  = ("0" + Math.floor((t % (1000 * 60 * 60)) / (1000 * 60))).slice(-2);
    t_secs.textContent  = ("0" + Math.floor((t % (1000 * 60)) / 1000)).slice(-2);
  }
  else
  {
    timer.innerHtml   = null;
    timer.textContent = "Happy Independence Day!";

    clearInterval(timerInterval); // logicaly ?
  }
}, 1000);

body {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  height: 780px;
  background-color: aquamarine;
}
#timer {
  color: red;
  font-size: 40px;
  background-color: black;
}
.label {
  color: green;
  font-size: 50px;
}

<div class="container">
  <p id="timer">
    <span class="timer-days"></span><span class= 'label'>Days</span>
    <span class="timer-hours"></span><span class= 'label'>Hours</span>
    <span class="timer-minutes"></span><span class= 'label'>Minutes</span>
    <span class="timer-seconds"></span><span class= 'label'>Seconds</span>
  </p>
</div>

我的倒数计时器无法运作或无法显示

2 个答案: