Question

我有一个倒数计时器，我想调整它的外观。我希望这些单词与数字分开，类似于Apple目前的倒数计时器。我不介意上面或下面。我也希望有不同大小的字体，类似于这个例子。

http://i.stack.imgur.com/fsyfV.jpg

我目前的代码是：

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<div dir="ltr" style="text-align: centre;" trbidi="on">
<div style="font-family: Arvo, serif; font-size: 36px; font-weight: bold;">
</div>
<div id="bp_count_down_div">
</div>
<script language="JavaScript">
var bp_date_target = new Date("October 31, 2015 14:00:00");
var bp_date_now = new Date();
var bp_count_down_complete_message = "";
if (bp_date_now >= bp_date_target) {
 document.getElementById("bp_count_down_div").innerHTML =         bp_count_down_complete_message;
} else {
 bp_time_difference = Math.floor(((bp_date_target - bp_date_now).valueOf()) / 1000);
 display_time_difference(bp_time_difference);
}
function display_time_difference(bp_time_difference) {
 if (bp_time_difference <= 0) {
 document.getElementById("bp_count_down_div").innerHTML = bp_count_down_complete_message;
 return;
 }
 bp_count_down_message = bp_format_seconds(bp_time_difference, 86400, 100000) + " Days " + bp_format_seconds(bp_time_difference, 3600, 24) + " Hr " +     bp_format_seconds(bp_time_difference, 60, 60) + " Min " + bp_format_seconds(bp_time_difference, 1, 60) + " Sec";
 document.getElementById("bp_count_down_div").innerHTML = bp_count_down_message;
 setTimeout("display_time_difference(" + (bp_time_difference - 1) + ")", 1000);
}
function bp_format_seconds(secs, num1, num2) {
 num = ((Math.floor(secs / num1)) % num2).toString();
 if (num.length < 2) s = "0" + num;
 return "" + num + "";
}

</script>
</div>
</div>
</div>

这是我目前的输出：

http://i.stack.imgur.com/fsM4h.jpg

Answer 1

请参阅Demo

<div>
<div class="days"><span>DAYS</span><h2>416</h2></div>
<div class="days"><span>HOURS</span><h2>4</h2></div>
<div class="days"><span>MINUTES</span><h2>60</h2></div>
<div class="days"><span>SEC</span><h2>30</h2></div>    
</div>

CSS

h2{
font-size:80px;
margin:0px;
}

.days{
text-align:center;
margin:0 10px;
display:inline-block;
}

您可以参考的字体（http://www.fontsquirrel.com/）

Html代码 - 如何调整倒数计时器

1 个答案: