制作HTML时钟和手工时钟需要一些基本的HTML、CSS和JavaScript知识，下面是详细的步骤：
一、HTML时钟的制作
HTML时钟的制作相对简单，只需要使用HTML和CSS即可，我们需要创建一个div元素来表示时钟的主体，然后使用JavaScript来获取当前的时间，并将其显示在div元素中。
1. 创建HTML结构：
<!DOCTYPE html>
<html>
<head>
<title>HTML Clock</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="clock"></div>
<script src="script.js"></script>
</body>
</html>
2. 创建CSS样式：
#clock {
height: 40px;
width: 40px;
border: 1px solid black;
border-radius: 50%;
position: relative;
display: inline-block;
}
3. 创建JavaScript代码：
function updateClock() {
var now = new Date(); // 获取当前时间
var hours = now.getHours(); // 获取小时数
var minutes = now.getMinutes(); // 获取分钟数
var seconds = now.getSeconds(); // 获取秒数
var timeString = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); // 格式化时间字符串
document.getElementById('clock').innerText = timeString; // 将时间字符串显示在clock元素中
}
setInterval(updateClock, 1000); // 每秒钟更新一次时间
二、手工时钟的制作
手工时钟的制作需要一些更复杂的HTML和CSS技巧，我们需要创建一个圆形的div元素来表示时钟的主体，然后使用CSS的transform属性来旋转这个元素，从而形成时钟的效果，我们还需要使用JavaScript来获取当前的时间，并将其显示在div元素中。
<!DOCTYPE html>
<html>
<head>
<title>Handmade Clock</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="handmade-clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<script src="script.js"></script>
</body>
</html>
.handmade-clock {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
}
.handmade-clock:before, .handmade-clock:after {
content: "";
position: absolute;
top: 50%;
width: 50%;
height: 6px;
background: black;
}
.handmade-clock:before { transform: rotate(60deg); } /* 代表时针 */
.handmade-clock:after { transform: rotate(60deg); } /* 代表分针 */
.hour-hand, .minute-hand, .second-hand { width: 2px; height: 40%; background: black; position: absolute; bottom: -5%; transform-origin: right center; transition: all 0.05s ease-out; } /* hour hand, minute hand and second hand */
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/467291.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
