HTML5 中的新属性meter的使用

最新推荐文章于 2023-08-23 20:57:38 发布
最新推荐文章于 2023-08-23 20:57:38 发布
阅读量2.7k 收藏 9
点赞数 2
文章标签： html5 解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zbq764522533/article/details/76275263
版权

属性 值 描述
form form_id 规定 <meter> 元素所属的一个或多个表单。
high number 规定被视作高的值的范围。
low number 规定被视作低的值的范围。
max number 规定范围的最大值。
min number 规定范围的最小值。
optimum number 规定度量的优化值。
value number 必需。规定度量的当前值。

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

比如：磁盘使用情况，查询结果的相关性等。

注意： <meter> 不能作为一个进度条来使用， 进度条 <progress> 标签。


下面是个栗子：


这是一个学生档案表单，当输入入学成绩input时，基础水平时个meter度量属性，会实现动态显示，实际上基于Javascript实现的动态显示，当入学成绩input失去光标时，就触发function()，代码如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>学生档案</title>
		<style type="text/css">
			.con {
				margin: 50px auto;
				width: 500px;
				height: 800px;
				border: 1px solid #ccc;
				padding: 50px;
			}
			
			input,
			select,
			meter,
			progress,
			label {
				width: 350px;
				height: 30px;
				margin-left: 50px;
			}
		</style>
	</head>

	<body>
		<div class="con">
			<form>
				<label for="">姓名:</label><br />
				<input type="text" value="" placeholder="请输入姓名哦" /><br />
				<label for="">手机:</label><br />
				<input type="number" value="" placeholder="请输入手机号哦" /><br />
				<label for="">邮箱:</label><br />
				<input type="email" value="" placeholder="请输入邮箱哦" /><br />
				<label for="">所属学院：</label><br />
				<select>
				<option>外国语学院</option>
				<option>中文学院</option>
				<option>计算机学院</option>
			</select><br />
				<label for="">入学成绩：</label><br />
				<input type="number" id="num" /><br />

				<label for="">基础水平：</label><br />
				<meter min="0" max="100" value=""></meter><br />

				<label for="">入学日期：</label><br />
				<input type="date" /><br />
				<label for="">毕业日期：</label><br />
				<input type="date" /><br />
				<label for="">课程进度：</label><br />
				<progress value="25" max="100"></progress><br />

			</form>
			<script>
					var meterScore = document.getElementsByTagName('meter')[0];				
					num.onblur = function() {		
						var TextScore = document.getElementById('num').value;
						if(TextScore==null||TextScore==""||TextScore<0||TextScore>100){
							alert('你输入的数字有误');
							return ;
						}else{
							meterScore.value=TextScore;
							
						}
						

				}
			</script>
		</div>
	</body>

</html>



叫我胖哒
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML ＜meter＞ 标签
玄链教育
07-15 3046
meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性，等等。注释： 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 标签。
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
热门推荐
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
HTML5 meter标签的使用
huzijia888的博客
11-13 1819
#la{ width:200px; } function test(){ var kk = document.getElementById("la"); var cc = document.getElementById("cc");    kk.value=cc.value; } 0100
初识html
qq_45378970的博客
09-09 306
HTML HTML，超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。我们写好html文件后，在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。 前端编辑器下载地址 hbuilder编辑器 超好用的编辑器哦 第一个html实例 <!DOCTYPE html> <html> <head> <meta charset="
html5中meter讲解_Java中的得墨meter耳定律–最少知识原理–实际示例
最佳 Java 编程
06-14 226
html5中meter讲解 得墨meter耳定律（也称为最少知识定律）是一种编码原理，它表示模块不应该知道其操作的对象的内部细节。 如果代码取决于特定对象的内部细节，则很有可能一旦该对象的内部发生更改，它就会中断。 由于封装是关于隐藏对象的内部细节并仅公开操作的，因此它也声明了Demeter定律 。 许多Java程序员都犯了一个错误，那就是它使用getter方法公开了对象的内部细节，而这正是知...
HTML5 progress和meter控件
lmrylll的博客
06-13 1688
在HTML5中，新增了progress和meter控件。progress控件为进度条控件，可表示任务的进度，如Windows系统中软件的安装、文件的复制等场景的进度。meter控件为计量条控件，表示某种计量，适用于温度、重量、金额等量化的表现。
HTML5 progress和meter控件_动力节点Java学院整理
09-28
总之，`<progress>`和`<meter>`是HTML5中增强用户界面的重要工具，它们提供了直观的可视化方式来呈现数据和进程，提升了用户体验。理解并熟练运用这两个元素，可以使得网页应用的交互更加丰富和生动。
HTML5新增属性与表单元素
06-06
为了保证在不支持`hidden`属性的旧浏览器中也能隐藏元素，开发者可以在CSS中使用`[hidden]{display:none;}`的样式来增强兼容性。 #### 1.4 draggable属性 `draggable`属性在HTML5中用于控制元素是否可拖拽。该属性...
HTML5标签使用方法详解
09-28
HTML5中也移除了一些过时的标签，如`<acronym>`、`<applet>`、`<basefont>`、`<big>`等，鼓励开发者使用CSS来实现样式控制。这些改变使得HTML5更加现代化，更注重内容而非表现形式。 总的来说，HTML5的新标签为...
HTML5 笔记1— details元素、mark元素、progress元素、meter元素
erdouzhang
03-10 1612
基本只有google支持1.detail元素有<summary>未点击前：点击三角形展开内容：<body> <details> <summary>HTML5+CSS3</summary> <p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后...</p> </details> </body>2detail元素没有<summary>点击前：点
meter元素的常用属性值
无区新手的博客
03-28 4772
属性 说明 high 定义度量的值位于哪个点被界定为高的值 low 定义度量的值位于哪个点被界定为低的值 max 定义最大值，默认值是1 min 定义最小值，默认值是0 optimum 定义说明样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好，如果该值低于low属性的值，则意味着值越低越好 value 定义度量的值...
Jmeter函数作用域实时取值覆盖[针对HTTP Request等控制器]
weixin_30732825的博客
03-14 233
jmeter的属性和变量可以简单理解为编程里面的全局变量和局部变量。属性是全局可见，可以跨线程组传递调用，而变量基本上只能存在于一个线程组中（在测试计划定义的变量也是可以跨线程组传递的）。同线程组内的数据传递一般用变量，例如，存放一个临时的过程值。多个进程组共用的一般用属性，例如，登录操作的session值需要传给其他线程组用，避免每个线程组都重复登录。 属性的创建和赋值及访问方法如下： ...
Html5新特性之meter
qq_53541336的博客
03-04 1744
主要讲解一下HTML5中新增的特性meter，平时在做网页的时候这个特性还是用处很大的，比如电影评分呀以及饭店评分等可能都会需要用到meter这个属性。 meter元素：用于表示指定范围内的数值，例如，显示硬盘容量或者对某个后选者的投票人数占投票总人数的比例等，都可以使用meter元素。meter元素有多个常用的属性。
meter元素和progress元素、address元素
qq_26270303的博客
07-01 1787
  meter元素表示规定范围内的数量值。  meter元素有6个属性！  1、value属性：在元素中特地地表示出来的实际值。该属性值默认为0，可以为该属性制定一个浮点小数值。  2、min属性：指定规定范围时允许实用的最小值，默认0，在设定该属性时所设定的值不能小于0。  3、max属性：指定规定的范围时允许使用的最大值，如果设定时该属性值小于min的值，那么把min属性的值视为最大值。max...
第17章 meter元素
一直专注于互联网
11-29 200
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;硬盘实际使用情况&lt;meter va
HTML5新增标签的汇总与详解
dianhuang8028的博客
12-20 147
定义表单里一个生成的键值。规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。 autofocus autofocus 使keygen字段在页面加载时获得焦点 challenge challenge 如果使用，则将keygen的值设置为在提交时询问 disabled disabled 禁用...
html交互元素(progress元素、meter元素、details/summary元素、menu元素、command元素)基本知识
TNANDXYF的博客
01-28 1736
html交互元素基本知识progress元素进度条的设置meter元素meter元素及属性details/summary元素details/summary元素的设置源代码效果图menu元素command元素相关概念选择题及参考答案选择题参考答案 progress元素 progress元素属于状态交互元素。用来表示页面中的某个任务完成的进度。progress元素具有max和value两个属性： max:表示任务的总量，默认值为1. value:表示已完成任务的数量。 应用中，可以有以下三种情况。 用法示
第一章 网页笔记(元素 属性 选择器)
weixin_46446530的博客
03-21 991
HTML5语义化标签 表示页面中一个内容区块或整个页面的标题 页面中的一个内容区块（章节 页眉 页脚或页面的其他部分） 表示页面中一块与上下文不相关的独立内容（如文章） 表示标签内容之外的，与标签内容相关的辅助信息。可做文章的侧栏 表示对整个页面或页面中的一个内容区块的标题进行组合 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元 定义标签的标题 表示页面中导航链接的部分 表示整个页面...
meter标签详解 如何控制颜色改变
最新发布
fengqixuejian的博客
08-23 1095
​ < meter> meter标签有上述6个属性，min为最小值，max为最大值, ​
HTML5新添progress与meter控件：进度与计量演示
HTML5中的progress和meter控件是两个重要的元素，用于在网页设计中增强用户体验和信息呈现。progress控件（）是一种进度条，它直观地展示了任务完成度，常用于表示任务的进度百分比，例如软件安装、文件下载等场景。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值