圆形不封闭进度条实现
如上图所示,如何实现这种圆形且不封闭的进度条
我的思路是:
首先建立一个div装这个进度条,并将其旋转-120度
将其分为两个相等的div
两边各画一个圆,将圆加上border变成圆环,将一半的圆环颜色置为透明,在外部容器修改成溢出隐藏overflow: hidden;通过旋转达到意图效果,实现进度条底色的显示
再在两边绘制两个圆环,通过让一半圆环透明变成两个半圆环,颜色换成进度条颜色,再经过旋转达到初始位置,左半圆是红色,右半圆是黄色,排布如下图
在输入数值后,通过js的运算判断,两个圆环旋转达到以下效果
将两种圆环的颜色换成相同颜色后,就完美实现效果
源代码如下
<!DOCTYPE html>
<html>
<head>
<title>圆形未封闭进度条</title>
</head>
<body>
<div class="container">
<div class="progress">
<div class="wrapper right">
<div class="circle rightcircle-box"></div>
<div class="circle rightcircle" id="right"></div>
</div>
<div class="wrapper left">
<div class="circle leftcircle-box"></div>
<div class="circle leftcircle" id="left"></div>
</div>
</div>
<div class="input">
<input type="text" id="num">
<button id="btn">点击</button>
</div>
<p id="score"></p>
</div>
<script type="text/javascript">
function circleOfScore(index) {
var score = index ? index : 0;
var right = 100 * 180 / 270;
var left = 100 - right;
var rightDeg;
var leftDeg;
var rightCircle = document.getElementById("right");
var leftCircle = document.getElementById("left");
var scorenum = document.getElementById("score");
scorenum.innerHTML = index;
if (score <= right) {
rightDeg = score / right * 180 - 135;
leftDeg = -135;
} else if (score < 100) {
rightDeg = 45;
leftDeg = (score - right) / 100 * 135 - 135;
} else {
rightDeg = 45;
leftDeg = -75;
}
rightCircle.style.transform = 'rotate(' + rightDeg + 'deg)';
leftCircle.style.transform = 'rotate(' + leftDeg + 'deg)';
}
var btn = document.getElementById("btn");
btn.onclick = function() {
var num = document.getElementById("num").value;
circleOfScore(num);
}
</script>
<style type="text/css">
/* 圆环 */
.container {
width: 475px;
height: 600px;
}
.progress {
position: relative;
width: 400px;
height: 400px;
bottom: -40px;
top: 206px;
left: 268px;
transform: rotate(-120deg);
}
.progress .wrapper {
width: 200px;
height: 400px;
position: absolute;
top: 0;
overflow: hidden;
}
.progress .left {
left: 0;
}
.progress .right {
right: 0;
}
.progress .circle {
width: 384px;
height: 384px;
border: 8px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.progress .rightcircle-box {
border-top: 8px solid #99edd1;
border-right: 8px solid #99edd1;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
right: 0;
transform: rotate(45deg);
}
.progress .leftcircle-box {
border-bottom: 8px solid #99edd1;
border-left: 8px solid #99edd1;
border-top: 8px solid transparent;
border-right: 8px solid transparent;
left: 0;
transform: rotate(-75deg);
}
.progress .rightcircle {
border-top: 8px solid yellow;
border-right: 8px solid yellow;
animation: mymove 5s infinite;
right: 0;
}
.progress .leftcircle {
border-bottom: 8px solid yellow;
border-left: 8px solid yellow;
left: 0;
}
p {
position: absolute;
z-index: 3;
top: 257px;
left: 240px;
width: 475px;
font-size: 81px;
text-align: center;
}
.input {
position: absolute;
top: 560px;
left: 405px;
}
.input input {
width: 100px;
height: 60px;
font-size: 40px;
}
.input button {
height: 50px;
width: 80px;
}
</style>
</body>
</html>