每个数字周围的框
Box surrounding each digit
我正在尝试学习更多关于Web编程和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 来做这件事,但也许这比我理解的要多。有什么帮助吗?
在
内部 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/
添加到 .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;
}
相关文章:
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 测试索引值是否等于某个数字的倍数
- 将数字转换为一定数量的硬币
- 键入最后一位数字后自动提交
- 如何在javascript中迭代数字列表
- Javascript逻辑运算符和字符串/数字
- 如何在javascript中获得与特定数字相等的随机数
- 如果元素's的ID以数字开头
- 递增一个数字而不去掉前导零
- 如何使用JavaScript查找1和N之间的所有数字的总和
- 如何在这里将两个值最低的数字相加
- 如何删除除冒号、数字和'上午'或者'下午'
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- Javascript排序字符串或数字
- 我想在AngularJS应用程序中创建一个输入数字框,用户不应该在该框上键入十进制数字.(一个整数输入框)
- 将数字四舍五入到小数点后两位
- 将 SPAN 括在 DIV 中的所有数字周围
- 每个数字周围的框
- 如何在时钟周围定位这些数字
- 替换数字周围的字符串