HTML5 是目前在 Web 開發中被廣泛使用的技術，其中一個非常有用且酷炫的功能就是制作時鐘。時鐘可以用于各種場合，如網站中的倒計時、展示實時時間等。下面我為大家介紹一些 HTML5 時鐘代碼。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 時鐘</title>
<style>
#clock {
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%;
position: relative;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
}
#hour, #minute, #second {
width: 1px;
height: 50%;
background-color: black;
position: absolute;
left: 50%;
transform-origin: bottom center;
}
#hour {
transform: rotate(30deg);
}
#minute {
transform: rotate(6deg);
}
#second {
height: 80%;
background-color: red;
transform: rotate(72deg);
}
#pin {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
position: absolute;
left: 50%;
top: 50%;
margin-top: -5px;
margin-left: -5px;
}
</style>
</head>
<body>
<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
<div id="pin"></div>
</div>
<script>
function tick() {
var now = new Date();
var hour = now.getHours() % 12;
var minute = now.getMinutes();
var second = now.getSeconds();
var hourDeg = hour * 30 + (minute / 2);
var minuteDeg = minute * 6;
var secondDeg = second * 6;
document.getElementById("hour").style.transform = "rotate(" + hourDeg + "deg)";
document.getElementById("minute").style.transform = "rotate(" + minuteDeg + "deg)";
document.getElementById("second").style.transform = "rotate(" + secondDeg + "deg)";
}
setInterval(tick, 1000);
</script>
</body>
</html>以上是一個簡單的時鐘的 HTML 代碼。在 CSS 中，我們定義了一個圓形的時鐘樣式，包括時針、分針和秒針的樣式以及插針的樣式。JavaScript 的部分實現了一個實時更新時針、分針和秒針的函數，并且通過 setInterval 函數讓時鐘每秒更新一次。這個簡單的時鐘代碼可以輕松應用到你的網站上。
上一篇dockerenvoy
下一篇程序gui怎么加css