我在嘗試瞭解更多關於web編程和html的知識。我有這個倒計時,我正在嘗試一下風格,但是我很難得到我想要的東西。圍繞每個數字的框
.countHeader {
font-size: 15px;
font-weight: bold;
z-index: 20;
text-align: center;
margin-top: 50px;
white-space: pre;
}
.countLook {
font-size: 50px;
z-index: 20;
text-align: center;
margin-top: 25px;
white-space: pre;
color: rgba(0,0,0,0.6);
text-shadow: 2px 3px 1px rgba(0,0,0,0.2),
0px -2px 2px rgba(255,255,255,0.3);
border: 10px #f1f1f1;
}
<body>
<p class="countHeader"> Days Hours Minutes Seconds</p>
<div id="countdown" class="countLook"></div>
</body>
function updateWCTime() {
now = new Date();
kickoff = Date.parse("November 17, 2013 23:00:00");
diff = kickoff - now;
days = Math.floor(diff/(1000 * 60 * 60 * 24));
dday1 = Math.floor(days/10);
dday2 = days % 10;
hr = Math.floor(diff/(1000 * 60 * 60)) % 24;
dhr1 = Math.floor(hr/10);
dhr2 = hr % 10;
min = Math.floor(diff/(1000 * 60)) % 60;
dmin1 = Math.floor(min/10);
dmin2 = min % 10;
sec = Math.floor(diff/(1000)) % 60;
dsec1 = Math.floor(sec/10);
dsec2 = sec %10;
document.getElementById("countdown")
.innerHTML =
' ' + dday1 + " " + dday2 +' : ' + dhr1 + " " + dhr2 + ' : ' + dmin1 + " " + dmin2 + ' : ' + dsec1 + " " + dsec2;
}
setInterval(updateWCTime, 1000);
小提琴顯示了基本的倒計時佈局我有。我不知道是否因爲我設置了它的方式,但我無法弄清楚如何在每個數字上放置一個盒子。我試圖讓一個盒子包裝每個數字,類似於http://flipclockjs.com/但沒有任何動畫。我只需要每個數字周圍的背景框。我試圖用css來做,但也許還有比我更明白的。任何幫助?
你想圍繞每個數字的盒子增加.innerHtml那麼當風格?比你必須將每個數字放在它自己的元素中。現在您在倒計時附近的邊框不會顯示,因爲您錯過了邊框的參數。它應該像'border:10px solid #fefefe;'。 – putvande
如果你是懶惰的,你可以使用精心製作的背景圖片 –