小編給大家分享一下如何利用前端基礎制作html開關圖標，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
我們先來看下效果圖：
html代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>開關圖標</title>
</head>
<body>
<div>
<div>
<input type="checkbox" id="toggle-button" name="switch" οnclick="SwitchClick()" checked>
<label for="toggle-button">
<span></span>
<span class="text on">ON</span>
<span class="text off">OFF</span>
</label>
</div>
</div>
</body>
</html>css樣式：
<style type="text/css">
body {
text-align: center
}
.SwitchIcon {
margin: 200px auto;
}
#toggle-button {
display: none;
}
.button-label {
position: relative;
display: inline-block;
width: 80px;
height: 30px;
background-color: #ccc;
box-shadow: #ccc 0px 0px 0px 2px;
border-radius: 30px;
overflow: hidden;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
}
.button-label .text {
line-height: 30px;
font-size: 18px;
text-shadow: 0 0 2px #ddd;
}
.on {
color: #fff;
display: none;
text-indent: -45px;
}
.off {
color: #fff;
display: inline-block;
text-indent: 34px;
}
.button-label .circle {
left: 0;
transition: all 0.3s;
}
#toggle-button:checked + label.button-label .circle {
left: 50px;
}
#toggle-button:checked + label.button-label .on {
display: inline-block;
}
#toggle-button:checked + label.button-label .off {
display: none;
}
#toggle-button:checked + label.button-label {
background-color: #19e236;
}
.div {
height: 20px;
width: 30px;
background: #51ccee;
}
</style>js邏輯：
<script type="text/javascript">
//窗體加載
window.onload = function () {
var onoffswitch = document.getElementById("toggle-button");
onoffswitch.checked = true;
}
//測試開始
function SwitchClick() {
var onoffswitch = document.getElementById("toggle-button");
var label = document.getElementById("batteryIconContent");
if (onoffswitch.checked) {
//調用后臺
}
else {
//調用后臺
}
}
</script>看完了這篇文章，相信你對如何利用前端基礎制作html開關圖標有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
