H5新标签之进度条:
<meter></meter>标签是进度条标签,[max]和[min]属性设置其最大值和最小值,[optimum]属性设置最佳状态,[value]属性设置当前值,[low]属性和[high]设置进度条情景状态(让进度条随着进度变化呈现出不同的效果)。
实现的逻辑:使用JavaScript操纵DOM,让meter进度条间隔若干秒进度增加若干,直到加满为止。
拓展说明:
window.onload()函数是窗体加载函数,当窗体加载完毕时执行该函数。
setInterval([函数],[时间间隔])就是一个计时器,它表示隔多少毫秒执行该函数。
源代码实例如下:
<!doctype html><html><head><meta charset="UTF-8"><title></title><style type="text/css">meter{width: 500px;height: 40px;}</style><script type="text/javascript">/*在窗体加载完毕时进度条开始执行:每0.05秒进度加1*/window.onload=function(){/*获得目标元素*/var obj=document.getElementById('progressDemo');/*计时器,进行进度累加*/var timer=setInterval(function(){/*获得当前进度*/var currentValue=parseInt(obj.getAttribute('value'));/*简单的逻辑判断:进度是否超过最大值*/if(currentValue<100){/*进度在当前的基础上+1*/obj.setAttribute('value',currentValue+1);}else{/*进度归为0*/obj.setAttribute('value',0);}},50);}</script></head><body><meter max="100" min="0" value="0" low="30" high="80" id="progressDemo"></meter></body></html>