前端实现时钟网页的详细代码示例
更新时间：2024年09月27日 10:27:49 作者：Byyyi耀
本文介绍了如何在网页中实现一个动态显示的时钟,并且添加了白天和夜晚两种模式的切换功能,通过简单的HTML结构和JavaScript代码,使用Date()函数动态获取当前的时间,并将时、分、秒通过逻辑绑定到相应的div元素上,实现时钟的动态显示,需要的朋友可以参考下
项目介绍
时钟显示在网页中央，并且使网页能够切换白天和夜晚两种模式。搭建基本的html结构，动态得到实时的时，分，秒通过Date()函数获得。将得到的数字根据逻辑，绑定给各div结构，实行动态旋转。点击按钮，改变背景颜色给出最终的HTML代码。
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>现代风格时钟</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
transition: background-color 0.5s;
}
.clock-container {
display: flex;
flex-direction: column;
align-items: center;
}
.clock {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: white;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: 50% 100%;
border-radius: 5px;
}
.hour {
width: 4px;
height: 50px;
background-color: #333;
}
.minute {
width: 3px;
height: 70px;
background-color: #666;
}
.second {
width: 2px;
height: 90px;
background-color: #e74c3c;
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
transform: translate(-50%, -50%);
}
.digital-time {
font-size: 48px;
margin-top: 20px;
color: #333;
}
.mode-switch {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.mode-switch:hover {
background-color: #555;
}
.night-mode {
background-color: #222;
}
.night-mode .clock {
background-color: #333;
box-shadow: 0 0 20px rgba(255,255,255,0.1);
}
.night-mode .hour, .night-mode .minute {
background-color: #fff;
}
.night-mode .second {
background-color: #e74c3c;
}
.night-mode .center {
background-color: #fff;
}
.night-mode .digital-time {
color: #fff;
}
.night-mode .mode-switch {
background-color: #f0f0f0;
color: #333;
}
.night-mode .mode-switch:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="clock-container">
<div class="clock">
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
<div class="center"></div>
</div>
<div class="digital-time"></div>
<button class="mode-switch">Dark mode</button>
</div>
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourDeg = (hours % 12 + minutes / 60) * 30;
const minuteDeg = (minutes + seconds / 60) * 6;
const secondDeg = seconds * 6;
document.querySelector('.hour').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
document.querySelector('.minute').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
document.querySelector('.second').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
const digitalTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${hours >= 12 ? 'PM' : 'AM'}`;
document.querySelector('.digital-time').textContent = digitalTime;
}
function toggleMode() {
document.body.classList.toggle('night-mode');
const button = document.querySelector('.mode-switch');
button.textContent = document.body.classList.contains('night-mode') ? 'Light mode' : 'Dark mode';
}
setInterval(updateClock, 1000);
updateClock(); // 立即更新一次,避免延迟
document.querySelector('.mode-switch').addEventListener('click', toggleMode);
</script>
</body>
</html>
效果图
总结
到此这篇关于前端实现时钟网页的文章就介绍到这了,更多相关前端时钟网页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了TypeScript 背后的结构化类型系统原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家详细介绍了JS+HTML+CSS实现轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了js实现单张图片平移切换效果，一张图移动到左边以后，从底部移回最右，等待下一次循环，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了js实现类似jquery里animate动画效果的方法,实例分析了javascript模拟实现jQuery中animate动画效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS字符串和数组如何实现相互转化,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
在网页中，我们可以将JavaScript代码放在html文件中任何位置，但一般放在head或body标签里面。一般来说，<script>元素放在哪里与其的功能作用是紧密相关的，通过本文我们一起学习下2016-01-01
在上一篇中，自谦懒人的咚锵留言指出楼猪改写的format函数在参数输入11个后不起作用了2010-08-08
正则表达式(Regular Expression)是一门简单语言的语法规范，是强大、便捷、高效的文本处理工具，它应用在一些方法中，对字符串中的信息实现查找、替换和提取操作2021-11-11
浏览器为开发者提供了功能丰富的Observer,本文主要介绍了JavaScript中5个重要的Observer函数小结,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这个可以增加用户验证，不用js alert来作提示，而是在右边提示，现在很多网站都这样做，有需要的朋友可以参考一下2013-08-08
最新评论