基于网上很多前辈们的代码修改,在页面底部设置进度条,
先上效果图
思路:
1.设置背景层,左半圈,右半圈
2.通过js调整左右半圈旋转角度,以及颜色的设置
html代码
<div class="circle-bar">
<div class="circle-bar-left"></div>
<div class="circle-bar-right"></div>
<div class="mask">
<span class="percent"></span>
</div>
</div>
css代码
.circle-bar {
margin-top: 450px;
font-size: 80px;
width: 1em;
height: 1em;
margin-left: 700px;
position: relative;
background-color: #ffaa00;
}
.circle-bar-left, .circle-bar-right {
width: 1em;
height: 1em;
}
.circle-bar-right {
clip: rect(0, auto, auto, .5em);
background-color: #393956;
}
.circle-bar-left {
clip: rect(0, .5em, auto, 0);
background-color: #393956;
}
.mask {
width: 0.8em;
height: 0.8em;
background-color: #fff;
text-align: center;
line-height: 0.2em;
}
.mask :first-child {
font-size: 0.3em;
height: 0.8em;
line-height: 0.8em;
display: block;
}
.circle-bar * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.circle-bar, .circle-bar>* {
border-radius: 100%;
}
js代码
window.onload = function() {
var circleBar = document.getElementsByClassName('circle-bar')[0];
var percent = 90;
var color = circleBar.css('background-color');
var left_circle = circleBar.getElementsByClassName('circle-bar-left')[0];
var right_circle = circleBar.getElementsByClassName('circle-bar-right')[0];
if (percent <= 50) {
var left_rotate = 'rotate(' + (percent * 3.6) + 'deg)';
right_circle.css3('transform', left_rotate);
} else {
var rotate = 'rotate(' + ((percent-50) * 3.6) + 'deg)';
right_circle.css3('background-color', '#ffaa00');
left_circle.css('transform', rotate);
}
}
Element.prototype.css = function(property, value) {
if (value) {
var index = property.indexOf('-');
if (index != -1) {
var char = property.charAt(index + 1).toUpperCase();
property.replace(/(-*){1}/, char);
}
this.style[property] = value;
} else {
return window.getComputedStyle(this).getPropertyValue(property);
}
}
Element.prototype.css3 = function(property, value) {
if (value) {
property = capitalize(property.toLowerCase());
this.style['webkit' + property] = value;
this.style['Moz' + property] = value;
this.style['ms' + property] = value;
this.style['O' + property] = value;
this.style[property.toLowerCase()] = value;
} else {
return window.getComputedStyle(this).getPropertyValue(('webkit' + property) || ('Moz' + property) || ('ms' +
property) || ('O' + property) || property);
}
function capitalize(word) {
return word.charAt(0).toUpperCase() + word.slice(1);
}
}