| <object width="560" height="349" data="http://titan/myimaginaryfile"> <param name="allowFullScreen" value="true"/> <b>Sorry!</b> We can't display this content </object> |
如果data属性引用的资源不存在，则显示object元素中的内容。
进度条
progress元素表示进度条。支持的属性包括：
1）max：表示任务的最大值；
2）value：定义了当前的进度，位于0到max属性的值之间；
3）form：所属的一个或多个表单。
当max属性被省略时，范围是0到1，而value属性则使用浮点数来表示进度，例如0.3表示30%。
| <progress id="myprogress" value="10" max="100"></progress> <p> <button type="button" value="30">30%</button> <button type="button" value="60">60%</button> <button type="button" value="90">90%</button> </p> <script> var buttons = document.getElementsByTagName('BUTTON'); var progress = document.getElementById('myprogress'); for(var i = 0;i < buttons.length; i++){ buttons[i].onclick = function(e) { progress.value = e.target.value; }; } </script> |
上面给出的例子演示了点击不同的button让progress显示不同的值，在chrome中的效果如下：
显示范围里的值
meter元素显示某个范围内的某个值。支持的属性包括：
1）min和max：指定可能只所处范围，可以用浮点数；
2）low：指定低值范围，在它之下的所有制都被认为是过低；
3）high：指定高值范围，在它之上的所有值都被认为是过高；
4）optimum：指定“最佳”值；
5）value：必须，度量的当前值；
6）form：所属的一个或多个表单。
| <meter id="mymeter" value="90" min="10" max="100" low="40" high="80"optimum="60"></meter> <p> <button type="button" value="30">30%</button> <button type="button" value="60">60%</button> <button type="button" value="90">90%</button> </p> <script> var buttons = document.getElementsByTagName('BUTTON'); var meter = document.getElementById('mymeter'); for(var i = 0;i < buttons.length; i++){ buttons[i].onclick = function(e) { meter.value = e.target.value; }; } </script> |
当meter元素的value值为过低和过高，以及最佳值时，浏览器会以不同的方式呈现它们
