当前位置: HTML5技术网 > CSS3教程 > CSS3+jQuery的一个丰富多彩时钟


CSS3教程  手机阅读

源码下载     在线演示
(function($){    // A global object used by the functions of the plug-in:    var gVars = {};     // Extending the jQuery core:     $.fn.tzineClock = function(opts){         // "this" contains the elements that were selected when calling the plugin:         $('elements').tzineClock();        // If the selector returned more than one element, we use the first one:        var container = this.eq(0);        if(!container)        {            try{                console.log("Invalid selector!");            } catch(e){}             return false;        }         if(!opts) opts = {};         var defaults = {            /* Additional options will be added in future versions of the plugin. */        };         /* Merging the provided options with the default ones (will be used in future versions of the plugin): */         $.each(defaults,function(k,v){            opts[k] = opts[k] || defaults[k];        });         // Calling the setUp function and passing the container,        // will be available to the setUp function as "this":         setUp.call(container);         return this;    }     function setUp()    {        // The colors of the dials:        var colors = ['orange','blue','green'];         var tmp;        for(var i=0;i<3;i++)        {            // Creating a new element and setting the color as a class name:             tmp = $('<div>').attr('class',colors[i]+' clock').html(                '<div class="display"></div>'+                '<div class="front left"></div>'+                '<div class="rotate left">'+                '<div class="bg left"></div>'+                '</div>'+                '<div class="rotate right">'+                '<div class="bg right"></div>'+                '</div>'            );             // Appending to the fancyClock container:            $(this).append(tmp);             // Assigning some of the elements as variables for speed:            tmp.rotateLeft = tmp.find('.rotate.left');            tmp.rotateRight = tmp.find('.rotate.right');            tmp.display = tmp.find('.display');             // Adding the dial as a global variable. Will be available as gVars.colorName            gVars[colors[i]] = tmp;        }         // Setting up a interval, executed every 1000 milliseconds:        setInterval(function(){             var currentTime = new Date();            var h = currentTime.getHours();            var m = currentTime.getMinutes();            var s = currentTime.getSeconds();             animation(gVars.green, s, 60);            animation(gVars.blue, m, 60);            animation(gVars.orange, h, 24);        },1000);    }


1. CSS3+jQuery的一个丰富多彩时钟

2. CSS3+jQuery的一个丰富多彩时钟

3. 游戏开发技术的新革命!丰富多彩的HTML5游戏

4. 使用jQuery和CSS3实现一个数字时钟

5. 使用jQuery和CSS3实现一个数字时钟

6. jQuery+CSS3实现数字时钟Digital Clock

7. jQuery+CSS3实现数字时钟Digital Clock

8. 8个基于jQuery和HTML5的日历时钟插件

9. CSS创始人之一Bert Bos:CSS只是进化的一部分

10. CSS3+jQuery的图像画廊Photobox


上一篇:css布局九决 学css不再难 下一篇:jQuery+CSS3实现数字时钟Digital Clock


复制网址 收藏网址 分享到微信 分享到微博 分享到QQ