jQuery时钟

PROMULGATOR

.√逝氺哖譁

北京市

← CS3炫酷六边体旋转立体相册

→ 原生JS 实现简单的全选反选

相关代码

css3时钟动画

css3实现网页电子时钟

jquery css3网页时钟代码

css3+js实现罗马数字指针时钟（原创）

css3实现网页电子时钟代码

纯CSS3写得模拟时钟

Html

Css

Js

(function($) {
     var _options = {};
     var _container = {};
     jQuery.fn.MyDigitClock = function(options) {
         var id = $(this).get(0).id;
         _options[id] = $.extend({}, $.fn.MyDigitClock.defaults, options);
         return this.each(function() {
             _container[id] = $(this);
             showClock(id);
         });

function showClock(id) {
             var d = new Date;
             var h = d.getHours();
             var m = d.getMinutes();
             var s = d.getSeconds();
             var ampm = "";
             if (_options[id].bAmPm) {
                 if (h > 12) {
                     h = h - 12;
                     ampm = " PM";
                 } else {
                     ampm = " AM";
                 }
             }
             var templateStr = _options[id].timeFormat + ampm;
             templateStr = templateStr.replace("{HH}", getDD(h));
             templateStr = templateStr.replace("{MM}", getDD(m));
             templateStr = templateStr.replace("{SS}", getDD(s));
             var obj = $("#" + id);
             obj.css("fontSize", _options[id].fontSize);
             obj.css("fontFamily", _options[id].fontFamily);
             obj.css("color", _options[id].fontColor);
             obj.css("background", _options[id].background);
             obj.css("fontWeight", _options[id].fontWeight);
             //change reading
             obj.html(templateStr)
             //toggle hands
             if (_options[id].bShowHeartBeat) {
                 obj.find("#ch1").fadeTo(800, 0.1);
                 obj.find("#ch2").fadeTo(800, 0.1);
             }
             setTimeout(function() {
                 showClock(id)
             }, 1000);
         }

function getDD(num) {
             return (num >= 10) ? num : "0" + num;
         }

function refreshClock() {
             setupClock();
         }
     }
     //default values
     jQuery.fn.MyDigitClock.defaults = {
         fontSize: '50px',
         fontFamily: 'Microsoft JhengHei, Century gothic, Arial',
         fontColor: '#ff2200',
         fontWeight: 'bold',
         background: '#fff',
         timeFormat: '{HH}<span id="ch1">:</span>{MM}<span id="ch2">:</span>{SS}',
         bShowHeartBeat: false,
         bAmPm: false
     };
 })(jQuery);

$(document).ready(function() {
            $(function() {
                $("#clock1").MyDigitClock();
                $("#clock2").MyDigitClock({
                    fontSize: 50,
                    fontFamily: "Century gothic",
                    fontColor: "#000",
                    fontWeight: "bold",
                    bAmPm: true,
                    background: '#fff',
                    bShowHeartBeat: true
                });

$("#clock3").MyDigitClock({
                    fontSize: 150,
                    fontColor: "grey",
                    background: "#fff",
                    fontWeight: "bold",
                    timeFormat: '{HH}:{MM}'
                });
            });
        });

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery时钟



代码描述：动态时钟

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery时钟-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号