Implementing a simple web clock with JavaScript

Use JavaScript to implement a web page clock. The effect is shown in the figure below:

First, complete the loading of the resources of the dial and pointer in the body:

<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="hour" >
<hr id="min">
<hr id="second">

Set CSS style:

<style>
        body{
            margin: 0;
        }
        div{
            margin: 0 auto;
            width: 600px;
            height: 600px;
        }
        #hour{
            background-color: black;
            width: 130px;
            height: 10px;
            position: fixed;
            top: 295px;
            left: 50%;
            margin-left: -65px;
        }
        #min{
            background-color: red;
            width: 200px;
            height: 8px;
            position: fixed;
            top: 296px;
            left: 50%;
            margin-left: -100px;
        }
        #second{
            background-color: yellow;
            width: 270px;
            height: 5px;
            position: fixed;
            top: 297.5px;
            left: 50%;
            margin-left: -135px;
        }
</style>

Finally, the JS code part uses the loop timer setInterval() to call the main function once a second. In the main function, new Date() is used to create a time object. .getHours(); .getMinutes(); .getSeconds() are used to obtain the current hours, minutes, and seconds. Then, the CSS built-in animation-rotation is used to change the angle of the pointer:

setInterval(watch,1000);
var anjleSeconds=0,anjleMin=0,anjleHours=0;
function watch() {
        var Time = new Date();
        anjleSeconds=Time.getSeconds()/60*360+90;
        anjleMin=Time.getMinutes()/60*360+90;
        anjleHours=nowHours/12*360+90;
        document.getElementById("second").style.transform="rotate("+anjleSeconds+"deg)";
        document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
        document.getElementById("hour").style.transform="rotate("+anjleHours+"deg)";
    }

The current problem is that the hour, minute, and second hands are the same length at both ends because they are represented by the hr tag.

The complete code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        div{
            margin: 0 auto;
            width: 600px;
            height: 600px;
        }
        #hour{
            background-color: black;
            width: 130px;
            height: 10px;
            position: fixed;
            top: 295px;
            left: 50%;
            margin-left: -65px;
        }
        #min{
            background-color: red;
            width: 200px;
            height: 8px;
            position: fixed;
            top: 296px;
            left: 50%;
            margin-left: -100px;
        }
        #second{
            background-color: yellow;
            width: 270px;
            height: 5px;
            position: fixed;
            top: 297.5px;
            left: 50%;
            margin-left: -135px;
        }
    </style>
</head>
<body>
<div><img src="../../image/clockface.jpg" alt=""></div>
<hr id="hour" >
<hr id="min">
<hr id="second">
<script>
    setInterval(watch,1000);
    var anjleSeconds=0,anjleMin=0,anjleHours=0;
    function watch() {
        var Time = new Date();
        anjleSeconds=Time.getSeconds()/60*360+90;
        anjleMin=Time.getMinutes()/60*360+90;
        anjleHours=Time.getHours()/12*360+90;
        document.getElementById("second").style.transform="rotate("+anjleSeconds+"deg)";
        document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";
        document.getElementById("hour").style.transform="rotate("+anjleHours+"deg)";
    }
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS realizes web clock special effects
js+html5 implements canvas drawing web clock method
Web page countdown digital clock effect implemented by JS
Implementing a simple web clock using JavaScript

<<: Automatically build and deploy using Docker+Jenkins

>>: The best explanation of HTTPS

Implementation of MySQL Shell import_table data import

Implementing a simple web clock with JavaScript

Implementation of MySQL Shell import_table data import

Vue implements a visual drag page editor

MySQL 5.7.18 installation tutorial and problem summary

What are the similarities between the development of web design and western architecture?

How MySQL handles implicit default values

Vue implements automatic jump to login page when token expires

A brief analysis of Docker private image library and Alibaba Cloud object storage OSS

Steps for Vue to use Ref to get components across levels

Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)

Detailed explanation of explain type in MySQL

Recommend

base target="" controls the link's target open frame

How to set up ssh password-free login to Linux server

Example code for css flex layout with automatic line wrapping

Solution to occasional crash of positioning background service on Linux

How to implement Linux disk mounting, partitioning, and capacity expansion operations

Complete example of Vue encapsulating the global toast component

How complicated is the priority of CSS styles?

Summary of MySQL password modification methods

Understanding flex-grow, flex-shrink, flex-basis and nine-grid layout

How to fix the WeChat applet input jitter problem

Analysis of common usage examples of MySQL process functions

Thoughts on truncation of multi-line text with a "show more" button

CSS solves the misalignment problem of inline-block

HTML+CSS to achieve surround reflection loading effect

Modify the boot time of grub in ubuntu