注意这个增加是渐变的，就是：1,2,3,4,5,6,7,8....95,96,97,98,99,100
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: #2C3437;
}
.pie {
width: 200px;
height: 200px;
background-color: white;
border-radius: 100px;
position: absolute;
}
.pie1 {
clip: rect(0px,200px,200px,100px);
}
.pie2 {
clip: rect(0px,100px,200px,0px);
}
.hold {
width: 200px;
height: 200px;
position: absolute;
z-index: 1;
}
.hold1 {
clip: rect(0px,200px,200px,100px);
}
.hold2 {
clip: rect(0px,100px,200px,0px);
}
.bg {
width: 200px;
height: 200px;
background-color: green;
border-radius: 100px;
position: absolute;
}
.time {
width: 160px;
height: 160px;
margin: 20px 0 0 20px;
background-color: #2C3437;
color: white;
border-radius: 100px;
position: absolute;
z-index: 1;
text-align: center;
芦穗 line-height: 160px;
}
</style>
</head>
<body>
<div class="hold hold1">
<div class="pie pie1"></div>
</div>
<div class="hold hold2">
<div class="pie pie2"></div>
</div>
<div class="bg"></div>
<div class="time">0</div>
<script src="jquery-1.8.0.min.js"></script>
<script>
i = 0;
j = 0;
count = 0;
function start1() {
i = i + 0.6;
岩空 count = count + 1;
if (count >= 300) {
count = 0;
粗哗瞎 clearInterval(t1);
t2 = setInterval("start2()", 10);
};
$(".time").text(Math.ceil(i*100/360));
$(".pie1").css("-o-transform", "rotate(" + i + "deg)");
$(".pie1").css("-moz-transform", "rotate(" + i + "deg)");
$(".pie1").css("-webkit-transform", "rotate(" + i + "deg)");
};
function start2() {
j = j + 0.6;
count = count + 1;
if (count >= 300) {
count = 0;
clearInterval(t2);
};
$(".time").text(Math.ceil((j+i)*100/360));
$(".pie2").css("-o-transform", "rotate(" + j + "deg)");
$(".pie2").css("-moz-transform", "rotate(" + j + "deg)");
$(".pie2").css("-webkit-transform", "rotate(" + j + "deg)");
};
t1 = setInterval("start1()", 10);
</script>
</body>
</html>
这改嫌种效果都是jq结如歼困合canvas实现的。看看这个插件吧！附件不知怎么滴传不上来。百度一下“jQuery轻量级圆形进度指示器插件 ”应该可以找到渣念