14 最佳 jQuery 时钟教程包括模拟和数字时钟
jopen 13年前
<h4>1. CoolClock in jQuery</h4> <p>CoolClock 是一个可定制的 jQuery 模拟时钟，使用 SVG 绘制，提供多种外观选择，同时支持数字时钟。</p> <p><a href="/misc/goto?guid=4958187531982830320"><img class="alignnone size-full wp-image-2919" title="jQuery Cool Clock" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/29d042993f4f0e36fe6e6333c3f49092.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958187531982830320" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201643942770349" target="_blank">示例</a></p> <h4>2.Analog JQuery clock</h4> <p>在该教程中，通过使用 jQuery 和一个名为 jQueryRotata 插件绘制一个模拟时钟。</p> <p><a href="/misc/goto?guid=4958201644687184033"><img class="alignnone size-full wp-image-2921" title="jquery analog clock" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/4878a941e63f99cee037e3427eb5a503.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201644687184033" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201646091694577" target="_blank">示例</a></p> <h4>3. jDigiClock</h4> <p>jDigiClock 是一个jQuery插件，主要灵感来自于 HTC 手机的时钟小程序</p> <p><a href="/misc/goto?guid=4958201646843500602"><img class="alignnone size-full wp-image-2925" title="jquery jDigiClock" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/3ab246d55b94347bbc9f57623f157004.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201646843500602" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201646843500602" target="_blank">示例</a></p> <h4>4. Old School Clock with CSS3 and jQuery</h4> <p>旋转是 CSS3 新增的特性，看看下面的时钟吧，就是用 CSS3 和 jQuery 搞的</p> <p><a href="/misc/goto?guid=4958201648925477059"><img class="alignnone size-full wp-image-2926" title="Old School Clock with CSS3 and jQuery" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/41308d0c1adbc7422001682a76a0a1db.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201649669053948" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201650418168762" target="_blank">示例</a></p> <h4>5. jQuery Dynamic Clock Plugin</h4> <p>该插件可以将一个给定的 div 元素转成动态时钟，每秒钟更新，可自由设置时间而不是自动根据浏览器的时间来。</p> <p><a href="/misc/goto?guid=4958201651165231049"><img class="alignnone size-full wp-image-2927" title="jQuery Dynamic Clock Plugin" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/7b31ea3a79078d98207a40e3507c33eb.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201651165231049" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201652580627669" target="_blank">示例</a></p> <h4>6. jQuery Woozy Clock</h4> <p>jQuery woozy clock 是一个数字时间动画展示插件</p> <p><a href="/misc/goto?guid=4958201653320160543"><img class="alignnone size-full wp-image-2929" title="jQuery Woozy Clock" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/8411f5855453eba27a596c54721676b8.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201653320160543" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201653320160543" target="_blank">示例</a></p> <h4>7. CSS3 Digital Clock with jQuery</h4> <p>本教程通过制作一个简单的数字时钟，包括日期和时间，在 jQuery 和 CSS3 的帮助下完成，有一点点动画效果。</p> <p><a href="/misc/goto?guid=4958201655407505000"><img class="alignnone size-full wp-image-2932" title="CSS3 Digital Clock with jQuery" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/8d124210735dbd7dabbaab2ba0fe9141.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201655407505000" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201656825793528" target="_blank">示例</a></p> <h4>8. Colour Clock – jQuery/CSS3 rebuild</h4> <p>Colour Clock 是一个很聪明的注意，使用十六进制值来做时钟显示</p> <p><a href="/misc/goto?guid=4958201657563548001"><img class="alignnone size-full wp-image-2933" title="Colour Clock – jQuery/CSS3 rebuild" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/30610664ab98a21cbfd18f02072080bb.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201657563548001" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201658964501632" target="_blank">示例</a></p> <h4>9. CountDown jQuery plugin</h4> <p>倒计时的 jQuery 插件</p> <p><a href="/misc/goto?guid=4958201659697452416"><img class="alignnone size-full wp-image-2934" title="CountDown jQuery plugin" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/bdc47cb806c7e07197ecfda6220f8295.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201659697452416" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201661118169368" target="_blank">示例</a></p> <h4>10. jQuery Countdown</h4> <p>另外一个倒计时插件，很炫的 LED 风格</p> <p><a href="/misc/goto?guid=4958201661858939401"><img class="alignnone size-full wp-image-2935" title="jQuery Countdown Clock" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/9591126b9c26da2b319923aec2dbdb9b.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201661858939401" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201661858939401" target="_blank">示例</a></p> <h4>11. Colorful Clock With CSS & jQuery</h4> <p>颜色鲜艳的 jQuery 时钟</p> <p><a href="/misc/goto?guid=4958201663944071351"><img class="alignnone size-full wp-image-2936" title="Colorful Clock With CSS & jQuery" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/fd62639512fe55107f4b061639b525ed.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201663944071351" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201665352534059" target="_blank">示例</a></p> <h4>12. jQuery Sliding clock</h4> <p>这个时钟有点超现代，使用标尺来表示时间，看不懂</p> <p><a href="/misc/goto?guid=4958201666089634328"><img class="alignnone size-full wp-image-2937" title="jQuery Sliding clock" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/f682cbd82c11dfeb35253da64d8ce1a0.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201666089634328" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201667498778713" target="_blank">示例</a></p> <h4>13. HTML clocks using JavaScript and CSS rotation</h4> <p>使用 <canvas> 开发的时钟 </canvas></p> <p><a href="/misc/goto?guid=4958201668232936862"><img class="alignnone size-full wp-image-2938" title="HTML clocks using JavaScript and CSS rotation" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/f17f88a4ed7f781a463bd273da53462e.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201668232936862" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201668232936862" target="_blank">示例</a></p> <h4>14. Creating a css3 and jQuery clock</h4> <p>一个简单的 jQuery 和 CSS3 实现的模拟时钟，使用图片作为时针、分针和秒针。</p> <p><a href="/misc/goto?guid=4958201670308818782"><img class="alignnone size-full wp-image-2939" title="Creating a css3 and jQuery clock" alt="14 最佳 jQuery 时钟教程包括模拟和数字时钟" src="https://simg.open-open.com/show/99cccb90ab44799488d17f34a33801b1.jpg" width="500" height="150" /></a></p> <p><a class="readlink" title="详细内容 Link" href="/misc/goto?guid=4958201670308818782" target="_blank">详细内容</a> <a class="readlink" title="示例 Link" href="/misc/goto?guid=4958201671737935835" target="_blank">示例</a></p> 转自： <a href="/misc/goto?guid=4958201672472123594">http://www.jqueryrain.com/2011/11/14-best-jquery-clock-tutorials-both-analog-and-digital-clocks/</a>