0

我有这个时钟 w3schools： http ://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

基本上，我想让“：”闪烁。（可见/隐藏）我想我必须使用 jQuery 选择“：”，然后更改可见性 css 属性，但我不知道如何，因为它们已经由 jQuery 生成......

据我所读，Regex 可能是进行选择的解决方案，但我不知道如何使用它。

任何帮助都会很棒！

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>

您还需要将时钟的数字添加到单独的跨度中，这样“：”就不会每秒都被插入和删除。

最后，您初始化一个间隔，将闪烁效果应用于“闪烁”类。

查询：

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 回答