0

私はこの時計 w3schools を持っています: http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

基本的には「:」を点滅させたいと思います。(visible/hidden) jQuery で ":" を選択してから、css の可視性プロパティを変更する必要があると思いますが、既に jQuery によって生成されているため、方法がわかりません...

私が読んだ限り、正規表現は選択を行うための解決策かもしれませんが、それを使用する方法がわかりません。

どんな助けでも素晴らしいでしょう！

4

1 に答える 1

2

クロックのさまざまな部分をスパンに分割できます。そして、「:」をクラスに入れます。

HTML:

<body onload="startTime()">
    <div id="txt"> <span id="hours"></span><span class="blink">:</span><span id="minutes"></span><span class="blink">:</span><span id="seconds"></span>
    </div>

また、「:」が毎秒挿入および削除されないように、クロックの番号を別のスパンに追加する必要があります。

最後に、点滅効果を「点滅」クラスに適用する間隔を初期化します。

JQuery:

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    // add a zero in front of numbers<10
    m = checkTime(m);
    s = checkTime(s);
    $("#hours").html(h);
    $("#minutes").html(m);
    $("#seconds").html(s);
    t = setTimeout(function () {
        startTime()
    }, 500);
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

$(document).ready(function () {
    startTime();
    $('.blink').each(function () {
        var elem = $(this);
        setInterval(function () {
            if (elem.css('visibility') == 'hidden') {
                elem.css('visibility', 'visible');
            } else {
                elem.css('visibility', 'hidden');
            }
        }, 500);
    });
});

ここに動作するデモがあります: http://jsfiddle.net/UsnFR/

于 2013-07-29T11:53:40.380 に答える