您的位置：首页 > Web前端 > JQuery

html、css和jquery相结合实现简单的进度条效果实例代码

2016-10-24 00:00 1166 查看

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery实现进度条</title>
<style type="text/css">
body{
　　padding:30px;
　　margin-left:450px;
　　margin-top:200px;
　　width:350px;
　　border: 1px solid #98AFB7;
}
.progressBar{
　　width:280px;
　　height:20px;
　　border: 1px solid #98AFB7;
　　border-radius:8px;
　　background:#e1dfdf;
}
input{
　　margin-bottom:15px;
}
span{
　　position:relative;
　　top:-20px;
　　left:290px;
}
#bar {
　　width: 0px;
　　height: 20px;
　　border-radius: 7px;
　　background: #5EC4EA;
}
</style>
//引入Jquery文件
<script src="Jquerys/jquery.js"></script>
<script type="text/javascript">
function progressBar() {
　　$("#bar").css("width", "0px");
　　var speed =20;//进度条的速度
　　bar = setInterval(function () {
　　nowWidth = parseInt($("#bar").width());
　　if (nowWidth <= 279) {
　　　　var barWidth = (nowWidth + 1);
　　　　$("#bar").css("width", barWidth + "px");
　　　　var totla = parseInt($(".progressBar").width())
　　　　var ss = barWidth / totla * 100;
　　　　$("#span_s").text(ss);
　　　　var index = $("#span_s").text().indexOf(".");
　　　　if (index != -1) {
　　　　　　var context = $("#span_s").text().substring(0, index);
　　　　　　$("#span_s").text(context);
　　　　}
　　　　else {
　　　　　　$("#span_s").text(ss);
　　　　　　if (parseInt($("#span_s").text()) == 100) {
　　　　　　alert('完成');
　　　　　　}
　　　　}
　　} else {
　　　　　　clearInterval(bar);
　　　　}
　　}, speed);
}
</script>
</head>
<body>
　　<input type="button" value="开始" onclick="progressBar()" />
　　<div class="progressBar"><div id="bar"></div></div><span id="span_s">0</span><span>%</span>
</body>
</html>

这个进度条特别简单，首先html里面的话就是一个div里面嵌套一个div，然后写好想要的样式就行，特效的实现也很简单就是，一个定时器里面写一个匿名函数里面实现也很简单，我这里是20毫秒执行一个匿名函数，里面的代码就是一次增加一个像素，当然你这里也可以用百分比去增加像素。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

jQuery简单实现提交数据出现loading进度条的方法
基于HTML5 Ajax文件上传进度条如何实现（jquery版本）
jquery实现模拟百分比进度条渐变效果代码
利用jQuery实现漂亮的圆形进度条倒计时插件
自定义刻度jQuery进度条及插件
6款新颖的jQuery和CSS3进度条插件推荐
分享8款优秀的 jQuery 加载动画和进度条插件
用jQuery模拟页面加载进度条的实现代码
jQuery EasyUI API 中文文档 - ProgressBar 进度条

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 进度条

相关文章推荐

新的分享

章节导航