1. HTML中直接创建一个“onoff”图形开关
下面是一个完整的HTML文档示例
在HTML中直接创建一个“onoff”图形开关（通常指的是一个类似于物理开关的UI组件，可以切换开或关的状态），并不直接支持，因为HTML主要用于内容的结构化，而不是复杂的用户界面组件。然而，你可以通过结合HTML、CSS和JavaScript（可能还需要使用JavaScript库或框架）来实现这样的效果。
以下是一个简单的例子，展示如何使用HTML（用于结构）、CSS（用于样式）和JavaScript（用于交互）来创建一个基本的图形开关
在这个完整的HTML文档中，我已经将CSS样式直接放在了<head>部分的<style>标签内，以简化示例。在实际项目中，你可能会选择将CSS样式放在一个外部文件中，并通过<link>标签在<head>部分引入它。同样地，JavaScript代码也可以被放在一个外部文件中，并通过<script src="your-script.js"></script>标签在文档的底部或<head>部分（尽管推荐放在底部以加快页面加载速度）引入。
请注意，我在<head>部分还添加了`<meta charset="UTF-8">和<meta name="viewport" content="width=device-width, initial-scale=1.0">`这两个标签，它们对于现代网页来说是非常重要的。第一个标签指定了文档使用的字符编码，而第二个标签则控制了视口（viewport）的行为，确保网页能够在不同设备上正确显示
2. 一个单独html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graphical On/Off Switch</title>
<style>
/* 这里粘贴上面提供的CSS代码 */
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
/* ... (继续粘贴CSS代码) ... */
</style>
</head>
<body>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<script>
// 这里可以添加JavaScript代码
// 例如，监听开关的变化
document.querySelector('.onoffswitch-checkbox').addEventListener('change', function(e) {
if (this.checked) {
console.log('Switch is ON');
} else {
console.log('Switch is OFF');
}
});
</script>
</body>
</html>
3. HTML、css、script分开
//switch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graphical On/Off Switch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<script src="script.js"></script>
</body>
</html>
//styles.css
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
//script.js
可以通过JavaScript来监听开关的变化，并执行一些操作（如发送AJAX请求、更改其他元素的样式等）
document.querySelector('.onoffswitch-checkbox').addEventListener('change', function(e) {
if (this.checked) {
console.log('Switch is ON');
} else {
console.log('Switch is OFF');
}
});
4. 效果
5. 原理说明
下面我将分别解释这三个部分是如何工作的：
HTML
HTML部分定义了开关的结构。它包含一个隐藏的复选框（<input type=“checkbox” …>），这个复选框是实际控制开关状态的元素，但由于它默认是不可见的，所以我们通过CSS来美化它的显示方式。
<input type=“checkbox” …>：这是一个标准的HTML复选框元素，用于存储开关的状态（开或关）。
.onoffswitch：定义了开关的整体样式，如宽度和禁止用户选择文本。
.onoffswitch-checkbox：将复选框隐藏起来，因为我们不希望用户直接看到或与之交互。
.onoffswitch-label：定义了开关标签的样式，包括边框、圆角等。
.onoffswitch-inner 和 .onoffswitch-inner:before, .onoffswitch-inner:after：.onoffswitch-inner是包含“ON”和“OFF”文本的容器，而:before和:after伪元素分别用于显示这两个文本。通过调整margin-left属性，我们可以控制这两个文本（即开关的两端）的显示位置。
.onoffswitch-switch：定义了开关滑动部分的样式，包括大小、位置、背景色和边框等。当复选框被选中时，这个部分会移动到另一边，从而改变开关的显示状态。
过渡效果（transition）：在.onoffswitch-inner和.onoffswitch-switch上使用了过渡效果，使得开关的切换动作更加平滑。
JavaScript
JavaScript部分用于增强开关的交互性。
document.querySelector(‘.onoffswitch-checkbox’).addEventListener(‘change’, function(e) { … })：这行代码为复选框添加了一个事件监听器，监听change事件（即复选框的状态发生变化时）。当事件发生时，会执行一个回调函数，该函数检查复选框的checked属性，并根据其值在控制台输出相应的信息。
工作原理总结
用户点击开关的标签部分。
由于标签与隐藏的复选框相关联，点击标签会触发复选框的点击事件。
复选框的状态（选中或未选中）发生变化，并触发change事件。
JavaScript事件监听器捕获到这个change事件，并执行回调函数。
回调函数检查复选框的checked属性，并根据其值输出相应的信息到控制台。
同时，由于CSS的样式和过渡效果，开关的视觉效果也会相应地发生变化，以反映复选框的新状态。
![[数据集][目标检测]中草药类型识别检测数据集VOC+YOLO格式7976张45类别](https://i-blog.csdnimg.cn/direct/fae35916c93a48a185df538396ff18d7.png)
