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;你会…

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

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

207 课程表

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

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

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

如何使用HippoRAG增强LLM的记忆

大型语言模型&#xff08;LLM&#xff09;已经证明是一种非常宝贵的思考工具。经过大量文本、代码和其他媒体数据集的训练&#xff0c;它们能够创作出接近人类水平的文章、翻译语言、生成图像&#xff0c;还能以信息丰富的方式回答人们提出的问题&#xff0c;甚至可以编写不同类…

CANopen协议开发梳理总结笔记教程

0、提醒 CANOpen使用时&#xff0c;需要清楚什么是大端和小端&#xff0c;这对于CANOpen数据发送及解析时&#xff0c;有很大的帮助。且学习开发CANOpen时&#xff0c;需要具备一定的CAN基础。 1、CANOpen协议介绍 ①、什么是CANOpen协议 CANOpen协议是一种架构在控制局域网络…

基于CLIP特征的多模态大模型中的视觉短板问题

【论文极速读】 基于CLIP特征的多模态大模型中的视觉短板问题 FesianXu 20240706 at Tencent WeChat search team 前言 今天读到篇CVPR 24’的论文 [1]&#xff0c;讨论了常见的多模态大模型&#xff08;大多都基于CLIP语义特征&#xff0c;以下简称为MLLM&#xff09;中的视觉…

Python处理表格数据常用的 N+个操作

Python作为一种强大且易用的编程语言&#xff0c;其在数据处理方面表现尤为出色。特别是当我们面对大量的表格数据时&#xff0c;Python的各类库和工具可以极大地提高我们的工作效率。以下&#xff0c;我将详细介绍Python处理表格数据常用的操作。 首先&#xff0c;我们需要安…

复现YOLO_ORB_SLAM3_with_pointcloud_map项目记录

文章目录 1.环境问题2.遇到的问题2.1编译问题1 monotonic_clock2.2 associate.py2.3 associate.py问题 3.运行问题 1.环境问题 首先环境大家就按照github上的指定环境安装即可 环境怎么安装网上大把的资源&#xff0c;自己去找。 2.遇到的问题 2.1编译问题1 monotonic_cloc…

ASP.NET Core----基础学习01----HelloWorld---创建Blank空项目

文章目录 1. 创建新项目--方式一&#xff1a; blank2. 程序各文件介绍&#xff08;Project name &#xff1a;ASP.Net_Blank&#xff09;&#xff08;1&#xff09;launchSettings.json 启动方式的配置文件&#xff08;2&#xff09;appsettings.json 基础配置file参数的读取&a…