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;
/*width: 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，思路~过程：
作者：一乐乐
