LED样式的jQuery时间倒计时插件
来源：互联网 发布：绝地求生画面优化教程 编辑：程序博客网 时间：2024/06/14 12:38
一款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">'.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="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
阅读全文
0 0
- LED样式的jQuery时间倒计时插件
- jquery实现LED屏时间倒计时特效
- 漂亮实用的jQuery倒计时插件特效代码
- jquery.countdown.js一个时间倒计时的插件
- jquery.countdown 倒计时插件的学习
- 时间倒计时插件
- 倒计时(Jquery插件)
- jquery倒计时插件用法
- 倒计时 jquery.countdown插件
- JQuery----倒计时插件downCount
- jQuery 倒计时插件
- jquery时间倒计时
- jquery时间倒计时
- jquery时间倒计时案例
- jCountdown倒计时插件 基于jquery开发的插件
- jquery的pikaday时间插件
- 关于时间的jquery插件
- jquery插件之倒计时-团购秒杀
- 15、oracle：计算两个时间的差值
- 对XML文件的重新认识，说说XML文件的二三事（二）：两种验证模式-DTD和XSD
- Android底部导航栏——bottomnavigation结合viewpager的实现
- 动态规划（一）
- AJAX实现跨域请求
- LED样式的jQuery时间倒计时插件
- 《深入理解Java虚拟机：JVM高级特性与最佳实践（第2版）周志明 著》阅读笔记目录（已完结）
- shell笔记
- HTML5_转译字符、相对路径、绝对路径、根相对路径
- Android NDK开发之旅(2)：一篇文章搞定Android Studio中使用CMake进行NDK/JNI开发
- Windows2012服务器上安装Apache+php+mysql
- CentOS搭建Git服务器教程
- （转）ubuntu中root和普通用户切换
- 【JavaScript】变量及其作用域
