• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript实现圆形进度条效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了JavaScript实现圆形进度条效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    .itemwait{
      position:absolute;
      top : 0;
      bottom:0;
      left:0;
      right:0;
      margin: 0 auto; 
    }
    .progress{
      stroke-dasharray: 251; 
      stroke-dashoffset: 0;
      /* 
      stroke-dasharray: 虚线
      stroke-dashoffset: 偏移间隔   
      */
    }
  </style>
</head>
<body>
  <svg width="200" height="200" version="1.1" class='itemwait'>
    <circle class='progress' cx="100" cy="50" r="40" stroke="pink" stroke-width="5" fill="transparent" />
    <text class='text' x="100" y="50" fill='pink' text-anchor='middle' alignment-baseline='middle'>开始加载</text>
  </svg>
</body>
<script async type='text/javascript'>
//js代码见下文
</script>

</html>

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.css({ strokeDashoffset: pct });
    }
    index = index + 10
    if (index > 100) {
      $('.text').text('加载完成');
      clearInterval(timer)
      
    }
  }, 500)

3.最初按照自己的想法实现

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)
    $('.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: 偏移间隔

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript style对象与CurrentStyle对象案例详解发布时间:2022-02-05
下一篇:
js实现点击切换卡片功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap