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

功能案例 -- 通过开关,改变白天和黑夜

news 2026/2/9 0:29:25

效果展示

代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>:root {--default-bac-color: #fefefe;--default-text-color: #000;}body {background: var(--default-bac-color);}.box {display: flex;justify-content: center;align-items: center;flex-direction: column;height: 80vh;}h2 {margin-bottom: 100px;font-size: 40px;color: var(--default-text-color);}/* 开关 */.switch {position: relative;width: 60px;height: 34px;}.switch input {display: none;}.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;border-radius: 34px;background-color: #867b7b85;transition: .4s;}.slider:before {position: absolute;content: "";height: 26px;width: 26px;left: 4px;bottom: 4px;background-color: white;border-radius: 50%;transition: .4s;}input:checked+.slider {background-color: rgb(78 84 88);}input:checked+.slider:before {transform: translateX(26px);}</style><title>改变白天和黑夜</title>
</head><body><div class="box"><h2>白天</h2><label class="switch"><input type="checkbox" checked><div class="slider"></div></label></div>
</body>
<script>window.onload = function () {addStyleAttrToRules()}/** *  给带有黑白天相关属性的class样式规则，添加新的css属性*/function addStyleAttrToRules() {// 获取样式表对象列表let styleSheets = document.styleSheetsfor (let i1 = 0; i1 < styleSheets.length; i1++) {let rules = styleSheets[i1].cssRules || styleSheets[i1].rules// 遍历样式表中的规则,例:a { width:100px}for (let i2 = 0; i2 < rules.length; i2++) {let { cssText } = rules[i2]if (cssText.includes('var(--default-bac-color)') || cssText.includes('var(--default-text-color)')) {// 为规则添加新的css属性rules[i2].style.setProperty('transition', 'all 2s')console.log(rules[i2].style);}}}}let box_but = document.querySelector('.box-but')let h2 = document.querySelector('h2')let switch_ele = document.querySelector('.switch input[type="checkbox"]')let day = {daytime: '白天',night: "黑夜"}switch_ele.addEventListener('click', () => {if (switch_ele.checked) {// 更改css全局变量// 白天document.documentElement.style.setProperty('--default-bac-color', '#fefefe')document.documentElement.style.setProperty('--default-text-color', '#000')h2.innerText = day.daytime} else {// 黑夜document.documentElement.style.setProperty('--default-bac-color', '#1a1a1a')document.documentElement.style.setProperty('--default-text-color', '#fff')h2.innerText = day.night}})</script></html>

PS: 以上的过渡效果，我嫌麻烦，用js加的，但是一旦选择器过多了，执行速率变慢，。。。，所以还是采用css样式加。嗯。。。

相关文章：

功能案例 -- 通过开关,改变白天和黑夜

效果展示 代码展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>:root {--default-bac-color: #f…...

编程日记 2023/11/12 14:49:39

Linux编写一个极简版本的Shell

Linux编写一个极简版本的Shell &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容在Linux环境下&#xff…...

编程日记 2023/11/12 14:48:38

亚马逊云AI应用科技创新下的Amazon SageMaker使用教程

目录 Amazon SageMaker简介 Amazon SageMaker在控制台的使用 模型的各项参数 pytorch训练绘图部分代码 Amazon SageMaker简介 亚马逊SageMaker是一种完全托管的机器学习服务。借助 SageMaker&#xff0c;数据科学家和开发人员可以快速、轻松地构建和训练机器学习模型&#…...

编程日记 2023/11/12 14:47:36

Eigen：旋转向量（Angle-Axis）转换为四元素和旋转矩阵

0. 在固定欧拉角系下。 绕固定系旋转&#xff0c;旋转的先后顺序为X、Y、Z。当然也支持XYZ的任意顺序旋转。 1. 转为四元素 Eigen::Quaterniond q Eigen::AngleAxisd(yaw, Eigen::Vector3d::UnitZ()) *Eigen::AngleAxisd(pitch, Eigen::Vector3d::UnitY()) *Eigen::AngleAxi…...

编程日记 2023/11/12 14:45:35

C#8.0本质论第十二章--泛型

C#8.0本质论第十二章–泛型 C#通过泛型来促进代码重用&#xff0c;在词义上等价于C模板。 在泛型编程中&#xff0c;数据类型也是一种参数。 12.1如果C#没有泛型 为object的方法使用值类型时&#xff0c;“运行时”将自动对它进行装箱&#xff0c;获取值类型的实例时则需要…...

编程日记 2023/11/12 14:44:33

Python与ArcGIS系列（七）自动化打印地图

目录 0 简述1 获取可用打印机列表2 打印地图3 导出地图至PDF4 导出地图至图像0 简述 本篇介绍如何利用arcpy实现获取可用打印机列表、打印地图、导出地图至PDF和图像。 1 获取可用打印机列表 通过arcpy提供的ListPrinterNames()函数可以生成可用的打印机列表。 import arcpy.m…...

编程日记 2023/11/12 14:42:31

基于STM32单片机抢答器设计

**单片机设计介绍&#xff0c; 基于STM32单片机抢答器设计-Proteus仿真 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于STM32单片机的抢答器设计可以用于教育和培训场景中的抢答游戏或考试环节。以下是一个基本的介绍设计步骤…...

编程日记 2023/11/12 14:40:30

冯·诺伊曼体系结构--操作系统

文章目录 1.认识冯诺依曼系统1.1约翰冯诺依曼1.2冯诺依曼结构1.3存储器的读写速度1.4对冯诺依曼结构的认识1.5冯诺依曼结构在生活中的演示 2.操作系统--“搞管理”的软件2.1概念2.2OS存在的意义2.3管理的方式2.4系统调用和库函数概念 1.认识冯诺依曼系统 1.1约翰冯诺依曼 1.2冯…...

编程日记 2023/11/12 14:39:30

IDEA插件开发--持久化配置信息方案

这里写自定义目录标题 配置信息持久化存储保存配置文件的方式每种方式的实现方案1.PropertiesComponent&#xff1a;2.PersistentStateComponent&#xff1a;3.Project Settings&#xff1a;4.外部文件&#xff1a; 5.数据库&#xff1a;6.加密数据&#xff1a;7,自定义配置文件…...

编程日记 2023/11/12 14:36:27

Vscode禁止插件自动更新

由于电脑的vscode版本不是很新。2022.10月份的版本1.7.2&#xff0c;电脑vscode的python插件装的也是2022年4月份的某个版本&#xff0c;但插件经常自动更新&#xff0c;导致python代码无法Debug,解决办法&#xff1a; 点设置&#xff0c;搜autoUpdate, 把红色框选成无...

编程日记 2023/11/12 14:35:25

Zookeeper篇---第六篇

系列文章目录 文章目录 系列文章目录一、请简述Zookeeper的选主流程二、为什么Zookeeper集群的数目，一般为奇数个？三、知道Zookeeper监听器的原理吗？一、请简述Zookeeper的选主流程 Zookeeper的核心是原子广播，这个机制保证了各个Server之间的同步。实现这个机制的协议叫做…...

编程日记 2023/11/12 14:33:24

mysql数据库存储过程之游标（光标cursor）

游标是用来存储查询结果集的数据类型&#xff0c;在存储过程和函数中可以使用游标对结果集进行循环的处理。游标的使用包括游标的声明、open、fetch和close。 一、语法。 #声明游标 declare 游标名称 cursor for 查询语句; #开启游标 open 游标名称; #获取游标记录 fetch 游标…...

编程日记 2023/11/12 14:31:22

「帝国风暴兵」加入 The Sandbox，推出真实的全新人物化身系列和体验！

我们很高兴宣布与流行文化中最具标志性的娱乐品牌 Shepperton 设计工作室的「帝国风暴兵」达成合作伙伴关系。这一合作标志着该科幻品牌首次进入元宇宙&#xff0c;让风暴兵的粉丝们以全新的方式体验「帝国风暴兵」。 在这个体验中&#xff0c;玩家将置身于帝国风暴兵的营地&am…...

编程日记 2023/11/12 14:29:20

asp.net员工管理系统VS开发sqlserver数据库web结构c#编程包括出差、请假、考勤

一、源码特点 asp.net员工管理系统是一套完善的web设计管理系统&#xff08;主要包括出差、请假、考勤基础业务管理&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010 &#xff0c;数据库为sqlserver2008&a…...

编程日记 2023/11/12 14:28:19

C++套接字库sockpp介绍

sockpp是一个开源、简单、现代的C套接字库&#xff0c;地址为&#xff1a;https://github.com/fpagliughi/sockpp&#xff0c;最新发布版本为0.8.1&#xff0c;license为BSD-3-Clause。目前支持Linux、Windows、Mac上的IPv4、IPv6和Unix域套接字。其它*nix和POSIX系统只需很少的…...

编程日记 2023/11/12 14:27:18

Mac M2开发环境安装

持续更新 brew 安装 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"JAVA多版本环境 ## 终端下载安装 brew install --cask temurin8 brew install --cask temurin11 brew install --cask temurin17## vim ~/.…...

编程日记 2023/11/12 14:26:17

Linux各种版本安装详细步骤和root密码破解

文章目录 VMware新建虚拟机硬件设置设置虚拟网络挂载ISO文件 root密码破解 VMware新建虚拟机 硬件设置 设置虚拟网络 编辑>虚拟网络编辑器>VMnet8(NAT模式) 挂载ISO文件 加电>开启次虚拟机 第二项可以检查挂载上来的iso文件是否完整没有破坏 磁盘分区 选自定义分…...

编程日记 2023/11/12 14:25:15

Netty - 回顾Netty高性能原理和框架架构解析

文章目录 概述JDK 原生 NIO 程序的问题Why Netty使用场景Related ProjectsNetty 高性能设计I/O 模型【阻塞 I/O】&#xff1a;【I/O 复用模型】【基于 Buffer】 线程模型事件驱动模型Reactor 线程模型Netty的线程模型异步处理 Netty框架的架构设计功能特性模块组件Bootstrap、S…...

编程日记 2023/11/12 14:24:15

uni-app——項目day01

配置uni-app開發環境 uni-app快速上手 | uni-app官网 创建项目 图中四个划线就是要配置的地方. 选择vue2还是vue3看个人选择。 目录结构 但是现在新版本创建的项目已经没有components目录了&#xff0c;需要自己创建。 项目运行到微信开发者工具 使用git管理项目 node-mod…...

编程日记 2023/11/12 14:23:14

【Java、MongoDB】程序控制非关系数据库

步骤&#xff1a; &#xff08;1&#xff09;连接 连接字符串 &#xff08;2&#xff09;CRUD 类与接口 解析 &#xff08;3&#xff09;maven管理方法 依赖 <dependency><groupId>org.mongodb</groupId><artifactId>mongodb-driver-legacy<…...

编程日记 2023/11/12 14:22:13

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2026/2/4 12:43:08

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2026/1/30 0:09:51

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

编程新知 2025/11/18 2:17:20

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36

云原生周刊：k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

编程新知 2025/12/1 3:15:17