js-进度条-动画
2024-10-07 09:59:37
效果图如下：
HTML：
<h1>js实现进度条</h1>
<div id="warp">
<div id="inner" class="nn"></div>
</div>
<br>
<button onclick="move()">加载</button>
css:
#warp{
width: 100%;
height: 30px;
background-color: #ddd;
}
#inner{
width: 1%;
background-color: #4caf50;
height: 30px;
/*下面这个过渡属性一定不能加,严重影响动画效果*/
/*transition: all 0.4s ease;*/
}
js:
function move(){
//通过id获取
var inner=document.getElementById("inner");
//通过类来获取
// var inner=document.getElementsByClassName("nn")[0];
var width=1;
var adds=setInterval(addwidth,10);
function addwidth(){
if(width >= 100){
clearInterval(adds);
}else{
width++;
inner.style.width = width + '%';
}
}
}
小白一枚，路过大神请嘴下留情，多多指教谢谢。欢迎留下宝贵意见和指出错误呀呀
最新文章
- 关于ios 3D变换 CGAffineTransformIdentity
- 仿iphone日历插件(beta)
- POJ 2195 Going Home 最小费用最大流 尼玛，心累
- jython学习笔记2
- Linux命令：traceroute（windows中为tracert）
- json2.js 使用
- ThinkPHP之中getlist方法实现数据搜索功能
- NSNumber、NSValue、NSDate、NSObject
- Linux Tomcat必须知道的命令
- Codeforces Round #219 (Div. 1)（完全）
- 【转载】test和cmp比较
- Linux curl命令参数详解--转载
- 【转】C/C++ 内存对齐
- springmvc-3.2-jsr303解决服务端验证问题
- Dockerfile文件格式的简单介绍
- webkit 渲染机制
- requests库详解 --Python3
- Python error: Microsoft Visual C++ 9.0 is required (Unable to find vcvarsall.bat)解决方案
- Django中的ORM框架使用小技巧
- 【漏洞挖掘】攻击对外开放的Docker API接口