HTML5 progress与meter元素详解-优快云博客

progress元素代表一个任务的完成进度，这个进度可以是不确定，表示进度正在进行，但不清楚
还有多少工作量没有完成，也可以用0到某个最大数字（比如100）之前的数字来标识准确的进度
完成情况（比如进度百分比）
该元素具有两个表示当前任务完成情况的属性，value属性代表已经完成了多少工作量，max属性
表示总共有多少工作量。工作量的单位是随意的，不用指定。
在设定属性时，value属性和max属性只能指定为有效的浮点数，value属性的值必须大于0，且

小于或等于max属性，max属性的值必须大于0.

</body>

<body>
meter元素表示规定范围内的数量值。例如，磁盘使用量，或某个候选者
投票人数占总投票人数的比例等。

<p>磁盘使用量： <meter value="40" min="0" max="160">40/160</meter>GB</p>
<p>你的得分是：
<meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter>
</p>
不是一定要使用属性
<meter>80%</meter>
<meter>3/4</meter>
下面写法是不正确的，因为画面上什么都不显示
<meter value="75" min="0" max="100"></meter>
</body>

为了一个使用range对象删除元素或元素中内容的代码示例，示例页面中显示一个div
元素或元素中内容的代码示例，示例页面中显示一个div元素，一个"删除内容"按钮与一个
“删除元素”按钮。diV元素中显示一些文字，用户点击“删除内容”按钮时；单击“删除元素”
按钮时，将整个div元素从页面上删除

代码显示效果如下：

点击删除内容效果如下：

点击删除元素效果如下：

<div id="div" style="background-color:#e0a0b0;width:300px;height:50px;">
元素中内容</div>
<button onclick="deleteRangeContents(true);">删除内容</button>
<button onclick="deleteRangeContents(false);">删除元素</button>
<script>
function deleteRangeContents(flag){
var div = document.getElementById("div");
var rangeObj = document.createRange();
if(flag){
rangeObj.selectNodeContents(div);
rangeObj.deleteContents();}
else{
rangeObj.selectNode(div);
rangeObj.deleteContents();
}
}
</script>

用Range对象从一个元素中的文字节点中删除文字

使用Range对象删除元素的示例，示例页面中显示一个表格与一个按钮，用户点击按钮时通过
Range对象的Setstartbefore方法与setEndAfter方法使range对象代表的区域中包含表格
的第一行，然后将改行从页面中删除。
<script>
function DeleteFirstRow(){
var table = document.getElementById("myTable");
if(table.rows.length>0){
var row = table.rows[0];
var rangeObj = document.createRange();
rangeObj.setStartBefore(row);
rangeObj.setEndAfter(row);
rangeObj.deleteContents();
}
}
</script>
</head>
<body>
<table id="myTable" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<button onclick="DeleteFirstRow()">删除第一行</button>
</body>