对于以时间为主要关注点的网站来说，实时时钟是一个非常有用的元素。时钟可以根据需要显示世界时间或本地时间。时钟基本上有两种类型：模拟时钟和数字时钟。本教程将介绍如何使用 JavaScript 和 CSS 制作模拟时钟。
在这个实时模拟时钟示例中，将使用三根指针来显示小时、分钟和秒钟，您可以使用自定义的时钟表盘和指针图像，以便与网页用户界面相匹配，有多种 jQuery 插件可用于创建模拟时钟，如果你想使用自定义图片创建自己的模拟时钟，本指南将帮助你使用纯
HTML：
使用 HTML 创建时钟的基本结构。
定义 HTML 元素来连接时钟的表盘面和指针（小时、分钟和秒钟）。
<div class="clock"> <div class="h-hand" id="hour"> </div> <div class="m-hand" id="min"> </div> <div class="s-hand" id="sec"> </div> </div>
JavaScript
JavaScript 可帮助建立时钟指针旋转的逻辑。
clockInit() 函数包含处理时钟指针移动的 JavaScript 代码。
JavaScript Date() 对象用于根据浏览器时区获取当前日期和时间。
使用 getHours()、getMinutes() 和 getSeconds() 方法分别获取小时、分钟和秒。
选择 HTML 元素，在时钟表盘中显示时针、分针和秒针。
我们知道时钟可以旋转 360 度，因此请使用 JavaScript 计算指针旋转的度数。
为具有旋转度的 HTML 元素设置 CSS 样式转换属性。
/*这里仅展示部分示例代码，下载后查看完整版代码*/
function clockInit(){
var date = new Date();
var time = [date.getHours(), date.getMinutes(), date.getSeconds()];
var clockDivs = [document.getElementById("hour"), document.getElementById("min"), document.getElementById("sec")];
var hour = time[1]/2+time[0]*30;
...
}现在，在页面加载时调用 clockInit() 函数。
使用 JavaScript setInterval() 方法，以 1 秒钟的间隔调用 clockInit 函数。
window.onload = function() { // Load clockInit function
clockInit();
// Call clockInit function at 1 second interval
setInterval(clockInit, 1000);
};CSS：
CSS 用于设计时钟表盘和指针。
表盘和指针使用自定义图片，使时钟看起来更美观。
.clock {
position: relative;
background-image: url('images/e-clock.png');
width: 500px;
height: 500px;
background-size: contain;
}
...
/*这里仅展示部分示例代码，下载后查看完整版代码*/结束语
我们希望这个简单的模拟时钟脚本能帮助你用 JavaScript 创建一个模拟时钟，你可以为时钟表盘和时针/分针/秒针自定义图片，从而定制模拟时钟。以上仅为示例代码，完整版代码请下载后查看。
