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在智能电子设备中有着广泛的应用潜力,可以为电子设备提供更智能、更个性化的用户体验,并为用户提供更多便利和高效的功能和服务。智能电子设备是指通过集成计算机、传感器、网络和人工智能等技术,实现智能化的功能和交互的设备。ChatG…...
MGRE之OSPF实验
目录 题目: 步骤二:拓扑设计与地址规划编辑 步骤三:IP地址配置 步骤四:缺省路由配置 步骤五:NAT的配置 步骤六:MGRE配置 中心站点R1配置 分支站点配置 中心站点R5 R1配置 分支站点配置 检测&…...
【Selenium+Pytest+allure报告生成自动化测试框架】附带项目源码和项目部署文档
目录 前言 【文章末尾给大家留下了大量的福利】 测试框架简介 首先管理时间 添加配置文件 conf.py config.ini 读取配置文件 记录操作日志 简单理解POM模型 简单学习元素定位 管理页面元素 封装Selenium基类 创建页面对象 简单了解Pytest pytest.ini 编写测试…...
如何负载均衡中的日志统一管理
详细部署步骤:将负载均衡中的日志统一管理 调研和规划 确定日志管理的需求和目标。调研可用的日志收集工具和中心化存储系统。 选择合适的日志收集工具 根据需求选择适合负载均衡环境的日志收集工具,如Logstash、Fluentd或Filebeat。 在负载均衡服务器…...
Java_26_Stream流
Stream 什么是Stream流? 在Java 8中,得益于Lambda所带来的函数式编程, 引入了一个全新的Stream流概念 ,用于解决已有集合/数组类库有的弊端。 Stream流能解决什么问题? 可以解决已有集合类库或者数组API的弊端。 Stream认为集合…...
周四见 | 物流人的一周资讯
京东支付年活跃用户数超1.9亿 7月27日消息,京东科技发布2022年环境、社会及公司治理报告。报告显示,在推动社会公平方面,2022年京东科技帮助超207万家中小微企业实现数智化转型,为42万中小微企业提供贷款,节省融资成本…...
uniapp 即时通讯开发流程详解
今天我将为您详细介绍UniApp开发中的即时通讯流程。本文将向您展示如何在UniApp中实现即时通讯功能,为您的应用程序增添交互性和实时性。 1. 准备工作 在开始开发之前,确保您已完成以下准备工作: 确保您已经安装好UniApp开发环境ÿ…...
【Terraform学习】Terraform-docker部署快速入门(快速入门)
Terraform-docker部署快速入门 实验步骤 创建 EC2 IAM 角色 导航到IAM 在左侧菜单中,单击角色 。单击创建角色该按钮以创建新的 IAM 角色。 在创建角色部分,为角色选择可信实体类型: AWS 服务 使用案例:EC2 单击下一步 添加权限&#x…...
C# 全局响应Ctrl+Alt+鼠标右键
一、简述 某些应用,我们希望全局自定义热键。按键少了会和别的应用程序冲突,按键多了可定用户操作不变。因此我计划左手用CtrlAlt,右手用鼠标右键呼出我自定义的菜单。 我使用键盘和鼠标事件进行简单测试(Ctrl鼠标右键ÿ…...
【Leetcode】54.螺旋矩阵
一、题目 1、题目描述 给你一个 m m m 行 n n n 列的矩阵 matrix,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例1: 输入:matrix =...
怎样计算一个算法的复杂度?
分析一个算法主要看这个算法的执行需要多少机器资源。在各种机器资源中,时间和空间是两个最主要的方面。因此,在进行算法分析时,人们最关心的就是运行算法所要花费的时间和算法中使用的各种数据所占用的空间资源。算法所花费的时间通常称为时…...
【问题记录】Ubuntu 22.04 环境下,打开 VS Code 老是访问密钥环该怎么解决?
目录 环境 问题情况 解决方法 环境 VMware Workstation 16 Pro (版本:16.1.2 build-17966106)ubuntu-22.04.2-desktop-amd64 问题情况 在Ubuntu下,每次运行 VS Code时,老是提示要输入密钥密码来解锁保存在密钥环&am…...
format格式化输出语法详解
hello,这里是Token_w的文章,主要讲解python的基础学习,希望对大家有所帮助 整理不易,感觉还不错的可以点赞收藏评论支持,感谢! 使用 % 操作符对各种类型的数据进行格式化输出,这是早期 Python提…...
RocketMQ教程-(5)-功能特性-事务消息
事务消息为 Apache RocketMQ 中的高级特性消息,本文为您介绍事务消息的应用场景、功能原理、使用限制、使用方法和使用建议。 事务消息为 Apache RocketMQ 中的高级特性消息,本文为您介绍事务消息的应用场景、功能原理、使用限制、使用方法和使用建议。…...
HANA学习笔记
1、安装 准备安装介质,我这儿用的是HANA2.00.059.00,注意会用到三个lib包和saptune,提前准备好。 执行./hdblcm开启数据库安装,过程中会涉及到需要用户设置一些参数,按照自己需求设置即可。 安装完成会生成一个安装日…...
VMware虚拟机无法上网的解决办法
(1)1、在虚拟机右下角的网络适配器上面观察该图标是否是有绿色的灯在闪烁,如果网络适配器是灰色的证明虚拟机的网络没有打开,而是被禁用了,在适配器上点击鼠标右键,打开【设置】,在【已连接】、…...
PLC-Recorder的高速采集有多快?0.5ms算快吗?看控制器能力了!
大家知道,PLC-Recorder有一个高速采集的功能,基于TCP连接或UDP报文,速度取决于发送端的能力。对于西门子PLC,能做到1-2ms的采集速度,但是,我在前面的文章里提到了0.5ms的高速采集,哪个控制器能这…...
KMP算法总结
KMP算法总结 BF算法引导BF算法步骤(图片演示)代码演示 KMP算法推next数组代码演示 BF算法引导 BF算法是一个暴力的字符串匹配算法,时间复杂度是o(m*n) 假设主串和子串分别为 我们想要找到子串在主串的位置 BF算法核…...
消息中间件ActiveMQ介绍
一、消息中间件的介绍 介绍 消息队列 是指利用 高效可靠 的 消息传递机制 进行与平台无关的 数据交流,并基于 数据通信 来进行分布式系统的集成。 特点(作用) 应用解耦 异步通信 流量削峰 (海量)日志处理 消息通讯 …... 应用场景 根据消息队列的特点&a…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
