JSFiddle - React, Tailwind, and code Playground

Customizable Analog Clock - jQuery

by Jennifer Perrin

HTML

<div id="analog-clock" ></div>

CSS

body { margin: 100px; }

JavaScript

var clockWidthHeight;//width and height of the clock
var clockDiv;
var secondHand;
var minuteHand;
var hourHand;
var imgsLoaded = 0;
var secondHandSpeed;
var smoothRotation = false;
var useSecondHand = true;
var imagesToLoad = 4;
var callInterval = 1000;
var retina = false;

AnalogClock = function(config){
    
    clockDiv = $("#" + config.divId);
    clockWidthHeight = config.clockWidthAndHeight;
    secondHandSpeed = config.secondHandSpeed;
    
    if(config.useSecondHand == "false"){
        useSecondHand = false;
        imagesToLoad = 3;
    }    
    
    if(config.smoothRotation == "true" && useSecondHand){
        smoothRotation = true;
        callInterval = 50;
    }
    
    
    //set clock holder css
    clockDiv.css({"height":clockWidthHeight + "px", "width":clockWidthHeight + "px", "position":"relative"});
    
    //add graphical elements 
    retina = window.devicePixelRatio > 1;//check if retina
    
    if(retina){
        
        clockDiv.append("<img id='bg' src=" + config.clockFaceHighResImg + " height="+clockWidthHeight+" width="+clockWidthHeight+" />");
        clockDiv.append("<img id='hourHand' src=" + config.hourHandHighResImg + " />");
        clockDiv.append("<img id='minuteHand' src=" + config.minuteHandHighResImg + " />");
        if(useSecondHand)clockDiv.append("<img id='secondHand' src=" + config.secondHandHighResImg + " />");
        
    }else{
    
        clockDiv.append("<img id='bg' src=" + config.clockFaceImg + " /><img id='hourHand' src=" + config.hourHandImg + " /><img id='minuteHand' src=" + config.minuteHandImg + " />");
        if(useSecondHand)clockDiv.append("<img id='secondHand' src=" + config.secondHandImg + " />");
    
    }
    
    //define elements
    if(useSecondHand)secondHand = $("#secondHand");
    minuteHand = $("#minuteHand");
    hourHand = $("#hourHand");
    
    //check to see if the images are loaded
    $('#bg').load(function() {   checkIfImagesLoaded();  });
   ...