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. ASP.NET Core – Program.cs and Startup.cs 小笔记

    前言 ASP.NET Core 6.0 以后, 默认模板去掉了 Program.cs 的 namespace, class 和 Startup.cs, 一开始看会有点懵. 这篇大概记入一下, prog ...

  2. 七、Scrapy框架-案例1

    1. 豆瓣民谣Top排名爬取 1.1 构建scrapy项目 安装Scrapy库 pip install scrapy 创建Scrapy项目 通过cmd进入命令窗口,执行命令scrapy startpr ...

  3. 【赵渝强老师】在Spark SQL中读取JSON文件

    Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个编程抽象叫做DataFrame并且作为分布式SQL查询引擎的作用.为什么要学习Spark SQL?如果大家了解Hive的话,应该 ...

  4. springmvc参数传递不给参数值默认值设置方法

    @RequestMapping("hello") public voiid test001(@RequestParam(defaultValue = "11") ...

  5. php获取支付宝用户信息

    php获取支付宝用户信息 一:创建应用 要在您的应用中使用支付宝开放产品的接口能力: 您需要先去蚂蚁金服开放平台(open.alipay.com),在开发者中心创建登记您的应用,此时您将获得应用唯一标 ...

  6. Nuxt.js 应用中的 page：finish 钩子详解

    title: Nuxt.js 应用中的 page:finish 钩子详解 date: 2024/10/9 updated: 2024/10/9 author: cmdragon excerpt: pa ...

  7. softirq和hardirq中断亲和度

    /proc/interrupts 和 /proc/softirqs 两者是相互关联的,但它们各自记录的信息和作用有所不同,反映了硬中断和软中断的两个处理阶段. 两者的关系: 硬中断引发软中断: 硬中断 ...

  8. .NET云原生应用实践（一）：从搭建项目框架结构开始

    开篇 很早之前就想做一套案例,介绍.NET下如何从零开始搭建一个云原生的应用程序.不过这个话题有点大,会要包含很多内容.我本打算从新建一个ASP.NET Core Web API应用程序开始介绍,但又 ...

  9. C#/.NET/.NET Core优秀项目和框架2024年9月简报

    前言 公众号每月定期推广和分享的C#/.NET/.NET Core优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍.功能特点.使用方式以及部分功能截图 ...

  10. GitLab +Jenkins + WebHook配置自动发版

    1.jenkins安装插件 需要安装插件:Gitlab Hook Plugin和Gitlab Plugin 2.Jenkins配置job 复制这里的url,需要在后面gitlab的配置中使用到. 基本 ...