当前位置: 秋叶网络博客 前端编程 ◊ Js实现简单进度条随数字拉伸宽度

Js实现简单进度条随数字拉伸宽度

作者:秋了秋 发表时间:2015年08月04日

一个简单得不能再简单的js特效,自己一个一个敲出来的,因为看到有些网站有一些数字的递增特效,其实就是js的定时器Interval的效果,于是就试着写了下,扩展性很强,明白原理后就又写了个宽度的变化,一样的道理。关键是简单,我就喜欢简单完美的东西。 先看效果demo:

code代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

代码与注释如下:

<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,其它自行扩展。

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/373.html
目录: 前端编程 | 标签: 进度条 | 20613次阅读