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 进度条的更多相关文章

  1. 9个绚丽多彩的HTML5进度条动画赏析

    进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...

  2. ajax-属性、原理、实现html5进度条上传文件

    一.远古ajax实现方式如下: 1.前端请求后台,后台设置返回 http状态码204 2.运用img图片(或css/javascript等)的加载机制,请求后台 3.post提交数据,运用iframe ...

  3. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  4. HTML5有特色的进度条

    查看效果:http://keleyi.com/keleyi/phtml/html5/26.htm 完整代码如下: <!DOCTYPE html> <html> <head ...

  5. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

  6. 9款极具创意的HTML5/CSS3进度条动画（免积分下载）

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

  7. 9款极具创意的HTML5/CSS3进度条动画

    今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...

  8. 超赞的CSS3进度条 可以随进度显示不同颜色

    原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...

  9. CSS实现进度条

    进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等. 以前如果想要创建一个进度条的动画效果,没有使用 ...

  10. HTML5矢量实现文件上传进度条

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

随机推荐

  1. RxJS 系列 – 目录

    请按顺序阅读 概念篇 Observable & Creation Operators Subject Observable to Subject (Hot, Cold, Warm, conne ...

  2. 二叉树的 Morris 中序遍历——O(1)空间复杂度

    回顾 问题陈述: 给定一棵二叉树,实现中序遍历并返回包含其中序序列的数组 例如给定下列二叉树: 我们按照左.根.右的顺序递归遍历二叉树,得到以下遍历: 最终中序遍历结果可以输出为: [3, 1, 9, ...

  3. 【VMware VCF】使用 VCF Import Tool 将现有 vSphere 环境转换为管理域。

    VMware Cloud Foundation 5.2 发布并引入了一个新的功能,借助 VCF Import Tool 工具可以将现有 vSphere 环境直接转换(Convert)为管理工作负载域或 ...

  4. Maven高级——私服（Nexus）

    私服 私服是一台独立的服务器,用于解决团队内部的资源共享与资源同步问题 Nexus Sonatype公司的一款maven私服产品 下载地址(需要魔法):nexus-3.49.0-02-win64.zi ...

  5. [32]（CSP 集训） CSP-S 模拟 3

    A 奇观 考虑到 CCF 可以拆开算,答案为 \((ans_c)^2\times ans_f\) 剩下的东西比较少,考虑 DP 我的 dp 是从爆搜改的,设 \(f_{i,j}\) 表示递归到第 \( ...

  6. [TK] HH的项链 离线树状数组解法

    实际上这题很难和树状数组联系起来,我感觉效率也不是很高,感觉不是正解 怎么使用树状数组 这道题我们很容易想到一点:同种物品在一个区间内只能出现一次,先不考虑别的问题,我们想出下面这种使用树状数组的思路 ...

  7. vue的计算属性computed和监视属性waatch的区别

    共同的:都是用于监听数据变化的属性: 计算属性:必须有返回值return ,依赖其它属性值,其它属性值发生变化的时候就会重新计算 : 监视属性:每当数据变化的时候就会触发执行,watch有两个新值和旧 ...

  8. 介绍一下 websocket

    一般的http请求都是短连接,而webpack的使用可以建立长连接 : 什么是 websocket websocket 是一种网络通信协议,是 HTML5 开始提供的一种在单个 TCP 连接上进行全双 ...

  9. 16 Transformer 的编码器（Encodes）——我在做更优秀的词向量

    博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...

  10. 深入解析Spring AI框架：在Java应用中实现智能化交互的关键

    今天我们的Spring AI源码分析主题即将结束.我已经对自己感兴趣的基本内容进行了全面的审视,并将这些分析分享给大家.如果你对这个主题感兴趣,可以阅读以下几篇文章.每篇文章都层层递进,深入探讨相关内 ...