HTML中直接创建一个“onoff”图形开关包括css+script
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的样式和过渡效果，开关的视觉效果也会相应地发生变化，以反映复选框的新状态。