我有一个 page that shows a javascript countdown . javascript 自动填充“d”表示天数,“h”表示小时数等...CSS 添加“ay(s)”、“our(s)”等...,在空间允许的情况下,并将它们大写。
Javascript:
function cdtd(broadcast) {
var nextbroadcast = new Date(broadcast);
var now = new Date();
var timeDiff = nextbroadcast.getTime() - now.getTime();
if (timeDiff <= 0) {
clearTimeout(timer);
document.getElementById("countdown").innerHTML = "<a href=\"flconlineservices.php\">Internet broadcast in progress<\/a>";
/* Run any code needed for countdown completion here */
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
document.getElementById("daysBox").innerHTML = days + " d";
document.getElementById("hoursBox").innerHTML = hours + " h";
document.getElementById("minsBox").innerHTML = minutes + " m";
// seconds isn't in our html code (javascript error if this isn't commented out)
/*document.getElementById("secsBox").innerHTML = seconds + " s";*/
var timer = setTimeout('cdtd(broadcast)',1000);
}
CSS:
[role="navigation"] {text-transform:capitalize;}
@media screen and (min-width:1600px) {
#countdown #daysBox:after {content:"ay(s)";}
#countdown #hoursBox:after {content:"our(s)";}
#countdown #minsBox:after {content:"inute(s)";}
}
Firefox 和 Opera 按我的预期显示倒计时(3 Day(s), 5 Hour(s), etc...),但 Internet Explorer 将 (s) 大写(3 Day(S), 5 Hour(S ), ETC...)。 Safari 和 Chrome 更糟,因为它们将 (s) 和 CSS 生成内容的首字母大写(3 DAy(S)、5 HOur(S) 等...)。
我找到了一个 page that shows typography bugs with :first-letter and :first-line这可能有点相关。
我尝试执行 text-transform:lowercase
,然后执行 text-transform:capitalize
,但这并没有改变结果。
关于如何解决这个问题的任何想法?我可能会去掉大写字母,但之后我必须确保所有内容都输入了正确的大小写。
张杰
最佳答案
好的,据我所知,您只需要天、小时和分钟上限的第一个字母。您可以在 javascript 中执行此操作。有点像
var daysString = days + " d";
document.getElementById("daysBox").innerHTML = daysString.toUpperCase();
更新:忘记提及我们的#countdown {text-transform:capitalize;}
关于CSS 文本转换 :Capitalize Oddity,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11317279/