JSFiddle - React, Tailwind, and code Playground
HTML
<span>距除夕还有</span><div class="day">
<span class="fir"></span>
<span class="sec"></span>
</div>
<span>天</span>
<div class="hour">
<span class="fir"></span>
<span class="sec"></span>
</div>
<span class="split">:</span>
<div class="minute">
<span class="fir"></span>
<span class="sec"></span>
</div>
<span class="split">:</span>
<div class="second">
<span class="fir"></span>
<span class="sec"></span>
</div>
CSS
.day,.hour, .minute, .second{
display:inline-block;
color:#fff;
}
.split{
display:inline;
}
.in_0{background:#f00;}
.in_1{background:#e00;}
.in_2{background:#d00;}
.in_3{background:#c00;}
.in_4{background:#b00;}
.in_5{background:#a00;}
.in_6{background:#900;}
.in_7{background:#800;}
.in_8{background:#700;}
.in_9{background:#600;}
JavaScript
var deadLine = new Date('2014-1-30 23:59:59').getTime();
var $hour = $('.hour');
var $minute = $('.minute');
var $second = $('.second');
var $day = $('.day');
function updateTime(){
var now = new Date().getTime();
var diff = deadLine - now;
if(diff <= 0){
clearInterval(timer);
return;
}
var second = parseInt(diff / 1000);
var diffDay = parseInt(second / (60 * 60 * 24));
var diffHour = parseInt(second / 60 / 60) % 24;
var diffMinute = parseInt(second % (60 * 60) / 60);
var diffSecond = second % 60
setValue($day, diffDay);
setValue($hour, diffHour);
setValue($minute, diffMinute);
setValue($second, diffSecond);
}
function setClass(parent, value){
value = getSplitNumber(value);
parent.find('.fir').attr('class', 'fir').addClass(getClassFromValue(value[0]));
parent.find('.sec').attr('class', 'sec').addClass(getClassFromValue(value[1]));
}
function setValue(parent, value){
parent.find('.fir').html(getSplitNumber(value)[0]);
parent.find('.sec').html(getSplitNumber(value)[1]);
setClass(parent, value);
}
function getClassFromValue(value){
return 'in_' + value;
}
function getSplitNumber(value){
if(value > 9){
return value.toString();
}else{
return '0' + value;
}
}
var timer = setInterval(function(){
updateTime();
}, 1000);