【前端】实现时钟网页

【前端】实现时钟网页

在这里插入图片描述
在这里插入图片描述

文章目录

  • 【前端】实现时钟网页
      • 项目介绍
      • 代码
      • 效果图

项目介绍

时钟显示在网页中央,并且使网页能够切换白天和夜晚两种模式。搭建基本的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>

效果图

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/35750.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

onlyoffice实现打开文档的功能

后端代码 import api from api import middlewareasync def doc_callback(request):data await api.req.get_json(request)print("callback ", data)# status 2 文档准备好被保存# status 6 文档编辑会话关闭return api.resp.success()app api.Api(routes[api.…

力扣爆刷第153天之TOP100五连刷26-30(接雨水、环形链表、最长上升子序列)

力扣爆刷第153天之TOP100五连刷26-30&#xff08;接雨水、环形链表、最长上升子序列&#xff09; 文章目录 力扣爆刷第153天之TOP100五连刷26-30&#xff08;接雨水、环形链表、最长上升子序列&#xff09;一、300. 最长递增子序列二、415. 字符串相加三、143. 重排链表四、42.…

Flutter页面状态保留策略

目的: 防止每次点击底部按钮都进行一次页面渲染和网络请求 1. 使用IndexedStack 简单,只需要把被渲染的组件外部套一层IndexedStack即可 缺点: 在应用启动的时候,所有需要保存状态的页面都会直接被渲染,保存起来. 对性能有影响 2. 使用PageController 实现较为复杂,但是不用…

软件构造 | 期末查缺补漏

软件构造 | 期末查缺补漏 总体观 软件构造的三维度八度图是由软件工程师Steve McConnell提出的概念&#xff0c;用于描述软件构建过程中的三个关键维度和八个要素。这些维度和要素可以帮助软件开发团队全面考虑软件构建的方方面面&#xff0c;从而提高软件质量和开发效率。 下…

利用LinkedHashMap实现一个LRU缓存

一、什么是 LRU LRU是 Least Recently Used 的缩写&#xff0c;即最近最少使用&#xff0c;是一种常用的页面置换算法&#xff0c;选择最近最久未使用的页面予以淘汰。 简单的说就是&#xff0c;对于一组数据&#xff0c;例如&#xff1a;int[] a {1,2,3,4,5,6}&#xff0c;…

Docker:使用 JupyterLab 进行数据科学

使用 JupyterLab 进行数据科学 Docker 和 JupyterLab 是两个强大的工具,可以增强您的数据科学工作流程。在本指南中,您将学习如何将它们结合使用,以创建和运行可重现的数据科学环境。本指南基于《Supercharging AI/ML Development with JupyterLab and Docker》。 在本指南…

Spring Boot中的日志切面编程

Spring Boot中的日志切面编程 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨在Spring Boot项目中如何利用日志切面编程&#xff0c;提升系统…

2024年6月26日 (周三) 叶子游戏新闻

老板键工具来唤去: 它可以为常用程序自定义快捷键&#xff0c;实现一键唤起、一键隐藏的 Windows 工具&#xff0c;并且支持窗口动态绑定快捷键&#xff08;无需设置自动实现&#xff09;。 土豆录屏: 免费、无录制时长限制、无水印的录屏软件 《Granblue Fantasy Versus: Risi…

数据结构:几种基本的数据结构

线性结构&#xff1a; 数组&#xff08;Array&#xff09;&#xff1a;数组是一段连续的内存空间&#xff0c;用于存储相同类型的元素&#xff0c;支持随机访问但插入和删除可能较慢。链表&#xff08;Linked List&#xff09;&#xff1a;链表中的元素在内存中不是顺序存放的&…

【Linux命令基础】文件管理命令(三)

文章目录 前言软连接与硬连接软连接硬连接tree命令pwd命令touch命令which命令重定向命令总结前言 在我们的上一篇文章中,我们介绍了一些基本的Linux文件管理命令,如 cp、mv 等。这些命令对于日常的文件操作任务非常有用。然而,Linux 提供的功能远不止这些。在本文中,我们将…

PS教程29

图层蒙版 以案例来解释蒙版的作用 将这两张图片原框背景切换将图二的背景选中使用套索工具选中区域切换图一CtrlA全选CtrlC复制编辑-选择性粘贴-贴入即可贴入如果位置不对用移动工具进行调整 这就是图层蒙版 图层蒙版本质作用&#xff1a;是临时通道&#xff0c;支持黑白灰三种…

Linux开发讲课16--- 【内存管理】页表映射基础知识2

ARM32页表和Linux页表那些奇葩的地方 ARM32硬件页表中PGD页目录项PGD是从20位开始的&#xff0c;但是为何头文件定义是从21位开始&#xff1f; 历史原因&#xff1a;Linux最初是基于x86的体系结构设计的&#xff0c;因此Linux内核很多的头文件的定义都是基于x86的&#xff0c…

Java中Collection的成员及其特点

Collection集合 list集合系列 ArrarList集合 底层基于数组来实现 查询速度快&#xff08;根据索引查询数据&#xff09; 删除效率低&#xff08;可能需要把后面很多的数据往后移&#xff09; 添加效率…

代码随想录训练营第二十一天 669修建二叉搜索树 108将有序数组转换为二叉搜索树 538把二叉搜索树转换为累加树

第一题&#xff1a; 原题链接&#xff1a;669. 修剪二叉搜索树 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 终止条件&#xff1a; 如果root本身为null的话直接返回null&#xff1b; 如果当前节点的val值小于low边界&#xff0c;说明当前这个节点是要删除的…

软件构造 | Abstract Data Type (ADT)

软件构造 | Abstract Data Type (ADT) ​ 抽象数据类型与表示独立性&#xff1a;如何设计良好的抽象数据结构&#xff0c;通过封 装来避免客户端获取数据的内部表示&#xff08;即“表示泄露”&#xff09;&#xff0c;避免潜在 的bug——在client和implementer之间建立“防火…

鸿蒙开发Ability Kit(程序框架服务):【FA模型切换Stage模型指导】 配置文件差异

配置文件的差异 FA模型应用在[config.json文件]中描述应用的基本信息&#xff0c;一个应用工程中可以创建多个Module&#xff0c;每个Module中都有一份config.json文件。config.json由app、deviceConfig和module三部分组成&#xff0c;app标签用于配置应用级别的属性&#xff…

裸机与操做系统区别(RTOS)

声明&#xff1a;该系列笔记是参考韦东山老师的视频&#xff0c;链接放在最后&#xff01;&#xff01;&#xff01; rtos&#xff1a;这种系统只实现了内核功能&#xff0c;比较简单&#xff0c;在嵌入式开发中&#xff0c;某些情况下我们只需要多任务&#xff0c;而不需要文件…

网络构建和设计方法_2.网络技术遴选

网络遴选工作是通信系统设计中关键的一项工作&#xff0c;根据计划实施的网络建设要求&#xff0c;遴选工作通常分为局域网、广域网和路由协议的选择。 1.局域网技术遴选 1&#xff09;生成树协议&#xff08;Spanning Tree Protocol&#xff0c;STP&#xff09; 在局域网构建…

前端项目结构介绍与Vue-cli(脚手架)环境搭建

传统的前端项目结构 一个项目中有许多html文件 每一个html文件都是相互独立的 如果需要在页面中导入一些外部依赖的组件(vue.js,elementUI),就需要在每一个html文件中引用都导入,十分的麻烦 而且这些外部组件都需要在其官网中自行下载,也增加了导入的繁琐程度 当今的前端项…

PMBOK® 第六版 实施整体变更控制

目录 读后感—PMBOK第六版 目录 对于变化的态度&#xff0c;个人引用两句加以阐释&#xff0c;即“流水不腐&#xff0c;户枢不蠹”与“不以规矩&#xff0c;不能成方圆”。这看似相互矛盾&#xff0c;实则仿若两条腿总是一前一后地行进。有一个典型的例子&#xff0c;“自由美…