最近在学习前端的一些知识，发现border的功能十分强大啊!
首先来看看demo
就是这么一个圆形的进度条，在文本框中输入0-100的数值下面的进度条相应的转到多少
这个主要是利用border，旋转和css动画来实现的，主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形，再利用旋转div的角度来调整显示
上代码：
html+css+js(这里引入了jquery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="KeyWord" content="cicle,learning">
<meta name="description" content="cicle-learning">
<meta name="Author" content="alsy">
<title>圆形进度条</title>
<!-- style-start -->
<!-- style-end -->
<style>
.content {
width: 400px;
height: 400px;
margin: 10px auto 100px;
}
.content .input{
position: relative;
margin: 40px auto;
}
.content .cicle {
position: relative;
margin: 100px auto;
width: 100px;
height: 100px;
border-width: 20px;
border-color: red;
border-style: solid;
border-radius: 50%;
}
.content .cicle .bar {
position: absolute;
width: 70px;
height: 140px;
overflow: hidden;
}
.content .cicle .bar-left {
top: -20px;
left: -20px;
}
.content .cicle .bar-left .bar-left-an{
position: absolute;
z-index: 10;
width: 100px;
height: 100px;
border-width: 20px;
border-color: transparent transparent green green;
border-style: solid;
border-radius: 50%;
transform: rotate(-135deg);
}
.content .cicle .bar-right {
top: -20px;
left: 50px;
}
.content .cicle .bar-right .bar-right-an {
position: absolute;
left: -70px;
z-index: 20;
width: 100px;
height: 100px;
border-width: 20px;
border-color: green green transparent transparent;
border-style: solid;
border-radius: 50%;
transform: rotate(-135deg);
}
.content .cicle .tx {
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 20px;
font-weight: 800;
color: green;
}
</style>
</head>
<body>
<div class="content">
<div class="input">
<label>进度条:</label><input type="text" id="inp"/>
</div>
<div class="cicle">
<div class="bar bar-left">
<div class="bar-left-an"></div>
</div>
<div class="bar bar-right">
<div class="bar-right-an"></div>
</div>
<div class="tx">0%</div>
</div>
</div>
<!-- import-js -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- import-my-js -->
<script type="text/javascript">
$(document).ready(function() {
var cicle = cle = function() {
var oTx = $(".tx");
var cicleTransform = function(num, old_num) {
var b_l_a = $(".bar-left-an");
var b_r_a = $(".bar-right-an");
var c_num = num;
if(c_num > 50) {
b_r_a.css({
"transform": "rotate(45deg)",
"transition": "transform 1s linear"
});
setTimeout(function() {
b_l_a.css({
"transform": "rotate(" + (((c_num-50)/100*360)-135) + "deg)",
"transition": "transform 1s linear"
});
},1000);
} else {
if(old_num > 50) {
setTimeout(function() {
b_r_a.css({
"transform": "rotate(" + ((c_num/100*360)-135) + "deg)",
"transition": "transform 1s linear"
});
},1000);
b_l_a.css({
"transform": "rotate(-135deg)",
"transition": "transform 1s linear"
});
} else {
b_r_a.css({
"transform": "rotate(" + ((c_num/100*360)-135) + "deg)",
"transition": "transform 1s linear"
});
}
}
}
var setnum = function(num) {
oTx.text(num + "%");
}
var getnum = function() {
return parseInt(oTx.text());
}
var inputB = function() {
$("#inp").blur(function() {
var num = parseInt($.trim( $(this).val() ));
if(num>=0 && num <= 100){
cicleTransform(num, getnum());
setnum(num);
}else{
alert("输入100以内的数值！");
}
});
}
return {
init: function() {
inputB();
}
}
}();
cicle.init();
});
</script>
</body>
</html>
时间： 2024-12-16 02:36:49