資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML、CSS 和 JavaScript 建立一個模擬時鐘？
在本教程中，我們將藉助 **HTML** 和 **CSS** 設計一個模擬時鐘，並使用 **JavaScript** 使其工作，它將以小時、分鐘和秒的格式顯示當前時間。
方法
我們將使用 Date 物件，並透過一些計算來顯示 小時、分鐘 和 秒。
我們將從 JavaScript 物件 **Date()** 獲取系統時間，此物件具有 getHours()、getSecond() 和 getMinutes() 等函式。
獲取 小時、分鐘 和 秒 格式後，我們將應用於轉換所有三個指標（時針、分針和秒針）的旋轉。
模擬時鐘透過其三個指標持續移動來顯示時間，並且為了顯示時間，它從 1 到 12 進行了標記。
HTML
建立一個名為 index.html 的 HTML 檔案，並新增一些樣板程式碼，這些程式碼是基本的 HTML 語法，如下所示，在我們的 HTML 程式碼中新增一個 div，並將其命名為“sizeOfAnalog”，並在其中新增三個 div，使用相同的類名“sizeOfAnalog”，分別命名為 hour_clock、minute_clock、second_clock。
CSS
我們將新增內部 CSS 以及 HTML 程式碼中的內部 JavaScript。使用 <style></style> 標籤可以應用內部 CSS，使用 <script></script> 可以應用內部 JavaScript。
JavaScript
在 JavaScript 部分，我們執行主要的邏輯工作。我們將使用 JavaScript Date() 物件及其函式 getHours()、getSecond() 和 getMinutes() 獲取當前的小時、分鐘和秒。獲取小時、分鐘和秒格式後，我們將應用於轉換所有三個指標（時針、分針和秒針）的旋轉。
步驟
**步驟 1** - 我們使用 **“background: url(clock.png) no-repeat;”** 程式碼將時鐘的背景影像應用到螢幕上，這裡 no-repeat 用於防止影像重複。
**步驟 2** - 現在我們將使用 Date() 物件獲取當前時間，我們還可以分別從 Date 物件中獲取當前的小時、分鐘和秒。現在我們將從 HTML 程式碼中獲取小時、分鐘和秒，並將指標的旋轉轉換為 360 度。
**步驟 3** - 我們知道 360 度後將被視為一次旋轉。因此，我們想要從這 360 度中獲得總共 12 個小時，這可以透過 (360/12) 來完成，這將是每小時 30 度。
**步驟 4** - 分鐘也是一樣，我們需要總共 60 分鐘為 360 度，這可以透過 (360/60) = 6 度來完成，我們需要每分鐘 6 度。
**步驟 5** - 在 JavaScript 部分使用 **setInterval()**，我們可以每 1000 毫秒（毫秒）執行一次 set clock，因為 1 秒等於 1000 毫秒。
因此，我們使用 **new Date()** 建立日期物件
獲取介於 0 到 23 之間的值的小時 **getHours()**
獲取介於 0 到 59 之間的值的分鐘 **getMinutes()**
獲取介於 0 到 59 之間的值的秒數 **getSeconds()**
**步驟 6** - 獲取所有三個值後，我們將對每個指標應用旋轉，我們的模擬時鐘將開始顯示時間。
示例（完整程式）
以下是使用 HTML、CSS 和 JavaScript 建立模擬時鐘的完整程式碼。
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock Tutorials Point</title>
<style>
#sizeOfAnalog {
position: relative;
background: url(https://tutorialspoint.tw/assets/questions/tmp/clock.png) no-repeat;
background-size: 100%;
margin-top: 2%;
margin: auto;
height: 90vh;
width: 90vh;
}
#hour_clock {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
height: 25%;
top: 25%;
left: 48.85%;
opacity: 0.8;
width: 2%;
}
#minute_clock {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
left: 48.9%;
opacity: 0.8;
width: 1.6%;
height: 32%;
top: 18%;
}
#second_clock {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
width: 1%;
height: 36%;
top: 14%;
left: 50%;
opacity: 0.8;
}
</style>
</head>
<body>
<div id="sizeOfAnalog">
<div id="hour_clock"></div>
<div id="minute_clock"></div>
<div id="second_clock"></div>
</div>
<script>
var hour = document.getElementById("hour_clock");
var minute = document.getElementById("minute_clock");
var seconds = document.getElementById("second_clock");
var addClock = setInterval(function clock() {
var date_now = new Date();
var hr = date_now.getHours();
var min = date_now.getMinutes();
var sec = date_now.getSeconds();
var calc_hr = hr * 30 + min / 2;
var calc_min = min * 6;
var calc_sec = sec * 6;
hour.style.transform = "rotate(" + calc_hr + "deg)";
minute.style.transform = "rotate(" + calc_min + "deg)";
seconds.style.transform = "rotate(" + calc_sec + "deg)";
}, 1000);
</script>
</body>
</html>
3K+ 瀏覽量
