HTML5简单进度条插件

雨点打透心脏的1/2处 2022-08-02 15:54 221阅读 0赞

今天学习了HTML5画线条，于是有了做一个简单进度条的插件的想法  
先来一个实例  
下面是html代码

<div>
            <canvas id="canvas"></canvas>
        </div>

然后js配置参数

var setting = {
                id: "canvas",//画布id 不可省略
                width: 40,//进度条高度 可省略
                time: 100,//进度刷新时间间隔 可省略 默认为1000毫秒
                color: "black",//进度条颜色 可省略 默认为bule
                runX2: function (x) { //每次刷新调用的改变X2坐标的函数,可省略 runX1,runY1,runY2一样
                    x = x + 2;
                    return x;
                },
                endFunction: function () { //结束时调用的函数
                },
                startFunction: function () { //开始时调用的函数
                }
            }

然后

initProgressBar(setting);

就行了 当然，最开始要引入自定义进度条的js

<script type="text/javascript" src="progressBar.js"></script>

就这样 一个简单的HTML5 canvas实现的进度条就实现了  
我们先来说下API ，API很简单，只有几个参数，一般来说 只需要一个ID和一个变化函数就可以实现一个简单的进度条  
id 画布的id  
width：进度条的高度，也可以叫宽度 默认10  
time：刷新时间，也就是说每隔多久执行一次函数 默认1000毫秒  
color：进度条的颜色 默认red  
lineCap：样式 和HTML5的lineCap样式一样 默认round  
runX2：每次刷新调用的变化函数，每次刷新调用的改变X2坐标的函数,可省略 runX1,runY1,runY2一样 共有两个坐标x1,y1,x2,y2  
startFunction：开始之前调用的函数  
endFunction：结束之后调用的函数  
是不是很简单？那我们现在来看下插件实现的源码，也很简单，不过100行。运用js的setInterval实现定时刷新。

function initProgressBar(setting) {
        var initProgressBar = {};
        //调用开始函数
        if (setting.startFunction) {
            setting.startFunction();
        }
        //初始化默认值函数
        initProgressBar.initSet = function (set) {
            if (!set.time) {
                set.time = 1000;
            }
            if (!set.width) {
                set.width = 10;
            }
            if (!set.color) {
                set.color = "red";
            }
            if (!set.lineCap) {
                set.lineCap = "round";
            }
            return set;
        }
        //初始化默认值
        setting = initProgressBar.initSet(setting);
        //刷新函数
        initProgressBar.remainTime = function () {
            if (setting.runX1) {
                x1 = setting.runX1(x1);
                if (x1 >= endW) {
                    x1 = endW;
                }
            }
            if (setting.runY1) {
                y1 = setting.runY1(y1);
                if (y1 >= endH) {
                    y1 = endH;
                }
            }
            if (setting.runX2) {
                x2 = setting.runX2(x2);
                if (x2 >= endW) {
                    x2 = endW;
                }
            }
            if (setting.runY2) {
                y2 = setting.runY2(y2);
                if (y2 >= endH) {
                    y2 = endH;
                }
    
            }
            initProgressBar.draw(x1, y1, x2, y2, setting.width, setting.lineCap, setting.color);
            //判断结束
            if (y2 >= endH || y1 >= endH || x1 >= endW || x2 >= endW) {
                clearInterval(initProgressBar.run);
                if (setting.endFunction) {
                    setting.endFunction();//调用结束函数
                }
            }
        }
        //初始化画布，调用刷新函数
        if (setting.id) {
            initProgressBar.canvas = document.getElementById(setting.id);
            console.log(setting.id);
            initProgressBar.context = initProgressBar.canvas.getContext("2d");
            initProgressBar.run = setInterval(initProgressBar.remainTime, setting.time);//1000为1秒钟
        } else {
            alert("初始化错误，没有id");
        }
        var x1 = setting.width / 2;//起始点的坐标x
        var y1 = setting.width / 2;//起始点的坐标y
        var x2 = setting.width / 2;//结束点的坐标x
        var y2 = setting.width / 2;//结束点的坐标y
        var endH = initProgressBar.canvas.height - setting.width;
        var endW = initProgressBar.canvas.width - setting.width;
    
        //画进度条
        initProgressBar.draw = function draw(x1, y1, x2, y2, width, lineCap, color) {
            //清除内容
            initProgressBar.context.clearRect(0, 0, canvas.width, canvas.height);
            initProgressBar.context.beginPath();
            initProgressBar.context.strokeStyle = color;
            initProgressBar.context.lineCap = lineCap;
            initProgressBar.context.moveTo(x1, y1);
            initProgressBar.context.lineWidth = width;
            initProgressBar.context.lineTo(x2, y2);
            initProgressBar.context.stroke();
        }
    }

就这样，一个自定义小插件就完成了。  
[在线演示][Link 1]

[Link 1]: http://codepen.io/ytflzq/pen/dogLNJ

发表评论取消回复

表情：

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

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

相关阅读

相关 vue 添加NProgress进度条插件

NProgress NProgress是页面跳转是出现在浏览器顶部的进度条。官网：[http://ricostacruz.com/nprogress][http_ri

悠悠/ 2024年04月07日 12:04/ 0 赞/ 78 阅读

相关 html资源文件记载进度条,HTML5矢量实现文件上传进度条

在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过HT for Web

妖狐艹你老母/ 2022年10月05日 12:53/ 0 赞/ 254 阅读

相关 HTML5简单进度环插件

前几天做了一个进度条的插件，今天我用HTML5的arc做一个简单的进度环的插件。 [代码演示][Link 1] 其实很简单的，同样，我们先用一个实例：配置js代码

痛定思痛。/ 2022年08月03日 00:24/ 0 赞/ 141 阅读

相关 HTML5简单进度条插件

今天学习了HTML5画线条，于是有了做一个简单进度条的插件的想法先来一个实例下面是html代码 <div> <canvas id=

雨点打透心脏的1/2处/ 2022年08月02日 15:54/ 0 赞/ 222 阅读

相关 Jquery进度条插件 Progress Bar插件应用方法

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] Jquery进度条插件 Progress Bar插件应用

╰半夏微凉°/ 2022年01月16日 11:21/ 0 赞/ 726 阅读

相关 HTML 5 进度条

.pro progress{ -webkit-appearance:none; } .pro ::-webkit-progress

小鱼儿/ 2021年09月17日 01:16/ 0 赞/ 446 阅读

相关进度条插件

进度条插件一、NProgress 一、NProgress 使用 <link rel='sylesheet' href='nprogress.cs

╰半夏微凉°/ 2021年09月07日 06:12/ 0 赞/ 606 阅读

相关 plupload 上传插件之进度条

> 这个插件还是比较友好，会返回上传的进度，只需要放在页面即可。后端实现忽略，这儿只简单说一下前端。 1.html 部分 <link href="/assets

骑猪看日落/ 2021年08月10日 20:40/ 0 赞/ 700 阅读

相关 radialIndicator 环形进度条插件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8

蔚落/ 2021年08月05日 02:34/ 0 赞/ 640 阅读

相关 NProgress 进度条插件的使用

NProgress的使用一. NProgress - css 文件和 js 文件下载地址二. 引入 NProgress 的 css文件

Love The Way You Lie/ 2021年07月25日 22:56/ 0 赞/ 627 阅读