Digital clocks created with Javascript for educational purposes, each displaying a unique image array for K-12 students

I am on the lookout for a script that can run a digital clock in a web browser using unique images for each digit.

I plan to create a 'Maarten Baas' inspired clock with the children in my technology and design class. The kids will take on the role of the man in the clock, film it, and turn it into a giphy.

I came across a helpful script here: Digital clock with images

The issue is that it uses the same set of images for every digit on the clock. I would prefer to use 4 distinct arrays of images for each digit 00:00 (hh:mm).

As I am a teacher with limited coding knowledge (familiar with teaching kids how to use Scratch, but not much beyond that), I would greatly appreciate assistance from a professional.

It would be wonderful if we could showcase the clocks created by the kids.

Nice to have feature: The numbers should be animated gifs that replay each time they are called. I made an attempt at this already, where each gif plays once. However, upon reloading, the gif does not replay because the browser assumes it has already been played.

You can test it out at:

javascriptimageclock

Answer №1

We require an updated version that solely modifies the altered portion

I incorporate milliseconds into the gif to ensure it plays anew each time

//an array containing all image URLs. Feel free to customize URLs
const img = {
  "1": "https://klok.martijndewinter.nl/1.gif",
  "2": "https://klok.martijndewinter.nl/2.gif",
  "3": "https://klok.martijndewinter.nl/3.gif",
  "4": "https://klok.martijndewinter.nl/4.gif",
  "5": "https://klok.martijndewinter.nl/5.gif",
  "6": "https://klok.martijndewinter.nl/6.gif",
  "7": "https://klok.martijndewinter.nl/7.gif",
  "8": "https://klok.martijndewinter.nl/8.gif",
  "9": "https://klok.martijndewinter.nl/9.gif",
  "0": "https://klok.martijndewinter.nl/0.gif"
};

const pad = num => String(num).padStart(2, "0"); // a function to pad the digits 

let oldTime = "000000"; // for comparison

window.addEventListener("load", () => {
  setInterval(() => {
    const today = new Date();
    const h = pad(today.getHours());
    const m = pad(today.getMinutes());
    const s = pad(today.getSeconds());
    const string = `${h}${m}${s}`;
    res.textContent =string
    string.split("").forEach((digit, i) => {
      if (oldTime[i] != digit) document.getElementById("t" + i).src = img[digit] + "?rnd=" + new Date().getTime()
    })
    oldTime = string;
  }, 1000)
})
<span id="res"></span>

<div id="txt"><img id="t0" /><img id="t1" /><img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.colonsemicolon.com%2Fwp-content%2Fuploads%2F2012%2F02%2Fcolon.gif&f=1" /><img id="t2" /><img id="t3" /><img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.colonsemicolon.com%2Fwp-content%2Fuploads%2F2012%2F02%2Fcolon.gif&f=1"
  /><img id="t4" /><img id="t5" /></div>

Answer №2

After realizing that the previous topic was not relevant, I decided to take matters into my own hands and delve into learning JavaScript coding. I have successfully created a clock from scratch, but encountered a few issues along the way which I have detailed here: Creating a Clock using Videos - How can it be made to start faster and display the current time throughout the day? (JavaScript)

If you are willing to offer assistance or suggestions to tackle these challenges, I would greatly appreciate your input.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to directly stream a Google Cloud Storage file into an fs.Readstream without the need to save it

Is there a way for me to send a video file directly from Google Cloud Storage to an API that only accepts fs filestreams without having to download and save the file locally first? I'm currently using the code below to send video files, but it require ...

javascriptnode.jsaxiosgoogle-cloud-storage

Unable to attach eventName and callback to addEventListener due to the error message stating 'No overload matches this call'

I am attempting to attach an event listener to the input element stored within a class method. This method takes a props object containing eventName and callback. public setTextFieldInputListener({ eventName, callback }: TextFieldListenerProps): void { ...

javascripttypescriptevent-listener

Obtaining information from the HttpServletResponse through an AJAX form

In my "first.jsp", there is a form containing hidden input values and pointing to another jsp file. <form id="popupForm" name="popupForm" action="<%= cqRequest.externalizeHref(handle) %>" method="post"> <input type= ...

javajavascriptjqueryajaxjsp

Managing and updating arrays in VueJS2: Conditionally push new items and update only if their properties have changed

I am currently facing an issue with my form where each time a user updates a value in an input field, a new array element is created and added to the form results. I'm looking for a way to update the properties of the existing array element without cr ...

javascriptvue.jsvuejs2

How can you use JavaScript and regex to extract the word before a comma?

Hey there, I'm attempting to extract the word right before a comma in a sentence. For instance, consider the following string: "Cloudy, and 51 ° F " I aim to retrieve CLOUDY as the output. Could someone guide me on how to achieve this using regex ...

javascriptregexstringinputwords

NextJS is throwing an error stating that the element type is invalid. It was expecting either a string for built-in components or a class/function for composite components, but instead received an object

I encountered the following issue: Error - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but received an object. Here's the code from my \components\LayoutWrapper.js: i ...

javascriptreactjsnext.js

get a duplicate of an object

Is this the proper method for creating a duplicate of an object? class ObjectWrapper { private _obj; /*** * Copy object passed as argument to this._obj */ constructor (_obj: Object) { this._obj = _obj; } /** Return copy of this._ ...

javascripttypescriptobject

Creating a responsive design in HTML and CSS to organize images into two columns that stack

<html> <head> <style> .container { position: relative; width: 50%; } .image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .middle { transition: .5s ea ...

htmlcssimageresponsive-designbootstrap-4

Eliminating fillers dashes from a text

Imagine having a string filled with soft hyphens like the one below: T-h-i-s- -i-s- -a- -t-e-s-t-.- The goal is to eliminate these soft hyphens and get back the clean string: This is a test. Attempting this task in JavaScript, here's how far I&apo ...

javascriptjqueryregexsoft-hyphen

Utilizing Vue.js to compare two arrays and verify if the results are identical

I am in the process of developing a theater app that requires me to work with JSON data consisting of two arrays: Sections and Groups. While I have successfully loaded both arrays into my Vue app, I now need to compare them to find matches. The first array ...

javascriptjsonvue.js

Clicking on the expand button will render the content inside the <p:panel>

My current frontend using JSF loads an excessive amount of data, not always necessary for the user. This data is categorized by tags and I want it to be rendered dynamically with a click on an expand panel: <p:panel header="#{myBean.someStringT ...

javascriptjqueryjsfprimefacesfrontend

Identifying and handling the removal of a complete div element by the user

Is it possible to remove the entire div element if a user tries to inspect the web browser using the script provided below? <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/, ...

javascripthtml

Tips on retrieving the ul list value dynamically using jQuery when it changes

I have a list of countries with their dial codes and country codes. I need to find out which country is currently selected and retrieve its data-country-code using jQuery. Can anyone provide guidance on how to accomplish this? <ul class="country-list ...

javascriptjquery

Having trouble retrieving all JSON properties

I am facing an issue with my json structure where I am unable to access certain properties. I can only access the main properties like type, properties, and so on within that hierarchy level. However, I cannot seem to access icon, iconURL, or title. The da ...

javascriptjson

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

How to monitor and respond to HTML modifications in a child component from a parent component in Angular framework

In the setup I have, there is a main component known as @Component({ selector: 'parent-comp' template: '<child-comp [inputData]="responseData"></child-comp> }) export class ChildComponent { public responseData: any; ...

javascriptangularangular2-templateangular2-forms

Utilize JQuery's .append() method to insert a new element into the DOM and then trigger an "on click" event within

I am attempting to use the .append() method to add a new radio button, and then when I click on the new radio buttons, trigger a new function. However, I am having trouble achieving this with my current code: HTML: <label>Where should the photo be ...

javascriptjqueryhtmlappend

Determine whether the response from a jQuery AJAX call is in JSON format or binary. If it is found to be binary, proceed

I am currently using ajax to retrieve and download an xlsx file from a PHP script. The script has two possible types of responses: JSON format if there are any warnings preventing the download (such as incorrect parameters), or the xlsx binary stream if ev ...

javascriptjqueryajax

What is the best way to blend a portion of an image into a div?

Having a bit of trouble with overlapping my image onto another div in my current project. When you take a look at what I've been working on, you'll see there's an image that says "That's me!" and it needs to overlap the left side div. I ...

htmlcssimageoverlap

Only send the parameter for variables that are not empty in the AJAX data

How can I pass the variables that are not empty in the data object for an AJAX request? In this scenario, the area variable is empty so I need to pass parameters for city and listing type instead. Can someone please help me figure out how to do this? va ...

javascriptjqueryajax