使用html5的页面设置标签–progress的使用

在很多时候,我们都需要显示一个进度条,来表示当前的状态,比如视频加载,图片加载,某项任务的完成状况等等,这时候我们使用的可能就是通过后端来操作。

在html5,提供了一个progressBar标签来是的这个显示很简单。

输入代码:

———————————————————————————————

<!DOCTYPE HTML> <html> <head> <title>使用html5的页面设置标签–progress的使用</title> <meta charset=”UTF-8″> <script type=”text/javascript”>

function button_onclick(){//处理点击的事件 $(“span”).textContent=”0″;//把span里面的内容值设为0 for(var i=0;i<100;i++){ alert(i); //通过alert();使得页面停留在当前状态 updateProgress(i);//更新他的值 } } function updateProgress(newValue){ //这个是更新progresBar的值的函数 var progressBar=$(“p”); progressBar.value=newValue; $(“span”).value=newValue; } function $(id){ //这个函数是简单更具id获得元素 return document.getElementById(id); } </script> </head> <body> <cection> <h2>progress的使用</h2> <p>完成的百分比:<progress id=”p” max=”100″><span id=”span”>0</span>%</progress></p> <input type=”button” onclick=”button_onclick()” value=”点击”> </section> <h2><font color=”green”>记住我们<a href=”http://www.yugaga.com“>娱嘎嘎</a></font></h2> </body> </html>

————————————————————————————————————-

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/progress.htm

共有 3 条评论

Top