前端开关按钮的制成方式

最新推荐文章于 2024-04-30 14:40:32 发布

慕多

最新推荐文章于 2024-04-30 14:40:32 发布

阅读量717

点赞数

分类专栏：大前端文章标签：前端 html javascript

本文链接：https://blog.csdn.net/anzhengxv/article/details/126515100

版权

大前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!-- 开关按钮 -->
<p class="btn-on" onclick="on_off()">
  <!-- 圆点 -->
  <span class="btn-on-circle"></span>
  <!-- 文字 -->
  <span class="btn-on-text">ON</span>
</p>
<script>
  function on_off(type){
    var btn = document.getElementsByClassName("btn-on")[0];
    var circle = document.getElementsByClassName("btn-on-circle")[0];
    var text = document.getElementsByClassName("btn-on-text")[0];

    if(!type){
      btn.style= "background-color: #ccc;"
      circle.style="left: 40px;background-color: #888;box-shadow: 0 0 10px #888;";
      text.style="right: 30px;color: #888;";
      text.innerText="OFF";
    } else {
      btn.style= ""
      circle.style="";
      text.style="";
      text.innerText="ON";
    }
    btn.setAttribute("onclick", "on_off(" + !type + ")"); // 修改状态
  }
  on_off(false)// 关闭按钮
</script>
<style>
  /* 开关按钮 */
  .btn-on{
    width: 60px;
    height: 25px;
    margin: 0 3px;
    border-radius: 25px;
    font-size: 14px;
  }
  .btn-on{
    cursor: pointer;
    position: relative;
    border: 1px solid white;
    background-color: #12B090;
  }
  .btn-on-circle{
    position: absolute;
    width: 15px;
    height: 15px;
    top: 5px;
    left: 5px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: 0 0 10px white;
    transition: all .5s;
  }
  .btn-on-text{
    position: absolute;
    right: 10px;
    line-height: 25px;
    color: white;
    transition: all .5s;
  }
</style>

上面是一个通过js控制样式实现改变状态的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btnArea{
            display: flex;
            flex-direction: row;
            margin-bottom: 16px;
        }
        .btnArea{
            margin-left: 0;
        }
        .set{
            position: relative;
            width: 142px;
            line-height: 36px;
            letter-spacing: 0;
            text-align: center;
            font-size: 15px;
            background-color: #ffffff;
        }
        .set input[type="checkbox"]{
            display: none;
        }
        .set label{
            display: block;
            box-sizing: border-box;
            height: 36px;
            border: 2px solid red;
            border-radius: 18px;
        }
        .set label span:after{
            content: "off";
            padding: 0 0 0 21px;
            color: #666666;
            font-weight: bold;
        }
        .set.setCircle{
            position: absolute;
            width: 28px;
            height: 28px;
            background: blueviolet;
            top: 4px;
            left: 4px;
            border-radius: 14px;
            transition: .2s;
        }
        .set input[type="checkbox"]:checked+label span:after{
            content: "on";
            padding: 0 21px 0 0;
            color: chartreuse;
            font-weight: bold;
        }
        .set .setCircle{
            position: absolute;
            width: 28px;
            height: 28px;
            background: #666666;
            top: 4px;
            left: 4px;
            border-radius: 14px;
            transition: .2s;
        }
        .set input[type="checkbox"]:checked+label span:after{
            content:"on" ;
            padding: 0 21px 0 0;
            color: chartreuse;
            font-weight: bold;
        }
        .set input[type="checkbox"]:checked+label span:after{
            border-color:#3367DA ;

        }
        .set input[type="checkbox"]:checked~ .setCircle{
            transform: translateX(100px);
            background: gold;
        }



    </style>
</head>
<body>
<div class="btnArea">
    <div class="set">
        <input type="checkbox" id="xiaobiesan"><label for="xiaobiesan"><span></span></label>
        <div class="setCircle"></div>
    </div>
</div>



</body>
</html>

上面是通过纯css样式通过对checkbox的状态实现checkbox是多选框通常是有 checked和没被check状态两种情况对应两种样式

label 通过id绑定input的多选框