未打印Javascript值

Javascript value not printing

本文关键字：Javascript 打印      更新时间：2023-09-26

我试图用JS制作一个倒计时计时器，并分别为每个数字（天、小时等）设置样式，我尝试先设置"天"的样式，但当默认值打印出来时（在表单中），它不起作用。

脚本（JS）：

<script>
// 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
document.getElementById("days").value = days;
document.form1.hours.value = hours;
document.form1.minutes.value = minutes;
document.form1.seconds.value = seconds;
}, 1000);
</script>

HTML正文：

<body><div id="days"></div> 
<form name="form1"><p>Days <input type="text" name="days" value="0" size="3"> Hours
<input type="text"name="hours" value="0" size="4"> Minutes 
<input type="text" name="minutes" value="0" size="7"> Seconds 
<input type="text" name="seconds" value="0" size="7"> </p>
</form>

提前谢谢。：）

我认为您要做的不是将值放在输入框中，而是将其放在元素（span、div或其他）中。

为此，您应该使用".innerText"，而不是".value".

以下是我认为你正在努力实现的目标：

HTML:

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
  document.getElementById("days").innerText = days;
  document.getElementById("hours").innerText = hours;
  document.getElementById("minutes").innerText = minutes;
  document.getElementById("seconds").innerText = seconds;
}, 1000);
<p>Days <span id="days"></span> Hours
  <span id="hours"></span> Minutes
  <span id="minutes"></span> Seconds
  <span id="seconds"></span> 
</p>

这是jsFiddle-http://jsfiddle.net/fw69xfe2/1/

如果您想使用您的div#天数作为天数值的输出，您应该使用document.getElementById("days").innerHTML = days;而不是document.getElementById("days").value = days;

您需要将id属性赋予第一个输入字段，目前它只有name属性。您正试图使用JavaScript中的it-id来获取输入字段。将您的html更改为：

<form name="form1"><p>Days <input type="text" id="days" value="0" size="3"> Hours
<input type="text" name="hours" value="0" size="4"> Minutes 
<input type="text" name="minutes" value="0" size="7"> Seconds 
<input type="text" name="seconds" value="0" size="7"> </p>
</form>
相关文章：