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

时间: 2013-12-6 分类: CSS 作者: SAI

TAGS:

133937cczfc3bqe3cr09q3 
CSS3+jQuery的一个丰富多彩时钟。
代码:
 
(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></div>’+
                ‘<div></div>’+
                ‘<div>’+
                ‘<div></div>’+
                ‘</div>’+
                ‘<div>’+
                ‘<div></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);
    }
Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » CSS » CSS3+jQuery的一个丰富多彩时钟
本文地址:http://www.saiody.com/?p=953

返回顶部