html+CSS+JS实现了一个带有主题切换功能(浅色模式和深色模式)的时钟
这段代码是一个完整的HTML文档,它实现了一个带有主题切换功能(浅色模式和深色模式)的时钟。以下是代码的详细分析:
1. HTML结构
<!DOCTYPE html>
: 声明文档类型为HTML5。<html lang="en">
: 设置文档语言为英语。<head>
: 包含元数据和样式定义。<meta charset="UTF-8">
: 设置字符编码为UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 设置视口,以确保页面在移动设备上正确显示。<style>
: 定义了CSS样式,包括使用CSS变量来定义主题颜色。<title>
: 设置页面标题为"Theme Clock"。
<body>
: 包含页面的主要内容。<button class="toggle">Dark mode</button>
: 一个按钮,用于切换浅色模式和深色模式。<div class="clock-container">
: 时钟的容器。<div class="clock">
: 时钟表盘。- 包含三个指针元素(
.hour
,.minute
,.second
)和一个中心点(.center-point
)。
- 包含三个指针元素(
<div class="time">
: 显示当前时间。<div class="date">
: 显示当前日期。
2. CSS样式
- 全局样式:
- 使用
* { box-sizing: border-box; }
来确保所有元素的padding和border都包含在元素的总宽度和高度内。
- 使用
- 主题颜色:
- 使用CSS变量(
--primary-color
和--secondary-color
)来定义主题颜色。 - 根据
html
元素是否有dark
类来切换颜色。
- 使用CSS变量(
- HTML和Body:
html
元素的过渡效果。body
元素设置为flex布局,用于居中对齐内容,并设置字体和背景。
- 按钮:
.toggle
按钮样式
原文地址:https://blog.csdn.net/2201_76060199/article/details/142602238
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!