Create a customizable JavaScript clock that synchronizes with an image to display the current hour, minute

Question

Create a customizable JavaScript clock that synchronizes with an image to display the current hour, minute

I am having trouble with my clock not working

I have created images for the hour, minute, second, and AM/PM

https://i.sstatic.net/4zg00.png

I attempted to use this code:

<script language="JavaScript1.1"> <!--

/* Live image clock III Written by Alon Gibli (http://www.angelfire.com/biz6/deathrowtech) Visit http://wsabstract.com for this script and more
*/

// Setting variables dig = new Image() dig[0] = '0.gif' dig[1] = '1.gif' dig[2] = '2.gif' dig[3] = '3.gif' dig[4] = '4.gif' dig[5] = '5.gif' dig[6] = '6.gif' dig[7] = '7.gif' dig[8] = '8.gif' dig[9] = '9.gif'

//writing images document.write('<table border=1 cellspacing=0 bgcolor="silver">') document.write('<tr><td><img src="0.gif" name="hrs1"></img>') document.write('<img src="0.gif" name="hrs2"></img>') document.write('<td><img src="col.gif"></img>') document.write('<td><img src="0.gif" name="mins1"></img>') document.write('<img src="0.gif" name="mins2"></img>') document.write('<td><img src="col.gif"></img>') document.write('<td><img src="0.gif" name="secs1"></img>') document.write('<img src="0.gif" name="secs2"></img>') document.write('<td><img src="am.gif" name="ampm"></img></table>')

//starting clock function function showTime() { now = new Date ampmtime = now.getHours() - 12 thisHrs = '' + now.getHours() + '' thisMin = '' + now.getMinutes() + '' thisSec = '' + now.getSeconds() + ''

if (thisHrs > 9) {   if (thisHrs >= 12) {
    document.ampm.src = 'pm.gif'
             if (thisHrs==12)
                    newHrs=''+12+''
    if (thisHrs > 12) {
      newHrs = '' + ampmtime + ''
    }
    if (newHrs <= 9) {
      document.hrs1.src = dig[0]
      document.hrs2.src = dig[newHrs.charAt(0)]
    }
    if (newHrs > 9) {
      document.hrs1.src = dig[newHrs.charAt(0)]
      document.hrs2.src = dig[newHrs.charAt(1)]
    }   }   else {
    document.ampm.src = 'am.gif'
    document.hrs1.src = dig[thisHrs.charAt(0)]
    document.hrs2.src = dig[thisHrs.charAt(1)]   } } if (thisHrs <= 9) {   document.ampm.src = 'am.gif'   if (thisHrs == 0) {
    document.hrs1.src = dig[1]
    document.hrs2.src = dig[2]   }   else {
    document.hrs1.src = dig[0]
    document.hrs2.src = dig[thisHrs.charAt(0)]   } } if (thisMin > 9) {   document.mins1.src = dig[thisMin.charAt(0)]   document.mins2.src = dig[thisMin.charAt(1)] } if (thisMin <= 9) {   document.mins1.src = dig[0]   document.mins2.src = dig[thisMin.charAt(0)] } if (thisSec > 9) {   document.secs1.src = dig[thisSec.charAt(0)]   document.secs2.src = dig[thisSec.charAt(1)] } if (thisSec <= 9) {   document.secs1.src = dig[0]   document.secs2.src = dig[thisSec.charAt(0)] } setTimeout("showTime()",1000) }

window.onload=showTime // --> </script>

How can I change the hour, minute, second, and AM/PM with the images I have created?

I have attempted several methods but have been unsuccessful :(

Thank you :)

javascript image clock

Answer 1

Answer №1

Typically, I would normally tackle this issue by utilizing a sprite sheet for efficiency purposes since you are dealing with 135 unique images. Using individual images would usually lead to multiple requests to a web server, resulting in performance issues. It is technically feasible to achieve the desired effect using CSS or SVG due to the simplicity of your images...

However, in an effort to stay true to the question and considering the absence of specific size requirements for your clock, I have opted to work with individual images. Despite this choice, I have taken steps to optimize the images provided in your zip file for the example that follows.

The images enclosed in your zip file are sized at 400x298 pixels with a total file size of 4MB (this might not be ideal for web usage). If resizing is not an option (i.e., if you need a large clock), I recommend compressing the images. For demonstration purposes and to conserve bandwidth, I have resized the images to 50x37 and compressed them using pngquant (I highly recommend exploring this tool).

In addition, I have encoded the images in base64 format and stored them in a JavaScript object structured as follows:

Clock.prototype.imgs = {
    hrs:[...], // array(13)
    min:[...], // array(60)
    sec:[...], // array(60)
    gmt:[...]  // array(2)
}

This approach enables loading all images with a single request on the page and facilitates browser interpretation through a data URI.

^{Overall, achieving a considerable reduction in file size to ~150KB :)}

Moving on to the script implementation: (I have aimed to keep it straightforward)

To begin, assign an element in the HTML for reference, e.g.:

<div id="myClock"></div>

Then, within your script tags:

new Clock;
function Clock(){

    // setting up DOM elements
    var clock = document.getElementById('myClock');
    this.elHrs = document.createElement('img');
    this.elMin = document.createElement('img');
    this.elSec = document.createElement('img');
    this.elGmt = document.createElement('img'); 
    clock.appendChild(this.elHrs);
    clock.appendChild(this.elMin);
    clock.appendChild(this.elSec);
    clock.appendChild(this.elGmt);

    // configuring timer for updating every second
    this.tick = setInterval((function(scope){
        return function(){ scope.draw(); }
    })(this), 1000);

    this.draw = function(){
        var date = new Date,
            gmt  = Math.floor(date.getHours()/12),
            hrs  = date.getHours(),
            min  = date.getMinutes(),
            sec  = date.getSeconds(),
            uri  = 'data:image/png;base64,';
        if(hrs!=12) hrs %= 12;
        this.elHrs.src = uri + this.imgs.hrs[hrs];
        this.elMin.src = uri + this.imgs.min[min];
        this.elSec.src = uri + this.imgs.sec[sec];
        this.elGmt.src = uri + this.imgs.gmt[gmt];        
    }
}

Check out the jsFiddle link here

Answer 2

Typically, I would normally tackle this issue by utilizing a sprite sheet for efficiency purposes since you are dealing with 135 unique images. Using individual images would usually lead to multiple requests to a web server, resulting in performance issues. It is technically feasible to achieve the desired effect using CSS or SVG due to the simplicity of your images...

However, in an effort to stay true to the question and considering the absence of specific size requirements for your clock, I have opted to work with individual images. Despite this choice, I have taken steps to optimize the images provided in your zip file for the example that follows.

The images enclosed in your zip file are sized at 400x298 pixels with a total file size of 4MB (this might not be ideal for web usage). If resizing is not an option (i.e., if you need a large clock), I recommend compressing the images. For demonstration purposes and to conserve bandwidth, I have resized the images to 50x37 and compressed them using pngquant (I highly recommend exploring this tool).

In addition, I have encoded the images in base64 format and stored them in a JavaScript object structured as follows:

Clock.prototype.imgs = {
    hrs:[...], // array(13)
    min:[...], // array(60)
    sec:[...], // array(60)
    gmt:[...]  // array(2)
}

This approach enables loading all images with a single request on the page and facilitates browser interpretation through a data URI.

^{Overall, achieving a considerable reduction in file size to ~150KB :)}

Moving on to the script implementation: (I have aimed to keep it straightforward)

To begin, assign an element in the HTML for reference, e.g.:

<div id="myClock"></div>

Then, within your script tags:

new Clock;
function Clock(){

    // setting up DOM elements
    var clock = document.getElementById('myClock');
    this.elHrs = document.createElement('img');
    this.elMin = document.createElement('img');
    this.elSec = document.createElement('img');
    this.elGmt = document.createElement('img'); 
    clock.appendChild(this.elHrs);
    clock.appendChild(this.elMin);
    clock.appendChild(this.elSec);
    clock.appendChild(this.elGmt);

    // configuring timer for updating every second
    this.tick = setInterval((function(scope){
        return function(){ scope.draw(); }
    })(this), 1000);

    this.draw = function(){
        var date = new Date,
            gmt  = Math.floor(date.getHours()/12),
            hrs  = date.getHours(),
            min  = date.getMinutes(),
            sec  = date.getSeconds(),
            uri  = 'data:image/png;base64,';
        if(hrs!=12) hrs %= 12;
        this.elHrs.src = uri + this.imgs.hrs[hrs];
        this.elMin.src = uri + this.imgs.min[min];
        this.elSec.src = uri + this.imgs.sec[sec];
        this.elGmt.src = uri + this.imgs.gmt[gmt];        
    }
}

Check out the jsFiddle link here

Answer 3

Answer №2

const updateClock = setInterval(() => {
  const currentTime = new Date();
  const hours = currentTime.getHours();
  const minutes = currentTime.getMinutes();
  const seconds = currentTime.getSeconds();
  const hourRotation = 30 * hours + minutes / 2;
  const minuteRotation = 6 * minutes;
  const secondRotation = 6 * seconds;

  hourHand.style.transform = `rotate(${hourRotation}deg)`;
  minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
  secondHand.style.transform = `rotate(${secondRotation}deg)`;
}, 1000);

Answer 4

const updateClock = setInterval(() => {
  const currentTime = new Date();
  const hours = currentTime.getHours();
  const minutes = currentTime.getMinutes();
  const seconds = currentTime.getSeconds();
  const hourRotation = 30 * hours + minutes / 2;
  const minuteRotation = 6 * minutes;
  const secondRotation = 6 * seconds;

  hourHand.style.transform = `rotate(${hourRotation}deg)`;
  minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
  secondHand.style.transform = `rotate(${secondRotation}deg)`;
}, 1000);

Create a customizable JavaScript clock that synchronizes with an image to display the current hour, minute

Answer №1

Answer №2

Similar questions

Restricting the length of dynamic dropdowns in a React application

Ways to load an alternate view upon redirection and initiate button submission

Why is it not possible to incorporate a variable in HTML when using Vue.js?

Replace particular letters within the text with designated spans

Web performance issues noticed with Angular 8 and Webpack 3.7 rendering speed

Step-by-step guide on how to showcase elements within v-for by clicking on them

What is the best way to show search results in real-time as a user

Performing AJAX request without relying on jQuery for a bookmarklet

Rearrange the position of one div to be placed next to another div and assign the float property

Toggling checkboxes based on user input

Generating a primary XML element encompassing multiple namespaces

Please explain this ES6 syntax to me: Using a colon after a function call

New to React: Arrow Function Example that Might Puzzle You

Prevent clicking on the <div> element for a duration of 200 milliseconds

Looking for assistance on how to automatically close the sidebar or pull navigation menu after clicking on a menu item

Node.js server application encountering errors such as path.join issues

Tips for sending form data from ReactJS to controller in ASP.NET MVC:

Implementing the <p></p> tag within a loop practice session

When a user clicks on a child element in ReactJS, the onclick event returns as undefined

Access the contents of MUI Modal (Dialog) even when it's closed