原生手写开关

最新推荐文章于 2023-05-24 16:41:02 发布

_心如止水

最新推荐文章于 2023-05-24 16:41:02 发布

阅读量211

点赞数

分类专栏： css javascript

本文链接：https://blog.csdn.net/qq_42822054/article/details/103619586

版权

javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

.switch-box {
            float: right;
            width: 80px;
            height: 32px;
            font-size: 14px;
            line-height: 32px;
        }
        .switch-box div {
            float: right;
            margin-left: 5px;
        }
        .switch {
            width: 44px;
            height: 22px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #dddddd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none !important;
        }
        .switch:before {
            content: '';
            text-align: center;
            line-height: 20px;
            color: #999999;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .switch::after {
            left: 23px;
            content: attr(data-text);
            position: absolute;
            color: #fff;
        }
        .switch:checked {
            border-color: #253DA3;
            box-shadow: #2E84FF 0 0 0 16px inset;
            background-color: #2E84FF;
        }
        .switch:checked:before {
            left: 22px;
        }
        .switch:checked:after {
            left: 6px;
        }
        .switch.switch-anim {
            transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
        }
        .switch.switch-anim:before {
            transition: left 0.3s;
        }
        .switch.switch-anim:checked {
            box-shadow: #2E84FF 0 0 0 16px inset;
            background-color: #2E84FF;
            transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
        }
        .switch.switch-anim:checked:before {
            transition: left 0.3s;
        }

<div class="switch-box">
            <input class="switch switch-anim" type="checkbox" data-text="×"></input>
            <div>环比</div>
        </div>

var btn = document.querySelectorAll(".switch");
        var controls = 1;
        btn[0].onclick = function() {
            
            controls = controls * (-1);
            if (controls > 0) {
                switchs = document.querySelectorAll('.switch')[0].setAttribute('data-text', '×');
                document.querySelectorAll('.fixed-table-container')[0].style.display = 'none';
                document.querySelectorAll('.fixed-table-container')[1].style.display = 'block'
                document.querySelectorAll('.table-show')[0].style.display = 'none';
                document.querySelectorAll('.table-hidden')[0].style.display = 'block';
                show(datas2, '#table1');
            } else {
                document.querySelectorAll('.switch')[0].setAttribute('data-text', '√');
                document.querySelectorAll('.fixed-table-container')[0].style.display = 'block';
                // document.querySelectorAll('.bootstrap-table')[1].style.display = 'none';
                document.querySelectorAll('.table-show')[0].style.display = 'block';
                document.querySelectorAll('.table-hidden')[0].style.display = 'none';
                show(datas1, '#table');
                document.querySelectorAll('.fixed-table-container')[1].style.display = 'none';
                console.log();
            }
        }