页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，多个不同的样式效果分别放入不同的div容器里，代码如下：

<div style="width: 80%;margin-left: 10%;">
<h2 id="demo">示例演示</h2>

<p>当前年度倒计时</p>
<div class="led1"></div>
<p>Code:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led1&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span>
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;countdown&#39;</span><span class="p">,</span>
    <span class="nx">format</span><span class="o">:</span> <span class="s1">&#39;ddd:hh:mm:ss&#39;</span><span class="p">,</span>
    <span class="nx">hour_format</span><span class="o">:</span> <span class="mi">12</span><span class="p">,</span>
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#fa0&#39;</span><span class="p">,</span>
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#fafafa&#39;</span><span class="p">,</span>
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
    <span class="nx">size</span><span class="o">:</span> <span class="mi">9</span>
<span class="p">});</span>
</code></pre></div>


<p>显示当前时间</p>

<div class="led2"></div>

<p>Code:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led2&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span>
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;time&#39;</span><span class="p">,</span>
    <span class="nx">format</span><span class="o">:</span> <span class="s1">&#39;hh:mm&#39;</span><span class="p">,</span>
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#ed1978&#39;</span><span class="p">,</span>
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#ccc&#39;</span><span class="p">,</span>
    <span class="nx">size</span><span class="o">:</span> <span class="mi">8</span><span class="p">,</span>
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span>
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">1</span>
<span class="p">});</span>
</code></pre></div>


<p>圣诞节倒计时 (days-hours-minutes-seconds)</p>

<div class="led3"></div>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led3&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span>
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;countdown&#39;</span><span class="p">,</span>
    <span class="nx">format</span><span class="o">:</span> <span class="s1">&#39;ddd:hh:mm:ss&#39;</span><span class="p">,</span>
    <span class="nx">count_to</span><span class="o">:</span> <span class="s1">&#39;2017:12:25&#39;</span><span class="p">,</span>
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#ff0000&#39;</span><span class="p">,</span>
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#fff&#39;</span><span class="p">,</span>
    <span class="nx">size</span><span class="o">:</span> <span class="mi">8</span><span class="p">,</span>
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">2</span>
<span class="p">});</span>
</code></pre></div>


<p>新年倒计时 (days-hours)</p>

<div class="led4"></div>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led4&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span>
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;countdown&#39;</span><span class="p">,</span>
    <span class="nx">format</span><span class="o">:</span> <span class="s1">&#39;ddd:hh&#39;</span><span class="p">,</span>
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#0000ff&#39;</span><span class="p">,</span>
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#888&#39;</span><span class="p">,</span>
    <span class="nx">size</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span>
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">6</span>
<span class="p">});</span>
</code></pre></div>


<p>随机数字</p>

<div class="led5"></div>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led5&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span>
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;random&#39;</span><span class="p">,</span>
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#ed1978&#39;</span><span class="p">,</span>
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#fff&#39;</span><span class="p">,</span>
    <span class="nx">size</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span>
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">9</span><span class="p">,</span>
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">3</span>
<span class="p">});</span>
</code></pre></div>

<p>自定义字母</p>

<div class="led6"></div>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.led6&#39;</span><span class="p">).</span><span class="nx">catLED</span><span class="p">({</span>
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;custom&#39;</span><span class="p">,</span>
    <span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;#FF0000&#39;</span><span class="p">,</span>
    <span class="nx">background_color</span><span class="o">:</span> <span class="s1">&#39;#BCBABA&#39;</span><span class="p">,</span>
    <span class="nx">size</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span>
    <span class="nx">rounded</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
    <span class="nx">font_type</span><span class="o">:</span> <span class="mi">4</span>
    <span class="nx">value</span><span class="o">:</span> <span class="mi">&#39;ABCDEFG&#39;  //only ABCDEFGHIJKLMNOPQRSTUVWXYZ@</span>
<span class="p">});</span>
</code></pre></div>
</div>

页面的底部，需引入jQuery库和两个JS插件，并启用插件设置好相应的参数，代码如下：

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/jquery-led.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.led1').catLED({
        type: 'countdown',
        format: 'ddd:hh:mm:ss',
        hour_format: 12,
        color: '#fa0',
        background_color: '#fafafa',
        rounded: 0,
        font_type: 2,
        size: 9
    });
    $('.led2').catLED({
        type: 'time',
        format: 'hh:mm',
        color: '#ed1978',
        background_color: '#ccc',
        size: 8,
        rounded: 4,
        font_type: 1
    });
    $('.led3').catLED({
        type: 'countdown',
        format: 'ddd:hh:mm:ss',
        count_to: '2017:12:25',
        color: '#ff0000',
        background_color: '#fff',
        size: 8,
        font_type: 2
    });
    $('.led4').catLED({
        type: 'countdown',
        format: 'ddd:hh',
        color: '#0000ff',
        background_color: '#888',
        size: 10,
        font_type: 2,
        rounded: 6
    });
    $('.led5').catLED({
        type: 'random',
        color: '#ed1978',
        background_color: '#fff',
        size: 6,
        rounded: 9,
        font_type: 3
    });
    $('.led6').catLED({
        type: 'custom',
        color: '#FF0000',
        background_color: '#BCBABA',
        size: 10,
        rounded: 2,
        font_type: 4,
        value: 'ABCDEFG'
    });
});
</script>