LED样式的jQuery时间倒计时插件

一款LED样式的jQuery时间倒计时插件，可分别显示当前时间、新年倒计时、圣诞倒计时、随机数字、随机字母等的LED样式效果，颜色、字体等样式均可自由调整设置，喜欢的童鞋请收下吧。

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

<link type="text/css" rel="stylesheet" href="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben916/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="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben916/js/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben916/js/raphael.js"></script> 
<script type="text/javascript" src="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben916/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>

项目地址：http://www.datouwang.com/jiaoben/1221.html