倒数计时器时钟在单独的Divs Jquery

时间:2014-03-13 01:39:53

标签: javascript jquery html css

无法让vars getElementById在新元素中工作。当它在一个元素中时它正在工作但现在试图使它们有自己的元素,因此它更容易响应

http://codepen.io/riwakawebsitedesigns/pen/cqnmD

<div class="row">
<div class="block-lg-3 block-md-3 block-sm-3 block-xs-12">
<div class="module">
<h2>Days</h2>  
<div id="days"></div>
</div>
</div>
<div class="block-lg-3 block-md-3 block-sm-3 block-xs-12">
<div class="module">
<h2>Hours</h2>  
<div id="hours"></div>
</div>
</div>
<div class="block-lg-3 block-md-3 block-sm-3 block-xs-12">
<div class="module">
<h2>Minutes</h2>  
<div id="minutes"></div>
</div>  
</div>
<div class="block-lg-3 block-md-3 block-sm-3 block-xs-12">
<div class="module">
<h2>Seconds</h2>  
<div id="seconds"></div>
</div>
</div>

// set the date we're counting down to
var target_date = new Date('July, 31, 2014').getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
//var clock = document.getElementById('clock');
var days = document.getElementById('days');
var hours = document.getElementById('hours');
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');

// 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
days.innerHTML = '<span class="days">' + days + 'Days</span>';
hours.innerHTML = '<span class="hours">' + hours + 'Hours</span>';
minutes.innerHTML = '<span class="minutes">' + minutes + 'Minutes</span>';
seconds.innerHTML = '<span class="seconds">' + seconds + 'Seconds</span>';

}, 1000);

1 个答案:

答案 0 :(得分:3)

您已使用变量days覆盖了变量days,它是div元素,其中包含天数。

可能将div元素变量更改为daysContainer