使用js和css简单制作属于自己的时钟网页
一.前言
在网页设计和开发的世界中，创造一个简单却精美的时钟页面是一个很好的起点。通过HTML、CSS和JavaScript的结合运用，我们可以构建一个功能强大、视觉吸引人的时钟。本项目将展示如何使用基本的Web技术来实现一个时钟，同时也能够为你的下一个项目提供启发和基础
二.HTML 结构：
使用 `<div>` 标签包裹时钟显示部分。
时、分、秒分别使用 `<span>` 标签来显示，并通过 `id` 属性分别命名为 `hours`、`minutes`、`seconds`。
三.CSS 样式：
通过 CSS 对时钟进行样式化，包括设置字体大小、背景颜色、内边距、圆角和阴影等。
四.JavaScript：
`updateClock()` 函数获取当前时间，并将时、分、秒分别更新到 HTML 页面的对应 `<span>` 元素中。
使用 `setInterval()` 函数每秒调用一次 `updateClock()`，以确保时钟显示实时更新。
在页面加载时立即调用 `updateClock()` 一次，以显示初始时间。
五. 代码实例：
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="clock">
<div class="outer-clock-face">
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
CSS样式
/* 重置所有元素的外边距和内边距 */
*{
margin: 0;
padding: 0;
}
/* 设置body元素的样式 */
body{
height: 100vh;
/* 内容居中对齐，水平和垂直方向均居中 */
display: flex;
justify-content: center;
align-items: center;
}
/* 设置时钟容器的样式 */
.clock{
width: 300px;
height: 300px;
/* 边框样式 */
border: 7px solid #ffebdb;
border-radius: 50%;
/* 背景图片 */
background-image: url("./3.jpg");
background-size:111%;
/* 内边距 */
padding: 20px;
}
.outer-clock-face{
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
}
.marking{
position: absolute;
left: 50%;
width: 3px;
height: 100%;
background-color: #596235;
margin-left: -1.5px;
/* 圆角样式 */
border-radius: 8px;
transform-origin: 50% 50%;
}
.marking-one{
transform: rotateZ(30deg);
}
.marking-two{
transform: rotateZ(60deg);
}
.marking-three{
transform: rotateZ(120deg);
}
.marking-four{
transform: rotateZ(150deg);
}
.outer-clock-face::before,
.outer-clock-face::after{
content: '';
width: 10px;
height: 100%;
background-color: #596235;
/* 使元素块状化 */
position: absolute;
left: 50%;
margin-left: -5px;
/* 圆角样式 */
border-radius: 8px;
}
.outer-clock-face::after{
transform: rotateZ(90deg);
}
.inner-clock-face{
width: 80%;
height: 80%;
border-radius: 100%;
background-color: #ffebdb;
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
/* 使元素在水平和垂直方向上居中 */
transform: translate(-50%, -50%);
/* 背景图片 */
background-image: url("./3.jpg");
/* 背景图片大小 */
background-size: 110%;
}
.hand{
width: 30%;
height: 6px;
background-color: #b03715;
/* 使元素绝对定位 */
position: absolute;
top: 50%;
right: 50%;
border-radius: 6px;
margin-top: -3px;
transform-origin: 100% 50%;
transform: rotateZ(90deg);
}
.second-hand{
width: 45%;
height: 2px;
margin-top: -1px;
/* 秒针颜色 */
background-color: #b3b3b3;
}
.min-hand{
width: 35%;
height: 4px;
margin-top: -2px;
/* 分针颜色 */
background-color: #21dd85;
}
.hour-hand{
width: 20%;
height: 6px;
margin-top: -3px;
/* 时针颜色 */
background-color: #d32323;
}
JavaScript逻辑
var secondHand =document.querySelector('.second-hand');
var minHand = document.querySelector('.min-hand');
var hourHand = document.querySelector('.hour-hand');
/**
* 设置时钟的时间显示
* 这个函数会根据当前时间来计算时针、分针和秒针的旋转角度，并更新页面上时钟的显示
*/
function setDate(){
//拿到当前时间
var now = new Date();
//读秒
var seconds = now.getSeconds();
//计算旋转角度
var secondsDegrees = (seconds / 60) * 360+90;
//设置秒针角度
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
// 设置分针角度
var minutes = now.getMinutes();
var minutesDegrees = (minutes / 60) * 360+90;
minHand.style.transform = `rotate(${minutesDegrees}deg)`;
var hours = now.getHours();
// 12 小时制
var hoursDegrees = (hours / 12) * 360 + 90;
// 设置时针角度
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}
setInterval(setDate,1000)
原图
效果
六.总结：
通过本项目，我们学习了如何创建一个基本的时钟网页。首先，我们使用HTML定义了时钟的基本结构，包括外部和内部时钟面板，以及时钟的指针。接着，通过CSS来设计和美化时钟的外观，包括样式、颜色和布局。最后，通过JavaScript来实现时钟的动态效果，确保指针能够准确地显示当前时间。
此时钟不仅展示了如何利用基本的前端技术来创造一个实用的工具，还展示了如何通过简单的动画和样式使其更具吸引力。通过这个项目，你可以进一步探索和扩展，添加更多功能或改进设计，以满足特定需求或个人喜好。继续探索Web开发的奥秘，创造更多令人惊叹的用户体验吧
