2014-10-13 3 views
-1

Я пытаюсь сделать таймер обратного отсчета в JS и стилизовать каждую цифру (дни, часы и т. Д.) Отдельно, я сначала пробовал стилизовать «дни», но это не работает, пока значения по умолчанию печатаются (в виде).Значение Javascript не печатается

Script (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:

<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> 

Спасибо заранее. :)

+0

Определить «не работает». * Стиль * не работает? В данном коде нет стиля, поэтому я не ожидал, что какой-либо стиль будет применен к разметке. – David

+0

Что вы пытаетесь стилизовать? Вход внутри текстового поля? Или вы предпочли бы, чтобы они находились внутри пролета и стиль пролета? –

+0

у вас есть jsfiddle для вашей проблемы –

ответ

2

Я думаю, что вы пытаетесь сделать, это вместо того, чтобы поместить значение в поле ввода, поместите его в элемент (интервал, отд, или что-нет).

Для этого вы должны использовать «.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/

+0

О, мой бог, спасибо! ты лучший! : D – Joey

-1

вам необходимо указать атрибут id в поле ввода 1, в настоящее время оно имеет только атрибут имени. И вы пытаетесь получить поле ввода, используя его id в 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> 
+0

нет он не пытается получить какой-либо элемент по id –

+0

моя проблема заключается в том, что таймер обратного отсчета работает с полями формы и ввода, но я хочу использовать его с div, чтобы я мог стиль каждая цифра отдельно. – Joey

0

Если вы хотите использовать свой div # days в качестве вывода для значения ваших дней, вы должны использовать document.getElementById("days").innerHTML = days; вместо document.getElementById("days").value = days;

Смежные вопросы