利用HTML+CSS+JS打造炫酷时钟网页的完整指南

引言

在现代Web开发中,制作一个引人注目的时钟网页是一种常见而令人愉悦的体验。本文将介绍如何使用HTML、CSS和JavaScript来创建一个炫酷的时钟网页,通过这个项目,你将学到如何结合这三种前端技术,制作一个动态且美观的时钟效果。

步骤一:创建HTML结构

首先,创建HTML文件,定义时钟网页的基本结构:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/styles.css" />
		<title></title>
	</head>
	<body>
		<div class="clock">
			<div class="hr">
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
				</div>
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
					<div class="number">6</div>
					<div class="number">7</div>
					<div class="number">8</div>
					<div class="number">9</div>
				</div>
			</div>
			<div class="min">
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
				</div>
					<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
					<div class="number">6</div>
					<div class="number">7</div>
					<div class="number">8</div>
					<div class="number">9</div>
				</div>
			</div>
			<div class="sec">
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
				</div>
				<div class="strip">
					<div class="number">0</div>
					<div class="number">1</div>
					<div class="number">2</div>
					<div class="number">3</div>
					<div class="number">4</div>
					<div class="number">5</div>
					<div class="number">6</div>
					<div class="number">7</div>
					<div class="number">8</div>
					<div class="number">9</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>

步骤二:美化时钟样式(CSS)

创建一个名为 styles.css 的CSS文件,用于美化时钟的外观:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    place-items: center;
}

body {
    font-family: monospace;
    font-size: 2rem;
    min-height: 100vh;
    display: grid;
    overflow-y: hidden;
    place-items: center;
    background: linear-gradient(-45deg, #c4d2ef, #dfe6f6);
}

.hr,
.min,
.sec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3rem;
    grid-row: 1/2;
    align-items: start;
}

.number {
    padding: 0.5em;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    color: #f9fbfd;
    transition: all 500ms 100ms ease;
    border-radius: 50%;
}

.number.pop {
    color: #3e6ccb;
    font-weight: bold;
    transform: scale(1.3);
    background-color: #dfe6f6;
    box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8;
}

.strip {
    transition: transform 500ms ease-in-out;
    border-radius: 8px;
    background-color: #dfe6f6;
    box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8;
}

.clock {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rem;
    height: 4rem;
    position: relative;
    padding: 0 4rem;
}

步骤三:实现时钟逻辑(JavaScript)

在 index.js 文件中,编写JavaScript代码来获取当前时间,并根据时间更新时钟的指针位置:

const strips = [...document.querySelectorAll(".strip")];
const numberSize = "4"; 

var lastTime = new Array(-1, -1, -1)


function highlight(strip, d) {
    strips[strip]
        .querySelector(`.number:nth-of-type(${d + 1})`)
        .classList.add("pop");

    setTimeout(() => {
        strips[strip]
            .querySelector(`.number:nth-of-type(${d + 1})`)
            .classList.remove("pop");
    }, 950); 
}

function stripSlider(strip, id, number) {
    let d1 = Math.floor(number / 10);
    let d2 = number % 10;

    if (lastTime[id] == -1 || lastTime[id] != number) {
        strips[strip].style.transform = `translateY(${d1 * -numberSize}rem)`;
        strips[strip + 1].style.transform = `translateY(${d2 * -numberSize}rem)`;

        lastTime[id] = number;
    }

    highlight(strip, d1);
    highlight(strip + 1, d2);
}

function updateClock() {
    
    const time = new Date();

   
    const hours = time.getHours();
    const mins = time.getMinutes();
    const secs = time.getSeconds();

   
    stripSlider(0, 0, hours);
    stripSlider(2, 1, mins);
    stripSlider(4, 2, secs);
}


setInterval(updateClock, 1000);

updateClock();

结语

通过本文的指南,你已经学会如何使用HTML、CSS和JavaScript创建一个炫酷的时钟网页。这个项目结合了这三种前端技术,展示了它们的协同作用。通过这个实践,你不仅提升了前端技术的应用能力,还掌握了制作动态效果的基本原理。希望这个时钟网页项目能够成为你继续学习前端开发的良好起点。

  • 18
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明
好的,下面是一份使用 HTML+CSS+JS 实现炫酷时钟的示例代码: ```html <!DOCTYPE html> <html> <head> <title>Cool Clock</title> <style type="text/css"> body { background-color: #333; } .clock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .clock .hour, .clock .minute, .clock .second { position: relative; width: 70%; height: 70%; margin: auto; border-radius: 50%; background-color: #333; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; } .clock .hour:before, .clock .minute:before, .clock .second:before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); height: 50%; width: 5px; background-color: #fff; border-radius: 5px; } .clock .hour { z-index: 3; } .clock .hour:before { height: 30%; } .clock .minute { z-index: 2; } .clock .minute:before { height: 40%; } .clock .second { z-index: 1; } .clock .second:before { height: 50%; } .clock .tick { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); height: 10%; width: 5px; background-color: #fff; border-radius: 5px; transform-origin: center 90%; animation: tick 1s linear infinite; } .clock .tick:nth-child(5n+1) { height: 20%; } .clock .tick:nth-child(10n+1) { height: 30%; } .clock .tick:nth-child(15n+1) { height: 40%; } .clock .tick:nth-child(20n+1) { height: 50%; } @keyframes tick { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="clock"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> <div class="tick"></div> </div> <script type="text/javascript"> function updateClock() { var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var hourHand = document.querySelector(".hour"); var minuteHand = document.querySelector(".minute"); var secondHand = document.querySelector(".second"); var hourAngle = (hour % 12) / 12 * 360 + minute / 60 * 30; var minuteAngle = minute / 60 * 360; var secondAngle = second / 60 * 360; hourHand.style.transform = "rotate(" + hourAngle + "deg)"; minuteHand.style.transform = "rotate(" + minuteAngle + "deg)"; secondHand.style.transform = "rotate(" + secondAngle + "deg)"; } setInterval(updateClock, 1000); </script> </body> </html> ``` 这份代码实现了一个圆形的时钟时钟的样式可以通过 CSS 进行自定义。时钟的指针是通过 CSS 的 `transform: rotate()` 属性来控制旋转角度的,指针的角度是根据当前时间计算出来的。时钟上的刻度线是通过 CSS 的 `animation` 属性来实现的,用 `transform-origin` 控制旋转中心,用 `@keyframes` 定义动画。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奇遇少年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值