Question

我正在尝试制作一个倒数计时器，用户可以在其中设置日，小时，分钟和秒值。

setlength（）函数从文本框中获取值，然后设置变量。

然后当用户点击开始按钮时，计算以ms为单位的时间（可变长度），并将其添加到当前时间。

然后倒数计时器才倒计时。

我很确定倒计时位有效但我不明白/知道为什么脚本无法从输入框中获取值并将它们分配给变量。

感谢任何帮助或其他解决方案来改变小时分钟和秒的价值。

提前谢谢！

＆＃13;

function setlength() {
  var lengthd = document.getElementById("lengthd").value;
  var lengthh = document.getElementById("lengthh").value;
  var lengthm = document.getElementById("lengthm").value;
  var lengths = document.getElementById("lengths").value;
}

function start() {
  var lengthms = (lengthd * 24 * 3600 + lengthh * 3600 + lengthm * 60 + lengths * 1) * 1000;
  var deadline = new Date(Date.parse(new Date()) + lengthms);
  initializeClock('timerdiv', deadline);
}

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 500);
}

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <h1>Countdown Timer</h1>
  <div id="timerdiv">
    <div>
      <span class="days"></span>
      <div class="smalltext">Days</div>
    </div>
    <div>
      <span class="hours"></span>
      <div class="smalltext">Hours</div>
    </div>
    <div>
      <span class="minutes"></span>
      <div class="smalltext">Minutes</div>
    </div>
    <div>
      <span class="seconds"></span>
      <div class="smalltext">Seconds</div>
    </div>
  </div>
  <center>
    <p id="length"></p>
    Days: <input type="number" id="lengthd"> Hours: <input type="number" id="lengthh"> Minutes: <input type="number" id="lengthm"> Seconds: <input type="number" id="lengths"><br>
    <button class="button set" onClick="setlength()">Set</button>
  </center>
  <center>
    <div><button class="button start" onClick="start()">Start</button></div>
  </center>
</body>

</html>

＆＃13;

Answer 1

您的函数setlength()将所有长度声明为局部变量，因此它们只能在该函数中使用。

而不是

function setlength() {
    var lengthd = document.getElementById("lengthd").value;
    var lengthh = document.getElementById("lengthh").value;
    var lengthm = document.getElementById("lengthm").value;
    var lengths = document.getElementById("lengths").value;
}

你应该在函数之外声明变量

var lengthd;
var lengthh;
var lengthm;
var lengths;

function setlength() {
    lengthd = document.getElementById("lengthd").value;
    lengthh = document.getElementById("lengthh").value;
    lengthm = document.getElementById("lengthm").value;
    lengths = document.getElementById("lengths").value;
}

请注意，我还没有检查您的其余代码，因为您确定它有效。

无法使用＆＃34; document.getElementById.value＆＃34;为变量赋值。

1 个答案: