jQueryでのカウントダウンタイマーのスタイリング

debugcn 投稿 Dev

user2798091

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

JohanVdR

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

Javscript：

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]