在jQuery中设置倒计时器的样式

时间:2014-03-08 09:41:47

标签: javascript jquery html css

我在jQuery中创建了一个倒数计时器,但我不知道如何设计它。我想根据附件图像对它进行调整。enter image description here

FIDDLE

jQuery的:

 // 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
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";  

}, 1000);

2 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/456jn/44/

CSS:

#countdown {
    font-family: trebuchet ms;
    color: #2A3435;
    border-width: 1px 1px 2px 1px;
    border-style: solid;
    border-color: #D2CFCA;
    background: #eee;
    padding: 2px;
    display: inline-block;
}
#countdown span {
    display: inline-block;
    margin-left: 5px;
    min-width: 40px;
    text-align: center;
    font-size: 10px;
    font-weight: normal;
}
#countdown span:first-child {
    margin-left: 0;
}
#countdown span span {
    font-size: 18px;
    display: block;
}

使用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");
var days_span = document.createElement("SPAN");
days_span.className = 'days';
countdown.appendChild(days_span);
var hours_span = document.createElement("SPAN");
hours_span.className = 'hours';
countdown.appendChild(hours_span);
var minutes_span = document.createElement("SPAN");
minutes_span.className = 'minutes';
countdown.appendChild(minutes_span);
var secs_span = document.createElement("SPAN");
secs_span.className = 'secs';
countdown.appendChild(secs_span);

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

答案 1 :(得分:0)

像这样格式化你的计时器:

countdown.innerHTML = "<table><tr><td>"+days+"</td><td>"+hours+"</td><td>"+ minutes+"</td><td>"+seconds+"</td></tr>
<tr><td>days</td><td>hours</td><td>minutes</td><td>seconds</td></tr></table>";  

然后设置表格样式。