简易进度条

最新推荐文章于 2024-02-28 16:33:18 发布

Xmh0111

最新推荐文章于 2024-02-28 16:33:18 发布

阅读量165

点赞数

文章标签：简易进度条进度条前端简易进度条

本文链接：https://blog.csdn.net/Xmh1027/article/details/80973807

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>进度条</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
text-align: center;
}
em{
font-style: normal;
}
#progress-bar{
margin-top: 220px;
margin-bottom:110px;
}
#progress-bar>div{
display: inline-block;
}
#progress-bar span{
width: 26px;
height: 10px;
float: left;
box-sizing: border-box;
border-right: 1px solid #FFFFFF;
}
#progress-bar>div span:last-child{
border: none;
}
#progress-bar em{
font-size: 12px;
color: #D8D8D8;
letter-spacing: 0.21px;
margin-left: 16px;
}
.progress-bar-weak div span{
background:#D0021B;
}
.progress-bar-weak div span:nth-of-type(n+3){
background:#D8D8D8;
}
.progress-bar-weak em:nth-of-type(1){
color: #D0021B !important;
}
.progress-bar-just div span{
background:#FBA026;
}
.progress-bar-just div span:nth-of-type(n+5){
background:#D8D8D8;
}
.progress-bar-just em:nth-of-type(2){
color: #FBA026 !important;
}
.progress-bar-strong div span{
background:#7ED321;
}
.progress-bar-strong div span:nth-of-type(n+6){
background:#D8D8D8;
}
.progress-bar-strong em:nth-of-type(3){
color: #7ED321 !important;
}
/*按钮*/
.btn-box em{
display:inline-block;
width: 66px;
height: 22px;
line-height: 22px;
background:pink;
color:#4A4A4A;
border-radius:3px;
font-size: 14px;
cursor: pointer;
}
.btn-box em:hover{
background:#FFFFFF;
box-sizing: border-box;
border: 1px solid pink;
}
.btn-box em:nth-of-type(2){
margin:0px 26px;
}
</style>
</head>
<body>
<div id="progress-bar" class="progress-bar-strong">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<em>弱</em>
<em>中</em>
<em>强</em>
</div>
<div class="btn-box">
<em>弱</em>
<em>中</em>
<em>强</em>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(".btn-box em").on('click',function(){
var btnIndex = $(this).index();
switch (btnIndex){
case 0:
$("#progress-bar").removeClass();
$("#progress-bar").addClass('progress-bar-weak');
break;
case 1:
$("#progress-bar").removeClass();
$("#progress-bar").addClass('progress-bar-just');
break;
case 2:
$("#progress-bar").removeClass();
$("#progress-bar").addClass('progress-bar-strong');
break;
default:
break;
}
});
</script>
</html>

Xmh0111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易进度条

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;进度条&lt;/title&gt;&lt;style type="text/css"&gt;*{margin: 0px;padding: 0px;}body{
复制链接

扫一扫