功能案例 -- 通过开关,改变白天和黑夜
效果展示
代码展示
<!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…...
Linux编写一个极简版本的Shell
Linux编写一个极简版本的Shell 📟作者主页：慢热的陕西人 🌴专栏链接：Linux 📣欢迎各位大佬👍点赞🔥关注🚓收藏，🍉留言 本博客主要内容在Linux环境下ÿ…...
亚马逊云AI应用科技创新下的Amazon SageMaker使用教程
目录 Amazon SageMaker简介 Amazon SageMaker在控制台的使用 模型的各项参数 pytorch训练绘图部分代码 Amazon SageMaker简介 亚马逊SageMaker是一种完全托管的机器学习服务。借助 SageMaker，数据科学家和开发人员可以快速、轻松地构建和训练机器学习模型&#…...
Eigen：旋转向量（Angle-Axis）转换为四元素和旋转矩阵
0. 在固定欧拉角系下。 绕固定系旋转，旋转的先后顺序为X、Y、Z。当然也支持XYZ的任意顺序旋转。 1. 转为四元素 Eigen::Quaterniond q Eigen::AngleAxisd(yaw, Eigen::Vector3d::UnitZ()) *Eigen::AngleAxisd(pitch, Eigen::Vector3d::UnitY()) *Eigen::AngleAxi…...
C#8.0本质论第十二章--泛型
C#8.0本质论第十二章–泛型 C#通过泛型来促进代码重用，在词义上等价于C模板。 在泛型编程中，数据类型也是一种参数。 12.1如果C#没有泛型 为object的方法使用值类型时，“运行时”将自动对它进行装箱，获取值类型的实例时则需要…...
Python与ArcGIS系列（七）自动化打印地图
目录 0 简述1 获取可用打印机列表2 打印地图3 导出地图至PDF4 导出地图至图像0 简述 本篇介绍如何利用arcpy实现获取可用打印机列表、打印地图、导出地图至PDF和图像。 1 获取可用打印机列表 通过arcpy提供的ListPrinterNames()函数可以生成可用的打印机列表。 import arcpy.m…...
基于STM32单片机抢答器设计
**单片机设计介绍， 基于STM32单片机抢答器设计-Proteus仿真 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于STM32单片机的抢答器设计可以用于教育和培训场景中的抢答游戏或考试环节。以下是一个基本的介绍设计步骤…...
冯·诺伊曼体系结构--操作系统
文章目录 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冯…...
IDEA插件开发--持久化配置信息方案
这里写自定义目录标题 配置信息持久化存储保存配置文件的方式每种方式的实现方案1.PropertiesComponent：2.PersistentStateComponent：3.Project Settings：4.外部文件： 5.数据库：6.加密数据：7,自定义配置文件…...
Vscode禁止插件自动更新
由于电脑的vscode版本不是很新。2022.10月份的版本1.7.2，电脑vscode的python插件装的也是2022年4月份的某个版本，但插件经常自动更新，导致python代码无法Debug,解决办法： 点设置，搜autoUpdate, 把红色框选成无...
Zookeeper篇---第六篇
系列文章目录 文章目录 系列文章目录一、请简述Zookeeper的选主流程二、为什么Zookeeper集群的数目，一般为奇数个？三、知道Zookeeper监听器的原理吗？一、请简述Zookeeper的选主流程 Zookeeper的核心是原子广播，这个机制保证了各个Server之间的同步。实现这个机制的协议叫做…...
mysql数据库存储过程之游标（光标cursor）
游标是用来存储查询结果集的数据类型，在存储过程和函数中可以使用游标对结果集进行循环的处理。游标的使用包括游标的声明、open、fetch和close。 一、语法。 #声明游标 declare 游标名称 cursor for 查询语句; #开启游标 open 游标名称; #获取游标记录 fetch 游标…...
「帝国风暴兵」加入 The Sandbox，推出真实的全新人物化身系列和体验！
我们很高兴宣布与流行文化中最具标志性的娱乐品牌 Shepperton 设计工作室的「帝国风暴兵」达成合作伙伴关系。这一合作标志着该科幻品牌首次进入元宇宙，让风暴兵的粉丝们以全新的方式体验「帝国风暴兵」。 在这个体验中，玩家将置身于帝国风暴兵的营地&am…...
asp.net员工管理系统VS开发sqlserver数据库web结构c#编程包括出差、请假、考勤
一、源码特点 asp.net员工管理系统是一套完善的web设计管理系统（主要包括出差、请假、考勤基础业务管理），系统具有完整的源代码和数据库，系统主要采用B/S模式开发。开发环境为vs2010 ，数据库为sqlserver2008&a…...
C++套接字库sockpp介绍
sockpp是一个开源、简单、现代的C套接字库，地址为：https://github.com/fpagliughi/sockpp，最新发布版本为0.8.1，license为BSD-3-Clause。目前支持Linux、Windows、Mac上的IPv4、IPv6和Unix域套接字。其它*nix和POSIX系统只需很少的…...
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 ~/.…...
Linux各种版本安装详细步骤和root密码破解
文章目录 VMware新建虚拟机硬件设置设置虚拟网络挂载ISO文件 root密码破解 VMware新建虚拟机 硬件设置 设置虚拟网络 编辑>虚拟网络编辑器>VMnet8(NAT模式) 挂载ISO文件 加电>开启次虚拟机 第二项可以检查挂载上来的iso文件是否完整没有破坏 磁盘分区 选自定义分…...
Netty - 回顾Netty高性能原理和框架架构解析
文章目录 概述JDK 原生 NIO 程序的问题Why Netty使用场景Related ProjectsNetty 高性能设计I/O 模型【阻塞 I/O】：【I/O 复用模型】【基于 Buffer】 线程模型事件驱动模型Reactor 线程模型Netty的线程模型异步处理 Netty框架的架构设计功能特性模块组件Bootstrap、S…...
uni-app——項目day01
配置uni-app開發環境 uni-app快速上手 | uni-app官网 创建项目 图中四个划线就是要配置的地方. 选择vue2还是vue3看个人选择。 目录结构 但是现在新版本创建的项目已经没有components目录了，需要自己创建。 项目运行到微信开发者工具 使用git管理项目 node-mod…...
【Java、MongoDB】程序控制非关系数据库
步骤： （1）连接 连接字符串 （2）CRUD 类与接口 解析 （3）maven管理方法 依赖 <dependency><groupId>org.mongodb</groupId><artifactId>mongodb-driver-legacy<…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
C++.OpenGL （20/64）混合（Blending）
混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好，我是java1234_小锋老师，看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】，分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...