4

JavaScript カウントダウンを表示するページがあります。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 日、5 時間など) が、Internet Explorer では (3 日、5 時間など) が大文字になります。 ...)。Safari と Chrome はさらに悪く、(s) と CSS 生成コンテンツの最初の文字 (3 DAY(S)、5 HOur(S) など) を大文字にします。

:first-letter と :first-line のタイポグラフィのバグを示すページを見つけましたが、これは多少関連している可能性があります。

text-transform:lowercaseそして、やってみtext-transform:capitalizeましたが、結果は変わりませんでした。

これを修正する方法についてのアイデアはありますか? 大文字と小文字を区別するだけかもしれませんが、大文字と小文字が正しく入力されていることを確認する必要があります。

JJ

4

1 に答える 1

1

わかりましたので、私が言えることは、日、時間、分の大文字の最初の文字が必要なだけです。これは JavaScript で行うことができます。何かのようなもの

var daysString = days + " d";
document.getElementById("daysBox").innerHTML = daysString.toUpperCase();

更新: #countdown {text-transform:capitalize;} を取ることを忘れていました。

于 2012-07-04T19:55:50.433 に答える