html、css、js三件套实现的操作栏（模仿antDesign的单选框通过js实现单选框激活效果）

html、css、js三件套实现的操作栏（模仿antDesign的单选框通过js实现单选框激活效果）

1，效果：

2，代码：

❀ Model_antDesign.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作栏</title>
    <link rel="stylesheet" type="text/css" href="ys-Model_antDesign.css">
    <link rel="stylesheet" type="text/css" href="Model_antDesign.css">
</head>
<body>
<section>
    <div class="container">
        <!-- 操作栏  -->
        <form method="post" >
            <div class="operation">
                <!-- 操作块-->
                <div class="ipt-box">
                    <label for="stuName">学生姓名</label>
                    <input class="ipt" type="text" name="stuName" id="stuName" autocomplete="off">
                </div>
                <div class="ipt-box">
                    <label>班级</label>
                    <select class="ipt grade">
                        <option class="hidden">请选择班级:</option>
                        <option>初一1班</option>
                        <option>初二1班</option>
                        <option>初三1班</option>
                    </select>
                </div>
                <div class="ipt-box sex">
                    <label>性别</label>
                    <!-- 自定义的单选框插件  -->
                    <div class="ys-radio-group">
                        <div class="ys-radio active" data-value="man" data-show="男"></div>
                        <div class="ys-radio" data-value="woMan" data-show="女"></div>
                    </div>
                </div>
                <div class="ipt-box">
                    <label for="age">年龄</label>
                    <input class="ipt" type="text" name="age" id="age" autocomplete="off">
                </div>
                <input class="btn" type="submit" value="提交学生信息">
            </div>
        </form>
    </div>
</section>
</body>
<script type="text/javascript" src="ys-Model_antDesign.js"></script>
<script type="text/javascript" src="Model_antDesign.js"></script>
</html>

❀ Model_antDesign.css

body{
    margin: 0;
}
.container{
    width: 1077px;
    margin: 50px auto;
}
.hidden{
    display: none;
}
.operation{
    display: flex;
    align-items: center;
}
/*   模仿antDesign的输入框设计---通用输入框样式  */
.ipt{
    height:32px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    outline: none;
/* 过渡边框颜色动画*/
    transition: all .2s linear;
    border-radius: 3px;
    color: #262626;
    text-indent: .8em;
}
.ipt:hover{
    border: 1px solid #1890ff;
}
.ipt:focus{
    box-shadow: 0 0 0 2px #d1e9ff;
}
.operation .ipt-box + .ipt-box {
    margin-left: 20px;
}
.operation .ipt-box .grade{
    width: 120px;
}
/* 模仿antDesign的按钮设计--通用按钮设计 */
.btn{
    display: inline-block;
    /* 92px;*/
    /*height:30px;*/
    padding: 8px 15px;
    /*box-sizing:border-box;*/
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 3px;
    transition: all .2s linear;
    cursor: pointer;
}
.btn:hover{
    border: 1px solid #40a9ff;
}
.btn:active{
    box-shadow: 0 0 0 2px #d1e9ff;
}
.operation .btn{
    margin-left: 20px;
}

❀ys-Model_antDesign.css

/**
* 功能:自定义插件的css文档
* 作者:一乐
* 时间:2021/7/29
* 地点:一乐乐家园
*/

.ys-radio{
    width: 16px;
    height: 16px;
    box-sizing:border-box;
    border: 1px solid #f1f1f1;
    border-radius: 50%;
    cursor: pointer;
    transition: all .2s linear;

}
.ys-radio:hover{
    border: 1px solid #1890ff;
}

/* 实心圆 */
/* 实心圆居中 */
/*激活后实心圆立马消失的bug~~~~因为active 是作为类标签非那个伪类啦*/
.ys-radio.active{
    border: 1px solid #1890ff;
    box-shadow: 0 0 0 2px #d1e9ff;
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;
}
.ys-radio.active:after{
    content:'';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1890ff;
    transition: all .2s linear;
}
.operation .ipt-box.sex{
    display: flex;
    align-items: center;
}
.operation .ipt-box .ys-radio-group{
    display: flex;
    align-items: center;
}
.operation .sex .ys-radio-group .ys-radio{
    margin: 0 5px;
}
/* 实现光晕效果 */
.ys-radio.active:before{
    content: '';
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    animation: ys-radio-animate .2s linear;
}
@keyframes ys-radio-animate {
    from{
        width: 0;
        height: 0;
    }
    to{
        width: 24px;
        height: 24px;
    }
}

❀ys-Model_antDesign.js

/**
* 功能:自定义插件的js文档
* 作者:一乐
* 时间:2021/7/30
* 地点:一乐乐家园
*/

/***
 * 自定义的单选框的激活效果的构建
 */
function ysRadioInit(){
    //获取单选框组合
    let ys_radio_group = document.querySelectorAll('.ys-radio-group');
    //遍历单选框组合
    ys_radio_group.forEach(function (value,index) {
        if(value.getAttribute('data-ysRadioInit') === 'true') return;
        //获取单选框组合的内容
        let ys_radios = value.querySelectorAll('.ys-radio');
        //遍历获取每个单选框,并为之添加事件~实现点击激活的效果
        ys_radios.forEach(function (value2,index) {
            value2.addEventListener('click',function (e) {
                //去除已经选择的单选框样式
                ys_radios.forEach(function (value3,index) {
                    value3.classList.remove('active');
                });
                value2.classList.add('active');
            });

            //为单选框添加文本
            let ys_radio_txt = value2.getAttribute('data-show');
            let span = document.createElement('span');
            //span内置文本
            span.innerText = ys_radio_txt;
            //将span添加到单选框后边
            value.insertBefore(span,value2.nextElementSibling);

            //为元素添加一个标记属性，标记是否已经初始化
            value.setAttribute('data-ysRadioInit','true');
        });
    });
}

❀Model_antDesign.js

window.onload= function (){
    //初始化单选框
    ysRadioInit();
    //设置定期循环刷新
    setTimeout(ysRadioInit,3000);
}

3，思路~过程：