JAVASCRIPT   56

jquery tzineClock js

Guest on 6th July 2022 09:11:00 AM

  1. /*!
  2.  * jquery.tzineClock.js - Tutorialzine Colorful Clock Plugin
  3.  *
  4.  * Copyright (c)  Martin Angelov
  5.  * http://tutorialzine.com/
  6.  *
  7.  * Licensed under MIT
  8.  * http://www.opensource.org/licenses/mit-license.php
  9.  *
  10.  * Launch  : December 2009
  11.  * Version : 1.0
  12.  * Released: Monday 28th December, 2009 - 00:00
  13.  */
  14.  
  15. (function($){
  16.        
  17.         // A global array used by the functions of the plug-in:
  18.         var gVars = {};
  19.  
  20.         // Extending the jQuery core:
  21.         $.fn.tzineClock = function(opts){
  22.        
  23.                 // "this" contains the elements that were selected when calling the plugin: $('elements').tzineClock();
  24.                 // If the selector returned more than one element, use the first one:
  25.                
  26.                 var container = this.eq(0);
  27.        
  28.                 if(!container)
  29.                 {
  30.                         try{
  31.                                 console.log("Invalid selector!");
  32.                         } catch(e){}
  33.                        
  34.                         return false;
  35.                 }
  36.                
  37.                 if(!opts) opts = {};
  38.                
  39.                 var defaults = {
  40.                         /* Additional options will be added in future versions of the plugin. */
  41.                 };
  42.                
  43.                 /* Merging the provided options with the default ones (will be used in future versions of the plugin): */
  44.                 $.each(defaults,function(k,v){
  45.                         opts[k] = opts[k] || defaults[k];
  46.                 })
  47.  
  48.                 // Calling the setUp function and passing the container,
  49.                 // will be available to the setUp function as "this":
  50.                 setUp.call(container);
  51.                
  52.                 return this;
  53.         }
  54.        
  55.         function setUp()
  56.         {
  57.                 // The colors of the dials:
  58.                 var colors = ['orange','blue','green'];
  59.                
  60.                 var tmp;
  61.                
  62.                 for(var i=0;i<3;i++)
  63.                 {
  64.                         // Creating a new element and setting the color as a class name:
  65.                        
  66.                         tmp = $('<div>').attr('class',colors[i]+' clock').html(
  67.                                 '<div class="display"></div>'+
  68.                                
  69.                                 '<div class="front left"></div>'+
  70.                                
  71.                                 '<div class="rotate left">'+
  72.                                         '<div class="bg left"></div>'+
  73.                                 '</div>'+
  74.                                
  75.                                 '<div class="rotate right">'+
  76.                                         '<div class="bg right"></div>'+
  77.                                 '</div>'
  78.                         );
  79.                        
  80.                         // Appending to the container:
  81.                         $(this).append(tmp);
  82.                        
  83.                         // Assigning some of the elements as variables for speed:
  84.                         tmp.rotateLeft = tmp.find('.rotate.left');
  85.                         tmp.rotateRight = tmp.find('.rotate.right');
  86.                         tmp.display = tmp.find('.display');
  87.                        
  88.                         // Adding the dial as a global variable. Will be available as gVars.colorName
  89.                         gVars[colors[i]] = tmp;
  90.                 }
  91.                
  92.                 // Setting up a interval, executed every 1000 milliseconds:
  93.                 setInterval(function(){
  94.                
  95.                         var currentTime = new Date();
  96.                         var h = currentTime.getHours();
  97.                         var m = currentTime.getMinutes();
  98.                         var s = currentTime.getSeconds();
  99.                        
  100.                         animation(gVars.green, s, 60);
  101.                         animation(gVars.blue, m, 60);
  102.                         animation(gVars.orange, h, 24);
  103.                
  104.                 },1000);
  105.         }
  106.        
  107.         function animation(clock, current, total)
  108.         {
  109.                 // Calculating the current angle:
  110.                 var angle = (360/total)*(current+1);
  111.        
  112.                 var element;
  113.  
  114.                 if(current==0)
  115.                 {
  116.                         // Hiding the right half of the background:
  117.                         clock.rotateRight.hide();
  118.                        
  119.                         // Resetting the rotation of the left part:
  120.                         rotateElement(clock.rotateLeft,0);
  121.                 }
  122.                
  123.                 if(angle<=180)
  124.                 {
  125.                         // The left part is rotated, and the right is currently hidden:
  126.                         element = clock.rotateLeft;
  127.                 }
  128.                 else
  129.                 {
  130.                         // The first part of the rotation has completed, so we start rotating the right part:
  131.                         clock.rotateRight.show();
  132.                         clock.rotateLeft.show();
  133.                        
  134.                         rotateElement(clock.rotateLeft,180);
  135.                        
  136.                         element = clock.rotateRight;
  137.                         angle = angle-180;
  138.                 }
  139.  
  140.                 rotateElement(element,angle);
  141.                
  142.                 // Setting the text inside of the display element, inserting a leading zero if needed:
  143.                 clock.display.html(current<2?'0'+current:current);
  144.         }
  145.        
  146.         function rotateElement(element,angle)
  147.         {
  148.                 // Rotating the element, depending on the browser:
  149.                 var rotate = 'rotate('+angle+'deg)';
  150.                
  151.                 if(element.css('MozTransform')!=undefined)
  152.                         element.css('MozTransform',rotate);
  153.                        
  154.                 else if(element.css('WebkitTransform')!=undefined)
  155.                         element.css('WebkitTransform',rotate);
  156.        
  157.                 // A version for internet explorer using filters, works but is a bit buggy (no surprise here):
  158.                 else if(element.css("filter")!=undefined)
  159.                 {
  160.                         var cos = Math.cos(Math.PI * 2 / 360 * angle);
  161.                         var sin = Math.sin(Math.PI * 2 / 360 * angle);
  162.                        
  163.                         element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
  164.        
  165.                         element.css("left",-Math.floor((element.width()-30)/2));
  166.                         element.css("top",-Math.floor((element.height()-30)/2));
  167.                 }
  168.        
  169.         }
  170.        
  171. })(jQuery)

Raw Paste


Login or Register to edit or fork this paste. It's free.