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. 小tips：node版本管理工具nvm

    nvm是node版本管理工具 为了解决node各种版本存在不兼容现象 nvm是让你在同一台机器上安装和切换不同版本的node的工具 安装 nvm-windows 最新下载地址: https://git ...

  2. 安全 – CSP (Content Security Policy)

    前言 之前讲过 CSRF.防 Cookie hacking 的. 也介绍过防 XSS 的 HtmlSanitizer. 今天再介绍 CSP. 参考 Content Security Policy 介绍 ...

  3. AtCoder Regular Contest 182（A B C）

    原来第二题比第一题简单吗 A.Chmax Rush! \(\texttt{Diff 1110}\) 给定三个序列 \(S,P,V\),其中 \(S\) 的长度为 \(N\),\(P,V\) 的长度为 ...

  4. 深入理解 Nuxt.js 中的 app:data:refresh 钩子

    title: 深入理解 Nuxt.js 中的 app:data:refresh 钩子 date: 2024/9/29 updated: 2024/9/29 author: cmdragon excer ...

  5. Codeforces Round 977 (Div. 2)

    手速局,因为水平不够三题遗憾离场. A. Meaning Mean 题意 你一个序列,你每次可以选择两个数删掉,并把他们的平均数加入到序列的末尾.当序列长度为 \(1\) 的时候,剩下的数最大值是多少 ...

  6. map&unordered_map<key,value>key使用自定义类的要求

    std::unordered_map 的键要求: std::unordered_map 是基于哈希表的数据结构. 它要求键类型必须支持哈希计算,也就是必须有对应的 std::hash 函数. 另外,键 ...

  7. is特性

    is是特性在动态路由的时候使用 ,在挂载点 component 使用,用来判断哪个组件显示 :

  8. package.json文件干什么的 ？

    package.json 是项目描述文件,记录了当前项目的信息,比如项目的名字,版本,作者,还有所依赖的第三方模块 : dependencies 是项目依赖,是项目上线时要依赖的第三方包 : devd ...

  9. Promise.all、race和any方法都是什么意思？

    // // 执行多个并行任务 const promiseAll = [ thenFs.readFile('./files/1.txt','utf8'), thenFs.readFile('./file ...

  10. 在不需要WiFi密码的情况下进行断网攻击

    本教程只能用于学习研究之用 任何未经他人允许的攻击行为都是违法行为 参考教程 https://www.youtube.com/davidbombal 准备 * kali linux 系统 这里使用的是 ...