进度条的实现思路

最新推荐文章于 2023-07-31 10:33:24 发布

weixin_30429201

最新推荐文章于 2023-07-31 10:33:24 发布

阅读量180

点赞数

文章标签：数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/chentu279203653/p/9447313.html

版权

1.滚动条的实现思路：
1.1 在页面创建一个div元素，id为outer，设定该div的长、高、边框样式；
1.2 在id为outer的div里面创建一个子div，id为inner，设定高和outer的一模一样，长为0px。背景色为绿色。
1.3 创建一个按钮，名字为start。当点击start按钮，调用函数move_bar（）让id为inner的div的长度变长一点，然后开启定时器。每次执行定时器，拿inner的当前长度和outer的相比较，如果inner的长度小于outer的长度，则递归调用move_bar（）函数，否则停止递归。

2.示例源码：
<!DOCTYPE html>
<html>
<head>
<title>Progress demo</title>
<meta charset="utf-8">
<style type="text/css">
#box{
width:450px;
height:50px;
border:2px solid blue;
}
#progress-bar{
width:10px;
height:50px;
background-color:green;
}
#ctr-container{
margin-top:10px;
}
#ctr-container input{
width:80px;
height:30px;
}
</style>
</head>
<body>
<div id="box">
<div id="progress-bar"></div>
</div>
<div id="ctr-container">
<input type="button" value="Start" οnclick="start()"/>
</div>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function start(){

move_bar();
}

function move_bar(){
//进度条走一下
var next_width = $("#progress-bar").width()+10;
$("#progress-bar").width(next_width);

window.setTimeout(function(){
var width = $("#progress-bar").width();
if(width < 450){
move_bar();
}
},1000);
}

</script>
</body>
</html>

转载于:https://www.cnblogs.com/chentu279203653/p/9447313.html

weixin_30429201

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度条的实现思路

1.滚动条的实现思路：1.1 在页面创建一个div元素，id为outer，设定该div的长、高、边框样式；1.2 在id为outer的div里面创建一个子div，id为inner，设定高和outer的一模一样，长为0px。背景色为绿色。1.3 创建一个按钮，名字为start。当点击start按钮，调用函数move_bar（）让id为inner的div的长度变长一点，然后开启定时器。每次执行定时器，...
复制链接

扫一扫