使用HTML，CSS和JavaScript创建模拟时钟

在本文中，我们将使用HTML，CSS和JavaScript构建一个实时的模拟时钟。

先决条件：

对HTML，CSS和JavaScript有基本的了解。

方法： 我们将创建三个文件（一个HTML文件，一个CSS文件和一个JavaScript文件），我们还有一个将用作背景的时钟图像，并在此基础上创建时、分和秒针（使用HTML和CSS）。这些指针将根据系统时间进行旋转（我们将使用JavaScript的预定义Date函数来计算每个指针旋转的角度）。

HTML： 这是一个简单的文件，具有网页的基本结构以及时钟本身和秒针、分针、时针的ID。
CSS： 用于美化时钟的样式设置。我们将时钟居中放置在网页的中间。
JavaScript： 提供指针旋转的逻辑。

示例：

首先，我们从HTML中选择了时、分和秒。
为了获取当前时间，我们使用了JavaScript提供的Date（）对象。它将分别给出当前的秒、分和时。
现在，我们已经得到了小时、分钟和秒钟，并且我们知道时钟旋转360度。所以，我们将将时钟指针的旋转转换成角度。角度计算是基于简单的一元方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
</head>
<body>
    <div id="clockContainer">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
</body>
</html>

CSS代码

#clockContainer {
    position: relative;
    margin: auto;
    height: 40vw;
    /*to make the height and width responsive*/
    width: 40vw;
    background: url(clock.png) no-repeat;
    /*setting our background image*/
    background-size: 100%;
}
 
#hour,
#minute,
#second {
    position: absolute;
    background: black;
    border-radius: 10px;
    transform-origin: bottom;
}
 
#hour {
    width: 1.8%;
    height: 25%;
    top: 25%;
    left: 48.85%;
    opacity: 0.8;
}
 
#minute {
    width: 1.6%;
    height: 30%;
    top: 19%;
    left: 48.9%;
    opacity: 0.8;
}
 
#second {
    width: 1%;
    height: 40%;
    top: 9%;
    left: 49.25%;
    opacity: 0.8;
}

JavaScript代码

setInterval(() => {
    d = new Date(); //object of date()
    hr = d.getHours();
    min = d.getMinutes();
    sec = d.getSeconds();
    hr_rotation = 30 * hr + min / 2; //converting current time
    min_rotation = 6 * min;
    sec_rotation = 6 * sec;
 
    hour.style.transform = `rotate( ${hr_rotation}deg)`;     minute.style.transform = `rotate($ {min_rotation}deg)`;
    second.style.transform = `rotate(${sec_rotation}deg)`;
}, 1000);

输出：

使用HTML，CSS和JavaScript创建模拟时钟