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

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

作者:秋叶 发表时间:2015年8月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,其它自行扩展。

目录: 前端编程 | 标签: | 21103次阅读