圍繞每個數字的框

我在嘗試瞭解更多關於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來做，但也許還有比我更明白的。任何幫助？

來源

2013-10-24 derecks

你想圍繞每個數字的盒子增加.innerHtml那麼當風格？比你必須將每個數字放在它自己的元素中。現在您在倒計時附近的邊框不會顯示，因爲您錯過了邊框的參數。它應該像'border：10px solid #fefefe;'。 – putvande

如果你是懶惰的，你可以使用精心製作的背景圖片 –

將跨度添加到內部HTML中的數字中。我沒有做到這一切，因爲我確信你明白了。然後只需使用CSS來設計它們的樣式

document.getElementById("countdown") 
      .innerHTML = 
      '<span class="digit"> ' + dday1 + ' </span> <span class="digit"> ' + dday2 +' </span> : ' + dhr1 + " " + dhr2 + ' : ' + dmin1 + " " + dmin2 + ' : ' + dsec1 + " " + dsec2;   
    }

然後只需使用CSS設置樣式。我添加了一個很好看的醜陋樣式。

.digit{ 
    background-color:red; 
    border: 3px solid blue; 
}

演示的前兩個數字：http://jsfiddle.net/aby3M/1/

來源

2013-10-24 18:07:22 Kierchon

這是我正在尋找的去得到，謝謝！ :) – derecks

添加標籤到每一個文本跨越

document.getElementById("countdown") 
     .innerHTML = 
     ' <span>' + dday1 + "</span> <span>" + dday2 +'</span> : <span>' + dhr1 + "</span> <span> " + dhr2 + '</span> : <span>' + dmin1 + "</span> <span> " + dmin2 + '</span> : <span>' + dsec1 + " </span> <span>" + dsec2;  


IN css 


.countLook span { 
    border: 1px solid black; 
}

來源

2013-10-24 18:09:14 N20084753

圍繞每個數字的框

回答

相關問題