0

我正在尝试更多地了解网络编程和 html。我有这个倒计时，我正在尝试设计一些风格，但我很难得到我想要的东西。

http://jsfiddle.net/aby3M/

.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来做，但也许这比我理解的要多。有什么帮助吗？

4

2 回答 2

3

将跨度添加到内部 HTML 中的数字。我没有做所有这些，因为我相信你明白了。然后只需使用 CSS 来设置它们的样式

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

然后只需使用 CSS 设置 span 样式。我添加了一个漂亮的丑陋样式供您查看。

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

前两位数字演示：http: //jsfiddle.net/aby3M/1/

于 2013-10-24T18:07:22.890 回答
0

添加到 .innerHtml 时为每个文本添加标签，然后设置该跨度的样式

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-24T18:09:14.480 回答