Question

我没有真正使用过jQuery或Javascript。有人可以告诉我如何实施这个Binary Clock吗？

Answer 1

转到以下网址：

http://www.scottklarr.com/files/binary-clock/clock.htm

并查看来源。

以下是细分：

此代码设置jQuery和插件：

<head>
<link href="binary-clock.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="binary-clock.js"></script>
</head>

它还引用了样式表，可以从http://www.scottklarr.com/files/binary-clock/clock.css

下载

此代码：

<div id="binaryClock">
    <div id="bcHa">
        <img src="led0.png" alt="" id="bcHa1" />
        <img src="led0.png" alt="" id="bcHa2" />
    </div>
    <div id="bcHb" class="edge">
        <img src="led0.png" alt="" id="bcHb1" />
        <img src="led0.png" alt="" id="bcHb2" />
        <img src="led0.png" alt="" id="bcHb4" />
        <img src="led0.png" alt="" id="bcHb8" />
    </div>

    <div id="bcMa">
        <img src="led0.png" alt="" id="bcMa1" />
        <img src="led0.png" alt="" id="bcMa2" />
        <img src="led0.png" alt="" id="bcMa4" />
    </div>
    <div id="bcMb" class="edge">
        <img src="led0.png" alt="" id="bcMb1" />
        <img src="led0.png" alt="" id="bcMb2" />
        <img src="led0.png" alt="" id="bcMb4" />
        <img src="led0.png" alt="" id="bcMb8" />
    </div>

    <div id="bcSa">
        <img src="led0.png" alt="" id="bcSa1" />
        <img src="led0.png" alt="" id="bcSa2" />
        <img src="led0.png" alt="" id="bcSa4" />
    </div>
    <div id="bcSb">
        <img src="led0.png" alt="" id="bcSb1" />
        <img src="led0.png" alt="" id="bcSb2" />
        <img src="led0.png" alt="" id="bcSb4" />
        <img src="led0.png" alt="" id="bcSb8" />
    </div>
</div>

...是页面上引用实际时钟的位置。它包含构成时钟点元素的所有图像文件的div引用。它还包含一些CSS类引用，因此正在进行一些样式化。

此代码：

<script type="text/javascript">
    $(document).ready(function() { 
         updateBinaryClock(); 
    });
</script>

...等待页面在浏览器中完全加载，然后启动时钟插件。

Answer 2

使用此JavaScript：

$(document).ready(function () {
    $('#clock_div').binaryClock();
});

对于此HTML代码：

<div id="clock_div"></div>

演示（带插件来源）here。

jQuery二进制时钟

2 个答案: