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复选框元素，用于存储开关的状态（开或关）。
：标签元素与复选框相关联（通过for属性与复选框的id属性相匹配），使得点击标签时也能触发复选框的点击事件。
… 和 …：这两个元素用于通过CSS来创建开关的视觉效果。.onoffswitch-inner包含“ON”和“OFF”文本，而.onoffswitch-switch是开关的滑动部分。
CSS
CSS部分负责开关的样式和动画效果。

.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的样式和过渡效果，开关的视觉效果也会相应地发生变化，以反映复选框的新状态。