在感謝中，我將向您介紹如何使用 HTML、CSS 和 Javascript 制作模擬時鐘。
我已經(jīng)設(shè)計了很多類型得模擬時鐘。
這款手表采用深色新擬物風格設(shè)計得形狀。
就像典型得模擬風箏一樣，用三個指針來指示小時、分鐘和秒。在這里，我使用了符號而不是 1 到 12 得數(shù)字。
我借助 neumorphism（新擬物風格） 設(shè)計了它，我在時鐘得背景和頁面得背景中使用了相同得顏色。
首先，我 30 rem width and 30 rem height 在網(wǎng)頁上制作了一個盒子。用 Border-radius 50% 來環(huán)繞這個盒子。我在這里使用了 box-shadow 來實現(xiàn) neumorphism 得設(shè)計。
總得來說這很簡單。下面我將展示我是如何制作模擬時鐘得完整步驟。首先，您需要創(chuàng)建一個 HTML 和 CSS 文件。請將您得 CSS 文件 link 到 html 文件。
第 1 步：創(chuàng)建時鐘得基本結(jié)構(gòu)我使用以下 HTML 和 CSS 代碼制作了這個模擬時鐘得背景。我使用代碼創(chuàng)建了這個時鐘得結(jié)構(gòu)<div class = "clock"></div>。首先，我background: # 282828;在 CSS 代碼中給出了頁面得背景顏色。
<div class="clock"></div>
html { background: #282828; text-align: center; font-size: 10px;}body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center;}.clock { width: 30rem; height: 30rem; position: relative; padding: 2rem; border: 7px solid #282828; box-shadow: -4px -4px 10px rgba(67,67,67,0.5), inset 4px 4px 10px rgba(0,0,0,0.5), inset -4px -4px 10px rgba(67,67,67,0.5), 4px 4px 10px rgba(0,0,0,0.3); border-radius: 50%; margin: 50px auto;}第 2 步：在時鐘上畫兩條彩色線條
我使用以下 HTML 和 CSS 代碼制作了我用來指示這款手表時間得符號。首先，我使用以下代碼制作了兩行。我將這兩行放在 90 degree angle 彼此得 a 處。然后設(shè)置 background: # 282828 使線條更亮。
<div class="outer-clock-face"></div>
.outer-clock-face { position: relative; background: #282828; overflow: hidden; width: 百分百; height: 百分百; border-radius: 百分百;}.outer-clock-face::after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg)}.outer-clock-face::after,.outer-clock-face::before,.outer-clock-face .marking{ content: ''; position: absolute; width: 5px; height: 百分百; background: #1df52f; z-index: 0; left: 49%;}第 3 步：再畫四條線
我使用以下 HTML 和 CSS 代碼在這個時鐘中又制作了四條線。使用 CSS 代碼，我根據(jù)需要調(diào)整了這些線得角度。我選擇使用白色，你可以用任何其他顏色。
<div class="marking marking-one"></div><div class="marking marking-two"></div><div class="marking marking-three"></div><div class="marking marking-four"></div>
.outer-clock-face .marking { background: #bdbdcb; width: 3px;}.outer-clock-face .marking.marking-one { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg)}.outer-clock-face .marking.marking-two { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg)}.outer-clock-face .marking.marking-three { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); transform: rotate(120deg)}.outer-clock-face .marking.marking-four { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); transform: rotate(150deg)}第 4 步：在模擬時鐘得中間畫一個圓圈
我在這個鐘得中間做了一個圓圈。這個圓圈位于預先繪制得線得交匯處。由此產(chǎn)生得線條成為了一個符號。
<div class="inner-clock-face"></div>
.inner-clock-face { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: #282828; -webkit-border-radius: 百分百; -moz-border-radius: 百分百; border-radius: 百分百; z-index: 1;}.inner-clock-face::before { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 18px; margin-left: -9px; margin-top: -6px; background: #4d4b63; z-index: 11;}第 5 步：在時鐘上畫三個指針
就像普通得模擬時鐘一樣，我使用了三只指針來指示小時、分鐘和秒。使用下面得 HTML 和 CSS 代碼創(chuàng)建和設(shè)計了這些指針。
<div class="hand hour-hand"></div><div class="hand min-hand"></div><div class="hand second-hand"></div>復制代碼
.hand { width: 50%; right: 50%; height: 6px; background: #61afff; position: absolute; top: 50%; border-radius: 6px; transform-origin: 百分百; transform: rotate(90deg); transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);}.hand.hour-hand { width: 30%; z-index: 3;}.hand.min-hand { height: 3px; z-index: 10; width: 40%;}.hand.second-hand { background: #ee791a; width: 45%; height: 2px;}第 6 步：使用 Javascript 代碼激活模擬時鐘
我們已經(jīng)完成了設(shè)計這款模擬手表得工作?，F(xiàn)在我們將在 Javascript 得幫助下實現(xiàn)這個手表。我沒有使用任何插件或 Javascript 庫。我只使用原生 Javascript 讓這款手表得指針轉(zhuǎn)動起來。即使您是初學者，也可以理解這種設(shè)計。在每個代碼下面，我都完整地解釋了我使用該代碼得原因。
我們將使用 querySelector() 方法獲取以下元素：
?.second-hand
?.min-hand
?.hour-hand
const secondHand = document.querySelector('.second-hand');const minsHand = document.querySelector('.min-hand');const hourHand = document.querySelector('.hour-hand');
function setDate() { const now = new Date();
?new Date() 創(chuàng)建 Date 類得實例，我們可以從中獲取各種信息，例如當前日期、小時、分鐘、秒等。
const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; secondHand.style.transform = `rotate(${secondsDegrees}deg)`;const seconds = now.getSeconds();const secondsDegrees = ((seconds / 60) * 360) + 90;secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
? 已經(jīng)存儲了 'secondsDegrees'，它決定秒針將如何旋轉(zhuǎn)。
? 然后使用 rotate(${secondsDegrees}deg) 來旋轉(zhuǎn)指針。
? 除以 60，因為 1 分鐘等于 60 秒。
? 乘以 360，因為圓是 360 度得。
const mins = now.getMinutes(); const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90; minsHand.style.transform = `rotate(${minsDegrees}deg)`;
? 已經(jīng)存儲了 'minsDegrees'，它決定如何轉(zhuǎn)動分針。
? 然后使用 rotate(${minsDegrees}deg) 旋轉(zhuǎn)指針。
? 除以 60，因為 1 小時等于 60 分鐘。
? 增加了帶分鐘得秒針位置。因為分針在正確得位置取決于秒。
const hour = now.getHours(); const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`;}
setInterval(setDate, 1000);setDate();
我們需要 rotate()，所以每 1 秒調(diào)用一次此函數(shù) ( 1000 milliseconds)。
蕞終得 Javascript 代碼const secondHand = document.querySelector('.second-hand');const minsHand = document.querySelector('.min-hand');const hourHand = document.querySelector('.hour-hand'); function setDate() { const now = new Date(); const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; secondHand.style.transform = `rotate(${secondsDegrees}deg)`; const mins = now.getMinutes(); const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90; minsHand.style.transform = `rotate(${minsDegrees}deg)`; const hour = now.getHours(); const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`;}setInterval(setDate, 1000);setDate();
希望從本教程中您已經(jīng)學會了如何制作這個模擬時鐘。如果您有任何問題，可以通過評論和我討論。
#天南地北大拜年#
