当前位置:首页 »“秋了秋”个人博客 » 前端编程 » 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,其它自行扩展。

1
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://netblog.cn/blog/373.html
目录: 前端编程标签: 进度条 24197次阅读

请求播放音乐,请点击播放

登 录
点击获取验证码
还没账号?点击这里