我在jQuery中创建了一个倒数计时器,但我不知道如何设计它。我想根据附件图像对它进行调整。
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);
答案 0 :(得分:1)
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>";
然后设置表格样式。