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. ES6之常用开发知识点：let 和 const 命令详解（二）

    let命令 基本用法 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 根据上面结果显示,let声明的变 ...

  2. [JS设计模式]：鸭子类型与多态

    鸭子类型 编程语言按照数据类型大体可以分为两类,一类是静态类型语言,另一类是动态类型语言. 动态类型语言对变量类型的宽容给实际编码带来了很大的灵活性.由于无需进行类型检测,我们可以尝试调用任何对象的任 ...

  3. 商业银行国际结算规模创新高，合合信息AI助力金融行业智能处理多版式文档

    随着我国外贸新业态的快速增长,银行国际结算业务在服务实体经济发展.促进贸易投资便利化进程中发挥了越来越重要的作用.根据中国银行业协会近日发布的<中国贸易金融行业发展报告(2023-2024)&g ...

  4. vector<char>转string的方法

    要将 std::vector<char> 转换为 std::string,可以通过 std::string 的构造函数直接从 vector 中构建字符串. 假设 std::vector&l ...

  5. 检查 .net 的版本号和所有的dotnet 的sdk

    查看版本号: dotnet --version 查看所有的 sdks dotnet --list-sdks

  6. JOI Open 2016

    T1 JOIRIS 你在玩俄罗斯方块,游戏区域是一个宽度为 \(n\),高度足够大的矩形网格.初始时第 \(i\) 列有 \(a_i\) 个方块. 给定参数 \(k\),你可以做不超过 \(10^4\ ...

  7. 在 openEuler 22.03 上安装 KubeSphere 实战教程

    作者:老 Z,中电信数智科技有限公司山东分公司运维架构师,云原生爱好者,目前专注于云原生运维,云原生领域技术栈涉及 Kubernetes.KubeSphere.DevOps.OpenStack.Ans ...

  8. jmeter-模拟带参数的请求与上传文件

    请求参数照着前端请求的样式填即可: header带content: header不带content_type: 总结:上传文件时headers里面不能带content_type参数

  9. Octave 安装教程

    Octave 用心写著. Octave为GNU项目下的开源软件.同时它也是一种语言,专注于解决线性计算问题.因为对于矩阵计算的优化,使得其速度远高于循环计算.语法兼容Linux shell. Octa ...

  10. 【分享】用typescript结合react编写代码，引入第三方库模块报错的解决办法

    1.前提 我用  npx create-react-app my-react-ts-app --template typescript  创建了一个应用,加了typescript到项目中; 问题来了, ...