js进度条—模拟加载—画板

骑猪看日落 2023-05-29 05:01 147阅读 0赞

\*\*

## js通过canvas来画图模拟进度条加载动画 ##

\*\*  
html：

<div class="wai">
        <div>模拟加载—>加载进度：<span id="num"></span></div>
        <span id="dtnum"></span>
        <canvas width="200" height="22" style="border-radius: 10px;" id="can">您的浏览器不支持canvas</canvas>
        <br>
        <button id="btnLogin">开始</button>
        <button id="btnZt">暂停</button>
    </div>

css：

.wai{ 
    	 height: 80px;
    	 width: 100%;
    	 position: relative;
    }
    #dtnum{ 
    	 position: absolute;
    	 top: 23px;
    	 z-index: 99999;
    	 color: white;
    	 font-size: 12px;
    	 display: inline-block;
    	 width: 40px;
    }
    #btnLogin{ 
    	 width: 100px;
    	 height: 30px;
    	 font-size: 14px;
    	 color: white;
    	 background: #1568ff;
    	 border: none;
    	 border-radius: 15px;
    	 cursor: pointer;
    	 outline: none;
    }
    #btnZt{ 
    	 width: 100px;
    	 height: 30px;
    	 font-size: 14px;
    	 color: white;
    	 background: #1568ff;
    	 border: none;
    	 border-radius: 15px;
    	 cursor: pointer;
    	 outline: none;
    }

js：

(function(){ 
            let canvas;
            let ctx;
            let num = document.getElementById('num');
            let dtnum = document.getElementById('dtnum');
            let btnLogin = document.getElementById('btnLogin');
            let btnZt = document.getElementById('btnZt');
            let setInt;
            let k;
            let bfb;
            let col;
    
            // 建立画布
            canvas = document.getElementById('can');
            ctx = canvas.getContext('2d');
            //设置画布样式
            canvas.width = 1024;
            canvas.height = 20;
            canvas.style.border = '1px solid #009688';
            canvas.style.borderRadius = '10px';
            // 初始值
            k = 24;
            bfb = 0;
            col ='#009688';
    
            // 开始
            btnLogin.addEventListener('click',function () { 
                setInt = setInterval(function (a,b) { 
                    jsq();
                    arc();
                },1000);
            });
            // 暂停
            btnZt.addEventListener('click',function () { 
                clearInterval(setInt);//清除计时器
            });
            //计时器运行函数
            let jsq = function(){ 
                let x = Math.ceil(Math.random()*40);//0-40之间的随机整数
                k = k+x;
                // console.log(k);
                // 显示文字、样式
                if(k>=1024){ 
                    clearInterval(setInt);
                    k = 1024;
                    col = '#ff0000';
                    bfb = (k-24)/10;
                    dtnum.style.left = k-24 + 'px';
                    num.innerText = bfb + '%';
                    dtnum.innerText = bfb + '%';
                    canvas.style.border = '1px solid #ff0000';
                }else { 
                    bfb = (k-24)/10;
                    dtnum.style.left = k-24 + 'px';
                    num.innerText = bfb + '%';
                    dtnum.innerText = bfb + '%';
                }
            };
            //绘制进度条
            let arc = function () { 
                ctx.strokeStyle = col;
                ctx.lineWidth = 5;//画笔大小
                ctx.beginPath();//开始作画
                ctx.moveTo(0,0);//起始点
                ctx.lineTo(0,20);
                ctx.lineTo(k,20);
                ctx.arc(k,10,10,Math.PI/2,-Math.PI/2,true);//画圆——默认逆时针false ，顺时针为true
                ctx.lineTo(k,0);
                ctx.lineTo(0,0);
                ctx.closePath();//结束
                ctx.stroke();//描边
                ctx.fillStyle = col;
                ctx.fill();
            };
        })();

效果演示：  
![在这里插入图片描述][20191104103109652.png]  
![在这里插入图片描述][20191104103123226.png]

[20191104103109652.png]: https://img-blog.csdnimg.cn/20191104103109652.png
[20191104103123226.png]: https://img-blog.csdnimg.cn/20191104103123226.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 nprogress页面加载进度条

入口文件,main.js引入 nprogress import App from './App' import VueRouter from 'vue-rou

ゞ浴缸里的玫瑰/ 2023年10月11日 14:03/ 0 赞/ 86 阅读

相关 js进度条—模拟加载—画板

\\ js通过canvas来画图模拟进度条加载动画 \\ html： <div class="wai"> <div>模拟加载—>加载进度：

骑猪看日落/ 2023年05月29日 05:01/ 0 赞/ 148 阅读

相关 nprogress页面加载进度条

安装 npm install --save nprogress 使用 NProgress.start(); // 开始 NProgr

蔚落/ 2022年11月26日 01:53/ 0 赞/ 248 阅读

相关常用的网页加载进度条之【实时获取加载数据的进度条】

之前我们做的进度条都是动画，没有获取实时数据。有些网站是从0到100%逐渐过渡的，也能看到相应数字的变化，那么用户在等待时候看到数字心里还是有个底的，等到了100%的时候就可以

た入场券/ 2022年06月08日 14:29/ 0 赞/ 486 阅读

相关常用的网页加载进度条之【制作进度条】

一、课程介绍随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢得多，如果图片或脚本没有完全载入，用户在操作中

川长思鸟来/ 2022年06月08日 09:05/ 0 赞/ 816 阅读

相关常用的网页加载进度条

关于进度条的图片，有几个专门的网站可以下载 [https://icons8.com/preloaders/][https_icons8.com_preloaders]，

爱被打了一巴掌/ 2022年05月10日 22:04/ 0 赞/ 491 阅读

相关 unity进度条加载

首先创建一个unity自带的UI——Slider，并在其下面再添加一个Text ![20190317171335629.png][] 在其下面添加脚本 using

超、凢脫俗/ 2022年04月23日 15:00/ 0 赞/ 385 阅读

相关 python 简单文本进度条程序进度条加载进度条单行刷新

利用time库来替代某个程序的进行过程，做实例，思路是，简单打印出来程序进度单行刷新关键是\\r， python默认是print后换行，所以加一个\\r是光标

朴灿烈づ我的快乐病毒、/ 2022年03月18日 05:50/ 0 赞/ 467 阅读

相关网页加载进度条

通过加载状态事件制作进度条主页面未完全加载前使用加载页面，加载完成后将加载页面隐藏 - document.onreadystatechange 页面加载状态改变时的事件...

你的名字/ 2021年05月03日 09:51/ 0 赞/ 767 阅读

相关实用简单的进度条加载组件loader.js

一个简单的方法实现一个流程的进度条加载效果，以便在页面中可以通过它来更好地反馈耗时任务的完成进度。要实现这个功能，首先要考虑怎样实现一个静态的进度条效果，类似下面这样的

小灰灰/ 2020年06月01日 17:35/ 0 赞/ 711 阅读