一款LED样式的jQuery时间倒计时插件，可分别显示当前时间、新年倒计时、圣诞倒计时、随机数字、随机字母等的LED样式效果，颜色、字体等样式均可自由调整设置，喜欢的童鞋请收下吧。
关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。
页面的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">'.led1'</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">'countdown'</span><span class="p">,</span>
<span class="nx">format</span><span class="o">:</span> <span class="s1">'ddd:hh:mm:ss'</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">'#fa0'</span><span class="p">,</span>
<span class="nx">background_color</span><span class="o">:</span> <span class="s1">'#fafafa'</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">'.led2'</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">'time'</span><span class="p">,</span>
<span class="nx">format</span><span class="o">:</span> <span class="s1">'hh:mm'</span><span class="p">,</span>
<span class="nx">color</span><span class="o">:</span> <span class="s1">'#ed1978'</span><span class="p">,</span>
<span class="nx">background_color</span><span class="o">:</span> <span class="s1">'#ccc'</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">'.led3'</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">'countdown'</span><span class="p">,</span>
<span class="nx">format</span><span class="o">:</span> <span class="s1">'ddd:hh:mm:ss'</span><span class="p">,</span>
<span class="nx">count_to</span><span class="o">:</span> <span class="s1">'2017:12:25'</span><span class="p">,</span>
<span class="nx">color</span><span class="o">:</span> <span class="s1">'#ff0000'</span><span class="p">,</span>
<span class="nx">background_color</span><span class="o">:</span> <span class="s1">'#fff'</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">'.led4'</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">'countdown'</span><span class="p">,</span>
<span class="nx">format</span><span class="o">:</span> <span class="s1">'ddd:hh'</span><span class="p">,</span>
<span class="nx">color</span><span class="o">:</span> <span class="s1">'#0000ff'</span><span class="p">,</span>
<span class="nx">background_color</span><span class="o">:</span> <span class="s1">'#888'</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">'.led5'</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">'random'</span><span class="p">,</span>
<span class="nx">color</span><span class="o">:</span> <span class="s1">'#ed1978'</span><span class="p">,</span>
<span class="nx">background_color</span><span class="o">:</span> <span class="s1">'#fff'</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">'.led6'</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">'custom'</span><span class="p">,</span>
<span class="nx">color</span><span class="o">:</span> <span class="s1">'#FF0000'</span><span class="p">,</span>
<span class="nx">background_color</span><span class="o">:</span> <span class="s1">'#BCBABA'</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">'ABCDEFG' //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>
系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791