HTML5 进度条

1. <progress>标签进度条

value属性：规定进程的当前值。默认为0

max属性：规定需要完成的值。

PS：这里没有最小值设置，或者说最小值一律为0

<progress max="50" value="20" id="progress"></progress>

小案例：设置定时器，动态增加value值，让进度条动起来

<progress max="100" id="progress"></progress>

<script>

    // 这种动态持续访问元素最好不要使用querySelector

    var progress = document.getElementById("progress")

    // 判断值是数组类型还是字符串

    console.log(typeof progress.value) //number

    // 设置定时器

    var timer = setInterval(function(){

        // 因为value是数字类型，可以直接使用加法运算

        progress.value++

        // 判断进度条是否已满

        if(progress.value >= progress.max){

            //清除定时器

            clearInterval(timer)

        }

    },50)

</script>

2.<meter>标签：定义度量衡（状态条）

常用属性：min / low / high / max / optinum / value

这个标签主要用来展示当前值在值域区间的情况，比如：磁盘使用情况，查询结果的相关性等。

它有4个值作为参考的临界点，分别是最小值min，较小值low，较大值high，最大值max。这4个值将值域划分成3个区间：[min,low)、[low,high]，(high,max]

而最佳值optinum.默认位于中间的区间[low,high]

<!-- 基本使用 -->

<meter max="100" value="50" min="0" high="80" low="20"></meter>

当前值value的大小除了决定状态条的长度，还会根据它所处的区间，最佳值optinum所在区间来决定颜色。

颜色规则：

我们暂且称optinum属性值所在的区间为"最佳区间","最佳区间"默认在中间，此时从左到右3个区间的颜色分别为黄-绿-黄。

如果"最佳区间"不在中间，则最佳区间为绿色，离最佳区间稍远的为黄色，最远的为红色。

<body>

    <p>最佳区间默认为中间区间</p>

    <div>

        <meter max="100" value="50" min="0" high="80" low="20"></meter>

    </div>

    <div>

        <meter max="100" value="10" min="0" high="80" low="20"></meter>

    </div>

    <div>

        <meter max="100" value="90" min="0" high="80" low="20"></meter>

    </div>

    <p>最佳区间设置为左边的区间</p>

    <div>

        <meter max="100" value="50" min="0" high="80" low="20" optimum="10"></meter>

    </div>

    <div>

        <meter max="100" value="10" min="0" high="80" low="20" optimum="10"></meter>

    </div>

    <div>

        <meter max="100" value="90" min="0" high="80" low="20" optimum="10"></meter>

    </div>

    <p>最佳区间设置为右边的区间</p>

    <div>

        <meter max="100" value="50" min="0" high="80" low="20" optimum="90"></meter>

    </div>

    <div>

        <meter max="100" value="10" min="0" high="80" low="20" optimum="90"></meter>

    </div>

    <div>

        <meter max="100" value="90" min="0" high="80" low="20" optimum="90"></meter>

    </div>

</body>

3.环形进度条插件 radialindicat

(1)引入插件(依赖jquery)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/radialIndicator/1.0.1/radialIndicator.min.js"></script>

(2)准备一个容器

<body>

    <div id="indicatorContainer"></div>

</body>

(3)基本使用：获取jquery对象，调用方法，读取配置项，为容器动态创建环形进度条元素

<script>

    //

    $('#indicatorContainer').radialIndicator({

        initValue: 50,//初始值，最大值默认100

    })

</script>

效果：（使用的是canvas渲染，默认的宽高为110，最大值默认100，传入50相当于一半，默认颜色为青绿色）

(4)进度值数字设置

百分比展示

<script>

    $('#indicatorContainer').radialIndicator({

        initValue: 50,//初始值，最大值默认100

        percentage: true //百分比形式展示文本提示

    })

</script>

隐藏进度的数值展示

<script>

    $('#indicatorContainer').radialIndicator({

        initValue: 50,//初始值，最大值默认100

        displayNumber:false,//隐藏进度数值

    })

</script>

格式化数值

<script>

    $('#indicatorContainer').radialIndicator({

        initValue: 50,//初始值，最大值默认100

        format:function(val){

            return '$ - ' + val

        }

    })

</script>

(5)修改bar的颜色和宽度(字体颜色会跟着改变)

<script>

    $('#indicatorContainer').radialIndicator({

        barColor: 'red',//bar的颜色

        barWidth: 10,//宽度

        barBgColor:'#ffff00',//bar的背景色 黄

        roundCorner:true,//两端是否以圆角展示,默认false

        initValue: 50,//初始值，最大值默认100

    })

</script>

(6)字体设置

字体颜色默认和bar颜色一样，不过可以单独设置，包括字体的其他属性

<script>

    $('#indicatorContainer').radialIndicator({

        barColor: 'red',//bar的颜色

        fontColor:'#00ff00',//字体颜色

        fontSize:20,//字体大小

        fontWeight:600,//字体加粗

        initValue: 50,//初始值，最大值默认100

    })

</script>

(7)分段颜色

这里设置颜色不能使用颜色名称，而要使用16进制颜色值
颜色是渐变过渡的，并不是按区间显示颜色

<script>

    $('#indicatorContainer').radialIndicator({

        barColor: {

            0: '#00ff00',//绿

            50: '#0000ff',//蓝

            100: '#ff0000'//红

        },

        initValue: 1,//初始值，最大值默认100

    })

</script>

(8)设置最大值和最小值

$('#indicatorContainer').radialIndicator({

            minValue: 1000,

            maxValue: 100000

        });

(9)更新进度条数值

jquery对象每调用一次radialIndicator()就在容器内部生成一个环形进度条，调用10次就生成10个,前面的10个环形进度条就是这样生成的。

要更新某个进度条，就需要在创建进度条时，将进度条实例保存起来，然后调用该实例的value()更新进度条数值

<script>

    var val = 0

    //创建实例

    var radialObj = radialIndicator('#indicatorContainer', {

        initValue:val,

    })

    //更新实例

    var timer = setInterval(() => {

        val += 10

        //如果大于100 则清除定时器

        if(val > 100){

            console.log('定时器结束')

            clearInterval(timer)

        }else{

            //调用value()方法更新进度条的数值

            radialObj.value(val)

        }

    }, 200);

</script>

(10)获取当前实例的进度值

进度值保存在所在实例的current_value属性中

<script>

    var val = 40

    //创建实例

    var radialObj = radialIndicator('#indicatorContainer', {

        initValue:val,

    })

    radialObj.value(50)

    console.log(radialObj)

</script>

HTML5 进度条的更多相关文章

9个绚丽多彩的HTML5进度条动画赏析
进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...
ajax-属性、原理、实现html5进度条上传文件
一.远古ajax实现方式如下: 1.前端请求后台,后台设置返回 http状态码204 2.运用img图片(或css/javascript等)的加载机制,请求后台 3.post提交数据,运用iframe ...
YprogressBar,html5进度条样式,js进度条插件
简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...
HTML5有特色的进度条
查看效果:http://keleyi.com/keleyi/phtml/html5/26.htm 完整代码如下: <!DOCTYPE html> <html> <head ...
分享9款极具创意的HTML5/CSS3进度条动画
1.HTML5/CSS3图片加载进度条可切换多主题今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...
9款极具创意的HTML5/CSS3进度条动画（免积分下载）
尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...
9款极具创意的HTML5/CSS3进度条动画
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条可切换多主题今天要分享的 ...
超赞的CSS3进度条可以随进度显示不同颜色
原文:超赞的CSS3进度条可以随进度显示不同颜色现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...
CSS实现进度条
进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等. 以前如果想要创建一个进度条的动画效果,没有使用 ...
HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

随机推荐

Figma 学习笔记 – Frame
Frame = <div> Frame 就类似 HTML 中的 div, 它和形状 rectangle 特性上蛮相识的, 但是使用场景其实差很多, 所以不要搞错哦. (除了图片很少会用到 ...
SQL Server CTE (Common Table Expression) 公用表表达式
参考: Sql - CTE公用表表达式和With用法总结 YouTube – SQL WITH Clause | How to write SQL Queries using WITH Clause ...
Python 潮流周刊#69：是时候停止使用 Python 3.8了（摘要）
本周刊由 Python猫出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...
.NET 7+Angular 4 轻量级新零售进销存系统
前言给大家推荐一个专为新零售快消行业打造了一套高效的进销存管理系统. 系统不仅具备强大的库存管理功能,还集成了高性能的轻量级 POS 解决方案,确保页面加载速度极快,提供良好的用户体验. 项目介绍 ...
使用 fabric.js 开发移动端 H5 图片编辑器
大家好,我是开源图片编辑器的 https://github.com/ikuaitu/vue-fabric-editor 的作者,它是一款基于 PC 版本的开源图片编辑器. 最近很多开发者咨询,是否可以 ...
Vue 3 + Vite + SuerMap iClient构建报错Uncaught TypeError utils.inherits is not a function
一.现象 Uncaught TypeError: utils.inherits is not a function 二.问题产生原因 Elasticsearch本身就需要这些东西,以前没有问题是因为W ...
USB PD和USB TYPE-C 的区别
USB Power Delivery (USB PD) 和 USB Type-C 是两个不同但相关的技术标准,它们在功能和应用上有所区别. 1. USB Type-C 连接器标准: USB Type- ...
《An Image Patch is a Wave: Phase-Aware Vision MLP》结构图+个人做的验证实验
今天阅读了<An Image Patch is a Wave: Phase-Aware Vision MLP>这篇论文,根据代码绘制的它的结构图.如果有错误,还请指正. Wave_MLP_ ...
如何理解 .Net 中的委托
// 委托 // 一种方法的声明和定义,也就是方法的占位符 // 一般使用在参数和属性中 int Add(int a,int b) { return a + b; } // 定义委托的三种方法 ...
04 Transformer 中的位置编码的 Pytorch 实现
1:10 点赞 16:00 我爱你你爱我 1401 class PositionalEncoding(nn.Module): def __init__(self, dim, dropout, max ...