欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5简单进度条插件

程序员文章站 2022-03-17 13:07:08
今天学习了HTML5画线条,于是有了做一个简单进度条的插件的想法 先来一个实例 下面是html代码 然后js配置参数 var setting =...

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

    

然后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();
    }
}

就这样,一个自定义小插件就完成了。