Question

我正在尝试在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>

提前谢谢你。：）

Answer 1

我认为您尝试做的不是将值放在输入框中，而是将其放在元素中（span，div或what-not）。

为此你应该使用＆＃34; .innerText＆＃34;，而不是＆＃34; .value＆＃34;。

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

HTML：

使用Javascript：

＆＃13;

// 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);

＆＃13;

<p>Days <span id="days"></span> Hours
  <span id="hours"></span> Minutes
  <span id="minutes"></span> Seconds
  <span id="seconds"></span> 
</p>

＆＃13;

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

Answer 2

如果您希望将div＃days用作日期值的输出，则可以使用document.getElementById("days").innerHTML = days;代替document.getElementById("days").value = days;

Answer 3

您需要将id属性赋予第一个输入字段，目前它只有name属性。并且您正尝试在JavaScript中使用它获取输入字段。将您的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>

Javascript值不打印

3 个答案: