当前位置: 首页 > news >正文

19.主题时钟

主题时钟

html部分

<div class="btn">黑色</div><div class="clock-container"><div class="time">21</div><div class="date">21</div><div class="clock"><div class="line hour"></div><div class="line minute"></div><div class="line second"></div><div class="point"></div></div>
</div>

css部分

*{margin: 0;padding: 0;
}:root{--primary-color:#000;--secondary-color:#fff
}html{transition: all .5s;
}
html.dark{--primary-color:#fff;--secondary-color:#333;background-color: #111;color: var(--primary-color);
}body{display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;
}.btn{cursor: pointer;background-color: var(--primary-color);color: var(--secondary-color);border-radius: 4px;padding: 8px 12px;position: absolute;top: 100px;
}.clock-container{display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
.clock{position: relative;width: 200px;height: 200px;}
.line{background-color: var(--primary-color);position: absolute;top: 50%;left: 50%;height: 85px;transform: translate(-50%,-50%);width: 3px;transform-origin: bottom center;transition: all .5s;}.time{font-size: 24px;margin: 10px 0;
}.minute{transform: rotate(60deg);
}
.second{transform:rotate(220deg);background-color: brown;
}
.point{position: absolute;top: 92%;left: 51%;transform: translate(-50%,-50%);width: 10px;height: 10px;border-radius: 50%;background-color: var(--secondary-color);border: 2px solid brown;
}

js部分

// 获取dom
const btn=document.querySelector('.btn');
const html=document.querySelector('html');
const time_box=document.querySelector('.time');
const date_box=document.querySelector('.date');
const hour_box=document.querySelector('.hour');
const min_box=document.querySelector('.minute');
const sec_box=document.querySelector('.second');// 定义周数组
const weeks=['星期日','星期一','星期俩','星期三','星期四','星期俩','星期六'];// 主题按钮
btn.addEventListener("click",()=>{html.classList.toggle('dark');btn.innerHTML=='黑色'?btn.innerHTML='白色':btn.innerHTML='黒色';})function active_time(){const time=new Date();const months=time.getMonth()+1;const days=time.getDate();const week=time.getDay();const hour=time.getHours()%12;const min=time.getMinutes();const sec=time.getSeconds();// 设置时针,分针,秒针 hour_box.style.transform=`scaleX(0.8) rotate(${scale(hour,0,12,0,360)}deg)`;sec_box.style.transform=`rotate(${scale(sec,0,60,0,360)}deg)`;min_box.style.transform=`rotate(${scale(min,0,60,0,360)}deg)`;// 设置时间,日期const dom_time=`${hour}:${min.toString().padStart(2,'0')} ${new Date().getHours()>12?'PM':'AM'}`const date_time=`${weeks[week]},${months.toString().padStart(2,'0')}月${days.toString().padStart(2,'0')}日`time_box.innerHTML=dom_timedate_box.innerHTML=date_time
}
active_time();setInterval(active_time,10)function scale(num,in_min,in_max,out_min,out_max){return (num-in_min)*(out_max-out_min)/(in_max-in_min)+out_min;
}

效果

在这里插入图片描述

相关文章:

19.主题时钟

主题时钟 html部分 <div class"btn">黑色</div><div class"clock-container"><div class"time">21</div><div class"date">21</div><div class"clock"><div class&qu…...

ChatGPT在智能电子设备中的应用如何?

ChatGPT在智能电子设备中有着广泛的应用潜力&#xff0c;可以为电子设备提供更智能、更个性化的用户体验&#xff0c;并为用户提供更多便利和高效的功能和服务。智能电子设备是指通过集成计算机、传感器、网络和人工智能等技术&#xff0c;实现智能化的功能和交互的设备。ChatG…...

MGRE之OSPF实验

目录 题目&#xff1a; 步骤二&#xff1a;拓扑设计与地址规划​编辑 步骤三&#xff1a;IP地址配置 步骤四&#xff1a;缺省路由配置 步骤五&#xff1a;NAT的配置 步骤六&#xff1a;MGRE配置 中心站点R1配置 分支站点配置 中心站点R5 R1配置 分支站点配置 检测&…...

【Selenium+Pytest+allure报告生成自动化测试框架】附带项目源码和项目部署文档

目录 前言 【文章末尾给大家留下了大量的福利】 测试框架简介 首先管理时间 添加配置文件 conf.py config.ini 读取配置文件 记录操作日志 简单理解POM模型 简单学习元素定位 管理页面元素 封装Selenium基类 创建页面对象 简单了解Pytest pytest.ini 编写测试…...

如何负载均衡中的日志统一管理

详细部署步骤&#xff1a;将负载均衡中的日志统一管理 调研和规划 确定日志管理的需求和目标。调研可用的日志收集工具和中心化存储系统。 选择合适的日志收集工具 根据需求选择适合负载均衡环境的日志收集工具&#xff0c;如Logstash、Fluentd或Filebeat。 在负载均衡服务器…...

Java_26_Stream流

Stream 什么是Stream流&#xff1f; 在Java 8中&#xff0c;得益于Lambda所带来的函数式编程&#xff0c; 引入了一个全新的Stream流概念 &#xff0c;用于解决已有集合/数组类库有的弊端。 Stream流能解决什么问题? 可以解决已有集合类库或者数组API的弊端。 Stream认为集合…...

周四见 | 物流人的一周资讯

京东支付年活跃用户数超1.9亿 7月27日消息&#xff0c;京东科技发布2022年环境、社会及公司治理报告。报告显示&#xff0c;在推动社会公平方面&#xff0c;2022年京东科技帮助超207万家中小微企业实现数智化转型&#xff0c;为42万中小微企业提供贷款&#xff0c;节省融资成本…...

uniapp 即时通讯开发流程详解

今天我将为您详细介绍UniApp开发中的即时通讯流程。本文将向您展示如何在UniApp中实现即时通讯功能&#xff0c;为您的应用程序增添交互性和实时性。 1. 准备工作 在开始开发之前&#xff0c;确保您已完成以下准备工作&#xff1a; 确保您已经安装好UniApp开发环境&#xff…...

【Terraform学习】Terraform-docker部署快速入门(快速入门)

Terraform-docker部署快速入门 实验步骤 创建 EC2 IAM 角色 导航到IAM 在左侧菜单中&#xff0c;单击角色 。单击创建角色该按钮以创建新的 IAM 角色。 在创建角色部分&#xff0c;为角色选择可信实体类型&#xff1a; AWS 服务 使用案例:EC2 单击下一步 添加权限&#x…...

C# 全局响应Ctrl+Alt+鼠标右键

一、简述 某些应用&#xff0c;我们希望全局自定义热键。按键少了会和别的应用程序冲突&#xff0c;按键多了可定用户操作不变。因此我计划左手用CtrlAlt&#xff0c;右手用鼠标右键呼出我自定义的菜单。 我使用键盘和鼠标事件进行简单测试&#xff08;Ctrl鼠标右键&#xff…...

【Leetcode】54.螺旋矩阵

一、题目 1、题目描述 给你一个 m m m 行 n n n 列的矩阵 matrix,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例1: 输入:matrix =...

怎样计算一个算法的复杂度?

分析一个算法主要看这个算法的执行需要多少机器资源。在各种机器资源中&#xff0c;时间和空间是两个最主要的方面。因此&#xff0c;在进行算法分析时&#xff0c;人们最关心的就是运行算法所要花费的时间和算法中使用的各种数据所占用的空间资源。算法所花费的时间通常称为时…...

【问题记录】Ubuntu 22.04 环境下,打开 VS Code 老是访问密钥环该怎么解决?

目录 环境 问题情况 解决方法 环境 VMware Workstation 16 Pro &#xff08;版本&#xff1a;16.1.2 build-17966106&#xff09;ubuntu-22.04.2-desktop-amd64 问题情况 在Ubuntu下&#xff0c;每次运行 VS Code时&#xff0c;老是提示要输入密钥密码来解锁保存在密钥环&am…...

format格式化输出语法详解

hello&#xff0c;这里是Token_w的文章&#xff0c;主要讲解python的基础学习&#xff0c;希望对大家有所帮助 整理不易&#xff0c;感觉还不错的可以点赞收藏评论支持&#xff0c;感谢&#xff01; 使用 % 操作符对各种类型的数据进行格式化输出&#xff0c;这是早期 Python提…...

RocketMQ教程-(5)-功能特性-事务消息

事务消息为 Apache RocketMQ 中的高级特性消息&#xff0c;本文为您介绍事务消息的应用场景、功能原理、使用限制、使用方法和使用建议。 事务消息为 Apache RocketMQ 中的高级特性消息&#xff0c;本文为您介绍事务消息的应用场景、功能原理、使用限制、使用方法和使用建议。…...

HANA学习笔记

1、安装 准备安装介质&#xff0c;我这儿用的是HANA2.00.059.00&#xff0c;注意会用到三个lib包和saptune&#xff0c;提前准备好。 执行./hdblcm开启数据库安装&#xff0c;过程中会涉及到需要用户设置一些参数&#xff0c;按照自己需求设置即可。 安装完成会生成一个安装日…...

VMware虚拟机无法上网的解决办法

&#xff08;1&#xff09;1、在虚拟机右下角的网络适配器上面观察该图标是否是有绿色的灯在闪烁&#xff0c;如果网络适配器是灰色的证明虚拟机的网络没有打开&#xff0c;而是被禁用了&#xff0c;在适配器上点击鼠标右键&#xff0c;打开【设置】&#xff0c;在【已连接】、…...

PLC-Recorder的高速采集有多快?0.5ms算快吗?看控制器能力了!

大家知道&#xff0c;PLC-Recorder有一个高速采集的功能&#xff0c;基于TCP连接或UDP报文&#xff0c;速度取决于发送端的能力。对于西门子PLC&#xff0c;能做到1-2ms的采集速度&#xff0c;但是&#xff0c;我在前面的文章里提到了0.5ms的高速采集&#xff0c;哪个控制器能这…...

KMP算法总结

KMP算法总结 BF算法引导BF算法步骤&#xff08;图片演示&#xff09;代码演示 KMP算法推next数组代码演示 BF算法引导 BF算法是一个暴力的字符串匹配算法&#xff0c;时间复杂度是o&#xff08;m*n&#xff09; 假设主串和子串分别为 我们想要找到子串在主串的位置 BF算法核…...

消息中间件ActiveMQ介绍

一、消息中间件的介绍 介绍 ​ 消息队列 是指利用 高效可靠 的 消息传递机制 进行与平台无关的 数据交流&#xff0c;并基于 数据通信 来进行分布式系统的集成。 特点(作用) 应用解耦 异步通信 流量削峰 (海量)日志处理 消息通讯 …... 应用场景 根据消息队列的特点&a…...

告别卡顿!Windows播放器为何需要LAV Filters解码器加持?

告别卡顿&#xff01;Windows播放器为何需要LAV Filters解码器加持&#xff1f; 【免费下载链接】LAVFilters LAV Filters - Open-Source DirectShow Media Splitter and Decoders 项目地址: https://gitcode.com/gh_mirrors/la/LAVFilters 你是否曾经遇到过这样的尴尬时…...

LSM303DLHC驱动开发:磁力计校准与六轴姿态解算

1. LSM303DLHC 姿态感知核心&#xff1a;高精度磁力计与加速度计集成库深度解析LSM303DLHC 是意法半导体&#xff08;STMicroelectronics&#xff09;推出的紧凑型六轴惯性测量单元&#xff08;IMU&#xff09;&#xff0c;集成了三轴加速度计&#xff08;2g/4g/8g 可选量程&am…...

Qwen3.5-4B-Claude-Opus-GGUF一键部署:CSDN镜像平台Web化推理服务上线指南

Qwen3.5-4B-Claude-Opus-GGUF一键部署&#xff1a;CSDN镜像平台Web化推理服务上线指南 1. 模型与平台介绍 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF 是一个基于 Qwen3.5-4B 的推理蒸馏模型&#xff0c;重点强化了结构化分析、分步骤回答、代码与逻辑类问题的处理…...

如何快速掌握英雄联盟个性化展示工具:5个专业技巧与完整指南

如何快速掌握英雄联盟个性化展示工具&#xff1a;5个专业技巧与完整指南 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 想要为你的英雄联盟客户端打造独一无二的个性化展示效果吗&#xff1f;LeaguePrank是一款基于LCU API开…...

【程序源代码】外卖小程序系统设计与实现

关键字&#xff1a;java、mybatis、mysql、ssm、微信小程序、外卖、设计与实现、源码&#xff08;一&#xff09;系统介绍 名称&#xff1a;外卖微信小程序系统设计与实现&#xff08;含源码&#xff09; &#xff08;二&#xff09;详细介绍 下载资料&#xff1a;程序、数据…...

【仅开放72小时】C++27实验性parallel_unstable_sort_view深度评测:多核排序吞吐达1.2GB/s的编译器flag调优矩阵(附Intel Xeon W9-3400实测数据)

第一章&#xff1a;C27实验性parallel_unstable_sort_view概览parallel_unstable_sort_view 是 C27 标准提案&#xff08;P2903R3&#xff09;中引入的实验性范围适配器&#xff0c;旨在为无序、高性能的并行排序提供轻量级视图封装。它不保证相等元素的相对顺序&#xff08;即…...

Pixel Couplet Gen快速部署:微信小程序端调用像素春联API的跨域与性能优化

Pixel Couplet Gen快速部署&#xff1a;微信小程序端调用像素春联API的跨域与性能优化 1. 项目背景与核心价值 Pixel Couplet Gen是一款基于ModelScope大模型驱动的创新春联生成器&#xff0c;将传统春节文化与现代像素艺术完美融合。不同于传统春联生成工具&#xff0c;该项…...

AI开发效率翻倍:TensorFlow-v2.9镜像完整开发环境实测体验

AI开发效率翻倍&#xff1a;TensorFlow-v2.9镜像完整开发环境实测体验 你是不是也经历过这样的场景&#xff1f;新项目启动&#xff0c;满怀激情准备大干一场&#xff0c;结果第一天就卡在了环境配置上。CUDA版本不对、依赖库冲突、Python环境混乱……光是让TensorFlow成功识别…...

FocalNet目标检测、实例分割模型环境配置FocalNet目标检测、实例分割模型数据集调整FocalNet目标检测、实例分割模型代跑训练FocalNet目标检测、实例分割改进创新Focal

FocalNet目标检测、实例分割模型环境配置 FocalNet目标检测、实例分割模型数据集调整 FocalNet目标检测、实例分割模型代跑训练 FocalNet目标检测、实例分割改进创新 FocalNet环境配置&#xff1a;Windows、Ubuntu、Centos、Macos等系统环境&#xff0c;如果电脑拥有显卡&#…...

公司SEO推广与关键词策略的关系是什么_公司SEO推广的长期效果如何确保

公司SEO推广与关键词策略的关系是什么_公司SEO推广的长期效果如何确保 什么是SEO推广&#xff1f; 我们来了解一下什么是SEO推广。SEO&#xff0c;全称搜索引擎优化&#xff0c;是通过优化网站内容和结构&#xff0c;提高其在搜索引擎自然排名中的位置&#xff0c;从而吸引更…...