Js实现简单进度条随数字拉伸宽度
作者：秋了秋 发表时间：2015年08月04日
一个简单得不能再简单的js特效，自己一个一个敲出来的，因为看到有些网站有一些数字的递增特效，其实就是js的定时器Interval的效果，于是就试着写了下，扩展性很强，明白原理后就又写了个宽度的变化，一样的道理。关键是简单，我就喜欢简单完美的东西。 先看效果demo：
代码与注释如下：
<style>#my{background:#ddd;display:block}</style><!--这是样式-->
<span id="my"></span><!--这是html容器-->
<script><!--这是javascript脚本-->
var em=document.getElementById('my'),timer;
a = 0;
em.style.width=0+"px";
timer = setInterval(function(){//定时器开始
if(a>=90){clearInterval(timer);}//清除定时器
else{
a++;//a值递增
em.style.width=a+"%";//宽度递增
em.innerHTML=a;//把a值循环写入html容器
}
},50);//设置定时器速度
</script>
写完后才发现这就是网站进度条的简单效果，当然不包括美化css，其它自行扩展。
1
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/373.html