HTML5使用<progress>进度条、<meter>刻度条

1、<progress>进度条

定义进度信息使用的是 progress 标签。它表示一个任务的完成进度,这个进度可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成,也可以用0到某个最大数字(如:100)之间的数字来表示准确的完成情况(如:进度百分比)。

 progress 标签的属性:

属性说明
value

表示已经完成了多少工作量

max

表示总共有多少工作量

【实例】在网页中使用 progress 标签添加进度条。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>使用进度条</title><script type="text/javascript">function button_onclick() {for (var i = 0; i <= 100; i++)updateProgress(i);}function updateProgress(newValue) {var progressBar = document.getElementById('p');progressBar.value = newValue;document.getElementsByTagName('span')[0].textContent = newValue;}</script>
</head><body><section><h2>progress元素的使用实例</h2><p>完成百分比: <progress id="p" max=100></progress><span>0</span>%</p><input type="button" onClick="button_onclick()" value="请点击" /></section>
</body></html>

执行结果:

 

2、<meter>刻度条

定义刻度信息使用的是 meter 标签,该标签用来表示规定范围内的数量值,如磁盘使用量比例、关键词匹配程度等。

需要注意的是,meter 标签不可以用来表示那些没有已知范围的任意值,例如:重量、高度,除非已经设定了这些值的范围。

meter 标签的属性:

属性说明
value当前标量的实际值
min当前标量的最小值
max当前标量的最大值
low当前标量的低值区
high当前标量的高值区
optimum最佳值,其范围在最小值与最大值区间当中

【实例】在网页中使用 meter 标签添加刻度条。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>使用刻度条</title>
</head>
<body><p>磁盘使用量:<meter value="50" min="0" max="160">50/160</meter> GB</p><p>你的得分是:<meter value="91" min="0" max="100" low="10" high="90" optimum="100"></meter> A+</p>
</body>
</html>

执行结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/40864.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vs2022安装qt vs tool

1 缘由 由于工作的需要&#xff0c;要在vs2022上安装qt插件进行开发。依次安装qt&#xff0c;vs2022&#xff0c;在vs2022的扩展管理中安装qt vs tool。 2 遇到困难 问题来了&#xff0c;在qt vs tool的设置qt version中出现问题&#xff0c;设置msvc_64-bit时出现提示“invali…

西安石油大学 课程习题信息管理系统(数据库课设)

主要技术栈 Java Mysql SpringBoot Tomcat HTML CSS JavaScript 该课设必备环境配置教程&#xff1a;&#xff08;参考给出的链接和给出的关键链接&#xff09; JAVA课设必备环境配置 教程 JDK Tomcat配置 IDEA开发环境配置 项目部署参考视频 若依框架 链接数据库格式注…

【中项第三版】系统集成项目管理工程师 | 第 4 章 信息系统架构① | 4.1-4.2

前言 第4章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节属于技术相关的内容&#xff0c;学习要以教材为准。本章分值预计在4-5分。 目录 4.1 架构基础 4.1.1 指导思想 4.1.2 设计原则 4.1.3 建设目标 4.1.4 总体框架 4.2 系统架构 4.2.1 架构定义 4.…

Invoice OCR

Invoice OCR 发票识别 其他类型ORC&#xff1a; DIPS_YTPC OCR-CSDN博客

25款404网页源码(上)

25款404网页源码&#xff08;上&#xff09; 1部分源码 2部分源码 3部分源码 4部分源码 5部分源码 6部分源码 7部分源码 8部分源码 9部分源码 10部分源码 11部分源码 12部分源码 领取完整源码下期更新 1 部分源码 <!DOCTYPE html> <html><!-- 优选源码 gulang.…

数据结构基础--------【二叉树基础】

二叉树基础 二叉树是一种常见的数据结构&#xff0c;由节点组成&#xff0c;每个节点最多有两个子节点&#xff0c;左子节点和右子节点。二叉树可以用来表示许多实际问题&#xff0c;如计算机程序中的表达式、组织结构等。以下是一些二叉树的概念&#xff1a; 二叉树的深度&a…

Element-UI - el-table中自定义图片悬浮弹框 - 位置优化

该篇为前一篇“Element-UI - 解决el-table中图片悬浮被遮挡问题”的优化升级部分&#xff0c;解决当图片位于页面底部时&#xff0c;显示不全问题优化。 Vue.directive钩子函数已在上一篇中详细介绍&#xff0c;不清楚的朋友可以翻看上一篇&#xff0c; “Element-UI - 解决el-…

深入刨析Redis存储技术设计艺术(二)

三、Redis主存储 3.1、存储相关结构体 redisServer:服务器 server.h struct redisServer { /* General */ pid_t pid; /* Main process pid. */ pthread_t main_thread_id; /* Main thread id */ char *configfile; /* Absolut…

Interpretability 与 Explainability 机器学习

「AI秘籍」系列课程&#xff1a; 人工智能应用数学基础人工智能Python基础人工智能基础核心知识人工智能BI核心知识人工智能CV核心知识 Interpretability 模型和 Explainability 模型之间的区别以及为什么它可能不那么重要 当你第一次深入可解释机器学习领域时&#xff0c;你会…

Zabbix配置文件中Server和ServerActive参数讲解

目录 参数总结 实例&#xff1a; Zabbix Server 配置 (zabbix_server.conf) Zabbix Agent 配置 (zabbix_agentd.conf) 配置文件解析 实际应用 Zabbix Server 配置文件 (zabbix_server.conf) 对代理端的影响 1. Server 参数 2. ServerActive 参数 Zabbix Agent 配置文…

ubuntu 22 安装 lua 环境 编译lua cjson 模块

在 windows 下使用 cygwin 编译 lua 和 cjson 简直就是灾难&#xff0c;最后还是到 ubuntu 下完成了。 1、下载lua源码&#xff08;我下载的 5.1 版本&#xff0c;后面还有一个小插曲), 直接解压编译&#xff0c;遇到一个 readline.h not found 的问题&#xff0c;需要安装 re…

python使用langchain整合通义千文

首先pip安装langchain和dashscope pip install langchain pip install langchain_community pip install dashscope --upgrade然后测试一下运行效果 from langchain_community.chat_models.tongyi import ChatTongyi from langchain.schema import HumanMessage #api_key可以…

如何使用C++中的内联函数和编译器优化

在C中&#xff0c;内联函数&#xff08;inline functions&#xff09;是一种请求编译器尝试在调用点将函数体展开&#xff0c;而不是按照常规函数调用的方式&#xff08;即产生调用指令、保存寄存器、栈帧操作等&#xff09;来执行的特殊函数。内联函数主要用于小的、频繁调用的…

CentOS命令格式及常用命令

在CentOS中&#xff0c;系统目录结构遵循了标准的Linux文件系统层次结构&#xff08;Filesystem Hierarchy Standard&#xff0c;FHS&#xff09;。下面是CentOS系统中一些重要的目录及其用途的介绍&#xff1a; 1. /&#xff08;根目录&#xff09;&#xff1a;整个文件系统的…

207 课程表

题目 你这个学期必须选修 numCourses 门课程&#xff0c;记为 0 到 numCourses - 1 。 在选修某些课程之前需要一些先修课程。 先修课程按数组 prerequisites 给出&#xff0c;其中 prerequisites[i] [ai, bi] &#xff0c;表示如果要学习课程 ai 则 必须 先学习课程 bi 。 …

ArcGIS Pro SDK (七)编辑 13 注解

ArcGIS Pro SDK &#xff08;七&#xff09;编辑 13 注解 文章目录 ArcGIS Pro SDK &#xff08;七&#xff09;编辑 13 注解1 注释构建工具2 以编程方式启动编辑批注3 更新批注文本4 修改批注形状5 修改批注文本图形6 接地到网格 环境&#xff1a;Visual Studio 2022 .NET6 …

在 PostgreSQL 中,如何处理数据的版本控制?

文章目录 一、使用时间戳字段进行版本控制二、使用版本号字段进行版本控制三、使用历史表进行版本控制四、使用 RETURNING 子句获取更新前后的版本五、使用数据库触发器进行版本控制 在 PostgreSQL 中&#xff0c;处理数据的版本控制可以通过多种方式实现&#xff0c;每种方式都…

ensorFlow是由Google开发的

TensorFlow是由Google开发的一个开源的深度学习框架。它提供了一种灵活且高效的方法来构建、训练和部署各种机器学习模型。 TensorFlow的基本概念是计算图&#xff08;computational graph&#xff09;。在TensorFlow中&#xff0c;用户通过定义计算图来描述模型的结构和计算流…

JVM(Java虚拟机)详解(JVM 内存模型、堆、GC、直接内存、性能调优)

JVM&#xff08;Java虚拟机&#xff09; JVM 内存模型 结构图 jdk1.8 结构图&#xff08;极简&#xff09; jdk1.8 结构图&#xff08;简单&#xff09; JVM&#xff08;Java虚拟机&#xff09;&#xff1a; 是一个抽象的计算模型。如同一台真实的机器&#xff0c;它有自己…

思维导图插件--jsMind的使用

vue引入jsmind&#xff08;右键菜单&#xff09;_jsmind.menu.js-CSDN博客 第一版 vue-JsMind思维导图实现&#xff08;包含鼠标右键自定义菜单&#xff09;_jsmind 右键菜单-CSDN博客 // 新增节点addNode() {console.log(this.get_selected_nodeid());this.get_selected_…