您当前位置:首页 > 文章中心 > HTML5+CSS3 > HTML5

html5环形百分比插件

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2015-07-09   阅读次数: 53   查看权限: 游客查看

html5环形百分比插件

/* 作者:太阳光
    * 1、生成指定值的百分比
    * 2、指定大小、颜色(外环色,字体色,内环色)、外环宽
    * 3、回调函数
    * 4、设置读取属性接口
    * */
    function Annulus(obj){
        "use strict";
        var o = {
            obj:null,//canvas对象
            width:200,//圆环宽|高度
            init:0,//初始百分比(动画即时百分比)
            per:0,//最终百分比
            fun:function(){},//回调函数
            time:100,//动画间隔时间
            ringWidth:20,//外圆环宽
            ringColor:"#FF007F",//外圆环颜色
            bottomColour:"#DDDDDD",//外圆环底颜色
            font:"30px Arial",//字体大小和字体
            fontColor:"#000000",//字体颜色
            insideColor:"#FFFFFF",//内环形颜色
            update : function(){
                function fill(radii,angle,endAngle,color,mover){
                    ct.beginPath();
                    mover && ct.moveTo(radius,radius);
                    ct.arc(radius,radius,radii,Math.PI/180*angle,Math.PI/180*endAngle,false);
                    ct.fillStyle = color;
                    ct.closePath();
                    ct.fill();
                }
                var _this = this,ct = _this.obj.getContext('2d'),radius = _this.width/2;
                ct.clearRect(0,0,_this.width,_this.width);
                fill(radius,0,360,_this.bottomColour);
                fill(radius,-90,parseInt(_this.init)/100*360-90,_this.ringColor,true);
                fill(radius-_this.ringWidth,0,360,_this.insideColor);
                ct.beginPath();
                ct.font = _this.font;
                ct.fillStyle = _this.fontColor;
                ct.textAlign = "left";
                var transX = (_this.width - ct.measureText(_this.init + "%").width)/2;
                var transY = (_this.width - _this.font.match(/\d+/)[0])/2;
                ct.translate(transX,transY);
                ct.fillText(_this.init + "%",0,30);
                ct.translate(-transX,-transY);
                _this.fun.apply(_this,arguments);
                _this.init++ < _this.per && setTimeout(function(){_this.update()},_this.time);
                _this.init = Math.min(_this.init,_this.per);
            },
            get : function(name){return this[name]},
            set : function(obj) {
                for (var k in obj)this[k] = obj[k];
                this.obj.width = this.obj.height = this.width;
                this.update();
                return this;
            }
        };
        o.set(obj);
        return o;
    }
var ann,oTxt;
    window.onload=function(){
        if(!window.applicationCache){
            alert("请使用支持HTML5浏览器测试!");
            return;
        }
        oTxt = document.getElementById("result");
        ann = new Annulus({obj:document.getElementById('c1'),per:20,
            fun:function(){
                oTxt.innerHTML = this.init > 79
                    ? "web技术总监" : this.init > 56
                    ? "高级前端工程师" : this.init > 29
                    ? "web前端工程师" : "web菜鸟";
            }
        });
        setTimeout(function(){
            new Annulus({obj:document.getElementById('c2'),per:50});//随时可增加
        },4000)
    };
    function fun1(){
        ann.set({per:80});
    }
    function fun2(){
        alert("init:"+ann.get("init")+" per:"+ann.get("per"));//如果仍在动画中init值才是所见即所得
    }
    function fun3(){
        ann.set({ringColor:'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),fontColor:'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6)});
    }
    function fun4(){
        alert("ringColor:"+ann.get("ringColor")+" fontColor:"+ann.get("fontColor"));
    }
    function fun5(){
        ann.set({init:0});//初始化原始值即可
    }
    function fun6(){
        ann.set({time:50});//即修改定时器
    }
    function fun7(){
        ann.set({width:300,ringWidth:40,font:"40px Microsoft YaHei"});
    }
    function fun8(){
        ann.set({width:200,ringWidth:20,font:"30px Arial"});
    }

点击查看例子

关键词: html5,百分比   编辑时间: 2015-07-09 17:34:04

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介