Malfunctioning JavaScript timepiece

I am currently experimenting with using Raphael to create a unique clock feature on my website. My goal is to animate the seconds hand to mimic the movement of a traditional clock.

Below is the code snippet I have implemented:

window.onload = function() {

  var paper = new Raphael(0, 0, 400, 400);

  var backGround = paper.rect(0, 0, 400, 400);

  backGround.attr({
    fill: "orange"
  });

  var face = paper.circle(100, 100, 95);
  face.attr({
    "fill": "#f5f5f5",
    "stroke": "#ff0000",
    "stroke-width": "3"
  })

  var hand = paper.path("M100 110L100 25");
  hand.attr({
    stroke: "#ffff00",
    "stroke-width": 1
  });

  function startTime() {
    var hands = now.getSeconds();
    hands = checkTime(hands);
    hand.animate({
      transform: ['r', ((hands * 6) - 180), 200, 200]
    });

    setTimeout(function() {
      startTime()
    }, 1000);

    function checkTime(i) {
      if (i < 10) {
        i = "0" + i
      };
      return i;

    }
    star


<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>

javascripthtmlcssraphael

Answer №1

  • In order to effectively initiate the time function, it should be implemented outside of the main function.
  • Don't forget to include a new Date statement for accuracy.
  • The position of the hands has been adjusted to 100x100 for better visibility.
  • Removed an unnecessary second formatter for optimization.
  • The color of the hand has been changed to black to enhance visibility.

window.onload = function() {

  var paper = new Raphael(0, 0, 400, 400);

  var backGround = paper.rect(0, 0, 400, 400);

  backGround.attr({
    fill: "orange"
  });

  var face = paper.circle(100, 100, 95);
  face.attr({
    "fill": "#f5f5f5",
    "stroke": "#ff0000",
    "stroke-width": "3"
  })

  var hand = paper.path("M100 110L100 25");
  hand.attr({
    stroke: "#000000",
    "stroke-width": 1
  });

  function startTime() {
    var now = new Date(),
        hands = now.getSeconds();
    hand.animate({
      transform: ['r', ((hands * 6) - 180), 100, 100]
    });

    setTimeout(function() {
      startTime()
    }, 1000);
  }
  startTime();

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>

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

To modify the background of a text, simply click on the image

I recently discovered a helpful hack in an answer on this website, which allows an image to be resized when clicked using the checkbox method. I have successfully implemented this feature but encountered an issue when trying to apply a CSS style change to ...

htmlcssonclick

How to initiate a refresh in a React.js component?

I created a basic todo app using React, TypeScript, and Node. Below is the main component: import * as React from "react" import {forwardRef, useCallback, useEffect} from "react" import {ITodo} from "../types/type.todo" import ...

javascriptnode.jsreactjstypescript

Looking to style a <p> element with CSS?

In the div class index, there are two additional divs without any class or id names, along with two <p> tags. My goal is to style these two <p> tags. <div class="doubt"> <div> <p>Hello world</p> <div> ...

htmlcssstyles

Modifying the color of a placeholder in an HTML input using CSS

Version 4 of Chrome now supports the placeholder attribute on input[type=text] elements (and likely other browsers do too). Despite this, the following CSS code does not affect the color of the placeholder text: input[placeholder], [placeholder], *[pla ...

csshtmlplaceholderhtml-input

Unable to Trigger Jquery Scroll Event

I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. T ...

jqueryhtmlcssscroll

Is it possible for SqlCommand.ExecuteReader to automatically open the database connection?

Unusual behavior is happening on my website. I have a WCF Data service that provides JSON data to populate a jqGrid using javascript/ajax calls. In addition, there is server-side code that also accesses the same WCF service to retrieve data. Within my WC ...

c#javascriptwcfjsonsqldatareader

IItemTransform and minified files that are already in use

Summary: IItemTransform is not triggered when a minified file already exists in the same directory as the original (non-minified) file. Issue Description The problem arises due to CSS relative image references, impacting both JavaScript and CSS files when ...

asp.netcsstransformationbundling-and-minificationsystem.web.optimization

Creating an If statement tailored for a particular image source: a step-by-step guide

In the program I am running in Dreamweaver, there is a specific line of code that looks like this: function go() { if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src )) ...... ...... ..... ...

javascriptcssswitch-statement

Stop Sublime Text from automatically calculating Less2Css

Within my workflow using Sublime Text and Less2Css for dealing with less files, I encountered an issue where specifying the max-height of a container as 100% - 20px resulted in minification reducing it to '80%'. Is there a way to work around this ...

csslesssublimetext

Switch the array's value if the key is a match?

I'm currently facing an issue where my code does not push the object when the key matches. How can I update the value of the key instead when there is a match? this.state.data.concat(items).filter(function (a) { return !this[a.key] && (th ...

javascriptreactjs

Unable to Locate Gulp Packages

Whenever I try to run the command gulp in my terminal, my gulp modules are not being found. Surprisingly, all other commands like node -v, gulp -v, and npm -v are working perfectly fine with the latest versions installed. I have tried running these command ...

javascriptnode.js

Refresh database post drag and drop operation

I am seeking a way to update a "state" SQL row after dragging an element between the "DZ", "WT", and "ZK" divs. Below is a snippet of my code: SQL queries: $sql = "select * from tasks where login = '$user_check' AND state = 1"; $sqlDodane = mys ...

javascriptphpsqlajax

Difficulty achieving gradient effect with partial background color change in table-cell

In order to achieve a unique look for this particular design, I am seeking ways to alter the red background color of each cell in varying degrees - such as 100% for the first cell, 100% for the second cell, and 50% for the third cell. Update: After experi ...

htmlcssbackground-colorlinear-gradients

Struggling with how to customize the input component from react-native-elements? Let

I am currently exploring how to customize the appearance of an input using react-native-elements, similar to the design depicted in the documentation... My goal is to achieve the look of the top inputs with a white background, but I am uncertain about th ...

cssreactjsreact-nativestylingreact-native-elements

Steps to properly create your own angular service with XHR

Exploring the world of AngularJS, I embarked on a mission to create a file upload feature along with other form data. While there are numerous scripts and plugins available, I decided to utilize my own custom service using $xhr. Despite successfully sendin ...

javascriptangularjs

As we iterate through each individual array within the multi-dimensional array

I'm currently working on an application using node.js, Express, and JS/Jquery. One issue I've encountered is with appending elements to a webpage based on the number of arrays contained in a MD array. Essentially, I only want to append unique e ...

javascriptjqueryarraysexpress

"Blank Canvas: Exploring the Void in Laravel Blade Templates

This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...

phphtmllaravellaravel-4laravel-blade

styling the search input element in webkit with right-to-left text direction

I have included a search input in my code like this: <input type="search" placeholder="search" /> Webkit has different styles for an input field with the type 'search'. One of these styles is displaying a cancel ('x') button on ...

htmlcsswebkitright-to-left

Update settings when starting with chromedriver

I am currently using webdriver (), standalone selenium, and mocha for writing my test cases. These test cases are specifically designed for Chrome, so I rely on chromedriver for execution. However, when launching the browser, I need to ensure that the "to ...

javascriptnode.jsselenium-webdriverselenium-chromedriver

Avoid re-rendering the page in Nuxt when adjusting dynamic parameters

My page has two dynamic parameters that trigger the fetch method to run again when the URL params are changed. I want to avoid this behavior. Fetch Method: async fetch() { await this.getFlightResult(); } Get Result Method: async getResult() { th ...

javascriptvue.jsnuxt.jsurl-parameters