JavaScript實現圓形進度條效果
阿新 • • 發佈：2021-08-26
本文例項為大家分享了實現圓形進度條效果的具體程式碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewpwww.cppcns.comort" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<script src="http://libs.baidu.com//2.0.0/jquery.min."></script>
<style>
.itemwait{
position:absolute;
top : 0;
bottom:0;
1.原生js實現
const loadingArr=[1,2,10,20,40,70,90,100]
let index=0
var timer=setInterval(()=>{
let total=document.querySelector('.progress').getTotalLength();
let progress=document.querySelector('.progress')
console.log(typeof total)
progress.style.strokeDashoffset=(total)*(1-loadingArr[index]/100)
if(index<=loadingArr.length){
document.querySelector('.text').textContent=`${loadingArr[index]}%`
}
index++
if(index===loadingArr.length){
clearInterval(timer)
document.querySelector('.text').textContent='載入完成'
}
},500)
2.jQuery實現
let index = 0
var $circle = $('.progress');
var r = $circle.attr('r');
var timer = setInterval(() => {
var total = Math.PI * (r * 2);
var pct = (1-index / 100) * total;
console.log(typeof pct,pct)
if (index <= 100) {
$('.text').text(`${index}%`);
$circle.({ strokeDashoffset: pct });
}
index = index + 10
if (index > 100) {
$('.text').text('載入完成');
clearInterval(timer)
}
},500)
3.最初按照自己www.cppcns.com的想法實現
const loadingArr=[1,100]
let index=0
var timer=setInterval(()=>{
let total=document.querySelector('.progress').getTotalLength();
let progress=document.querySelector('.progress')
console.log(typeof total)
progress.style.strokeDashoffset=(total)*(1-loadingArr[index]/100)
$('.text').text(function(){
if(index<=loadingArr.length){
return `${loadingArr[index]}%`
}
})
index++
if(index===loadingArr.length){
clearInterval(timer)
$('.text').text('載入完成')
}
},500)
總結
知識點：svg繪圖、js原生操作、jQuery
- stroke-dasharray： 虛線
- stroke-dashoffset: 偏移間隔
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。