要用HTML画一个时钟，你可以使用以下步骤：
（图片来源网络，侵删）
1、创建一个HTML文件，例如clock.html。
2、在文件中添加以下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>时钟</title>
<style>
/* 设置时钟容器样式 */
.clock {
width: 200px;
height: 200px;
border: 5px solid black;
borderradius: 50%;
position: relative;
}
/* 设置指针样式 */
.hand {
width: 50%;
height: 2px;
backgroundcolor: black;
position: absolute;
top: 50%;
left: 50%;
transformorigin: 100%;
transform: rotate(0deg);
transition: transform 0.5s;
}
/* 设置秒针样式 */
.secondhand {
height: 1px;
backgroundcolor: red;
}
</style>
</head>
<body>
<div class="clock">
<!时针 >
<div class="hand hourhand"></div>
<!分针 >
<div class="hand minutehand"></div>
<!秒针 >
<div class="hand secondhand"></div>
</div>
<script>
// 获取时钟元素
const clock = document.querySelector('.clock');
const hourHand = document.querySelector('.hourhand');
const minuteHand = document.querySelector('.minutehand');
const secondHand = document.querySelector('.secondhand');
// 更新时钟指针位置的函数
function updateClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
// 计算时针、分针和秒针的角度
const secondDegree = (seconds / 60) * 360 + 90;
const minuteDegree = (minutes / 60) * 360 + (seconds / 60) * 6 + 90;
const hourDegree = (hours / 12) * 360 + (minutes / 60) * 30 + 90;
// 设置指针旋转角度
secondHand.style.transform = rotate(${secondDegree}deg);
minuteHand.style.transform = rotate(${minuteDegree}deg);
hourHand.style.transform = rotate(${hourDegree}deg);
}
// 每秒更新一次时钟指针位置
setInterval(updateClock, 1000);
</script>
</body>
</html>
3、保存文件并在浏览器中打开它，你应该能看到一个简单的时钟，时针、分针和秒针会根据当前时间实时更新。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/397743.html
微信扫一扫