900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > HTML5+JavaScript实现进度条效果

HTML5+JavaScript实现进度条效果

时间:2019-04-05 07:47:32

相关推荐

HTML5+JavaScript实现进度条效果

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。