H5 可堆叠的圆环进度条,支持任意数量子进度条
by Conmajia
SN: S22-W1M
由来
看到一篇帖子《vue实用组件——圆环百分比进度条》,让我想起了很多年前我在WinForm下仿制过的Chrome进度条。

那时候我经常半夜接着酒劲儿用我的小破电脑跟GDI+ 较真儿,一转眼都快10年了。这日子过得还真是让人唏嘘呢。本来想翻出来纪念一下,可是以前的东西早他妈不知扔哪儿了,有点儿遗憾。再看看上边儿那进度条是Vue的,我现在还没本事玩儿,可是又手痒痒,先用H5做一个凑合吧。反正也是打发时间,少打几圈儿麻将呗。
特性 & Demo
说实在的,单进度条非做一圆,别的屁功能没有,真的没意思,不如来点儿添头,把一堆进度条都给揉里边儿。我相信一定有人能用上,别客气。
- 可以堆叠任意数量子进度条
- 计算总进度
- 原生H5
![]() |
![]() |
![]() |
最后的效果就上边儿那图的把式。如果你的浏览器支持H5,那么你应该可以看到下面这个动态演示。你可以点击按钮试试看用在网页上的实际效果。
亲手试试:
随机看看
代码
全是基础的东西。
非常简单,略去了一些不重要的东西(我讨厌整页整页都是代码的文章)。最最基础的H5动画,没啥可说的,我写了点儿注释。
// ctx 为 canvas context
var ctx = g.getContext('2d');
// (x, y) 中心点
var x = g.width / 2, y = g.height / 2;
// p 保存所有子进度条,value 0-100%
var p = [{
value: 0,
color: 'orange'
},
...
{
value: 0,
color: 'blue'
}];
// 演示专用(略):随机更新各个进度条 value,模拟走进度
function inc(a) {
...
}
// 计算总进度
function getTotal(a) {
var t = 0;
for(var i = 0; i < a.length; i++) {
t += a[i].value;
}
return t / a.length;
}
// 画圆环。start、stop 起止点,以 scale 划分 360 度
function drawBand(start, stop, color = 'silver', scale = 100) {
var div = Math.PI * 2 / scale;
ctx.save();
ctx.strokeStyle = color;
ctx.lineWidth = 30;
ctx.beginPath();
ctx.arc(x, y, 100, start * div, stop * div, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
// 画所有子进度条
function drawProg(a) {
for (var i = 0; i < a.length; i++) {
var s = 0;
// 计算起点
for (var j = 0; j < i; j++) {
s += a[j].value;
}
s /= a.length;
drawBand(s, s + a[i].value / a.length, a[i].color);
s = s + a[i].value;
}
}
// 中心总进度文字
function drawLabel(n) {
...
}
// 动画循环
(function drawFrame() {
window.requestAnimationFrame(drawFrame);
ctx.clearRect(0, 0, g.width, g.height); // 清空绘图区
drawBand(0, 100); // 画底环(0-100 刻度,默认色)
drawLabel(total(p)); // 画进度文字
drawProg(p); // 画所有进度条
inc(p); // 模拟更新,演示专用
}());
代码就这么简单。老实说,其实这挺无聊的,bootstrap自带的进度条就能堆叠(当然那个是直线型的);随便用个Chart.js、ECharts.js,也能轻轻松松实现这个效果,比这好上一万倍。

まあ,就当练手了呗,反正我的H5连门儿都还没入,弄出来也算熟悉熟悉,挺好的。
The End. \(\Box\)
这周结束了,我也码了一周的字,感觉还是很有种脚踏实地的感觉的,有时间就可以看看自己的总结再查漏补缺,一步一个脚印,做出自己最理想的项目. 今天我们讲两点: 1.ProgressBar: 其实前面也稍微 ... Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ... 今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ... 今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ... Devrama Slider 是一个图片滑块,支持很多特色功能.除了支持图片滑动,其它的 HTML 内容也支持.主要特色:响应式.图片预加载.图片延迟加载.进度条.自定义导航栏和控制按钮等等. 在线演 ... 什么是定时消息和延迟消息? 定时消息:Producer 将消息发送到 MQ 服务端,但并不期望这条消息立马投递,而是推迟到在当前时间点之后的某一个时间投递到 Consumer 进行消费,该消息即定时消 ... [OpenGL(SharpGL)]支持任意相机可平移缩放的轨迹球 (本文PDF版在这里.) 在3D程序中,轨迹球(ArcBall)可以让你只用鼠标来控制模型(旋转),便于观察.在这里(http://w ... 一条insert语句批量插入多条记录 常见的insert语句,向数据库中,一条语句只能插入一条数据: insert into persons (id_p, lastname , firstName, ... MRD-5030具有4位8段数码管,支持通过工业标注协议Modbus(Modbus-RTU)控制显示,支持任意小数点的显示.数据以半双工方式通信.电源端口和通信端口都具有防浪涌,防雷600W保护,能够 ... 1.询问框的使用 主要体现在删除等重要操作 让用户进行二次确认的场景 //询问框 layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] //按钮 }, fun ... 快照(Snapshot)技术发展综述 刘爱贵 摘要:传统数据备份技术存在备份窗口.恢复时间目标RTO和恢复时间点RPO过长的问题,无法满足企业关键性业务的数据保护需求,因此产生了数据快照技术.本文对快 ... 根据需求,我们的系统必须以C/S方式构建,而且是三层架构,这样一来,就出现了服务器端和客户端通信的问题. 为了解决双方的通信问题,还要考虑效率.性能等方面,经过分析.试验,我们根据效率.移植.开发难易 ... 背景 去面试的时候遇到一道和 string 相关的题目,记录一下用到的知识点.题目如下: s:="123" ps:=&s b:=[]byte(s) pb:=&b s ... 问题 (1)什么是优先级队列? (2)怎么实现一个优先级队列? (3)PriorityQueue是线程安全的吗? (4)PriorityQueue就有序的吗? 简介 优先级队列,是0个或多个元素的集合 ... 死锁杂谈 当数据库死锁时,SqlServer会释放一个优先级较低的锁,让另一个事务运行:所以,即时去捕捉数据库死锁,是挺不容易的. 如果,数据库死锁比较长时间,那么死锁是可以被捕捉的. 可以用SqlS ... 本篇文档将介绍通过Java编程在PDF文档中绘制图形的方法.包括绘制矩形.椭圆形.不规则多边形.线条.弧线.曲线.扇形等等.针对方法中提供的思路,也可以自行变换图形设计思路,如菱形.梯形或者组合图形等 ... 1.java.lang.NullPointerException(经常报)(运行时异常) 属于运行时异常,是编译器无法预知的异常,比如你定义了一个引用变量String a,但是你确没有用new关键字去 ... 上帝的归上帝,凯撒的归凯撒 <马太福音>22 章 15-22 节,耶稣用这句话,说明了神权与政权之间的正确关系,奠定了神权与政权的基础,也划清了二者的界限.其实这两个问题如今也依旧出现在公 ... 以下演示操作以该网址中的内容为例:https://learn.letskodeit.com/?_ga=2.143454972.85111248.1555037144-697706367.1554889 ...
var c = ['Navy', 'Blue', 'Aqua', 'Teal', 'Green', 'Lime', 'Yellow', 'Orange', 'Red', 'Maroon', 'Fuchsia'];
var auto = true;
var g = document.getElementById('canvas1');
var ctx = g.getContext('2d');
var x = g.width / 2;
var y = g.height / 2;
var rad = Math.PI * 2 / 100;
var p = [{
speed: 0.2,
value: 0,
color: 'orange'
}, {
speed: 0.1,
value: 0,
color: 'blue'
}, {
speed: 0.2,
value: 0,
color: 'green'
}, {
speed: 0.4,
value: 0,
color: 'red'
}];
$('#add').click(function(e) {
e.preventDefault();
auto = true;
add();
});
$('#remove').click(function(e) {
e.preventDefault();
auto = true;
remove();
});
$('#shuffle').click(function(e) {
e.preventDefault();
auto = true;
shuffle();
});
function add() {
p.push({
speed: Math.random(),
value: 0,
color: c[Math.floor(Math.random() * (c.length))]
});
}
function remove() {
p.pop();
}
function shuffle() {
for (var i = 0; i
H5 可堆叠的圆环进度条,支持任意数量子进度条的更多相关文章
随机推荐