脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery 进度条实例

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

 更新时间：2016年10月24日 10:10:42   作者：Struggle0930  
这篇文章主要介绍了html、css和jquery相结合实现简单的进度条效果的实例代码，这个进度条特别简单，首先html里面的话就是一个div里面嵌套一个div，然后写好想要的样式就行了，具有一定的参考借鉴价值，感兴趣的朋友一起看看吧

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

<!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 实现表单验证功能

    使用 jQuery 实现表单验证功能

    表单作为 HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。下面通过实例代码给大家介绍jQuery 实现表单验证功能
    2017-07-07
  • jQuery对象的链式操作用法分析

    jQuery对象的链式操作用法分析

    这篇文章主要介绍了jQuery对象的链式操作用法,结合实例形式分析了链式操作的原理、特点及相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • jQuery实现的简单无刷新评论功能示例

    jQuery实现的简单无刷新评论功能示例

    这篇文章主要介绍了jQuery实现的简单无刷新评论功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下
    2017-11-11
  • 深入理解jQuery事件绑定

    深入理解jQuery事件绑定

    下面小编就为大家带来一篇深入理解jQuery事件绑定。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Easyui 之 Treegrid 笔记

    Easyui 之 Treegrid 笔记

    easyui是一种基于jQuery的用户界面插件集合。本文是小编自己遇到的一些有关easyui treegrid的问题记录，特此分享脚本之家平台供大家参考
    2016-04-04
  • jquery ajax 登录验证实现代码

    jquery ajax 登录验证实现代码

    ajax 登录验证实现代码，这里用到了jquery，当然如果不想用，可以参考脚本之前发布的文章。
    2009-09-09
  • JQuery常用选择器功能与用法实例分析

    JQuery常用选择器功能与用法实例分析

    这篇文章主要介绍了JQuery常用选择器功能与用法,结合实例形式分析了jquery常见选择器基本功能、使用方法及操作注意事项,需要的朋友可以参考下
    2019-12-12
  • jquery 操作DOM案例代码分享

    jquery 操作DOM案例代码分享

    jquery 操作DOM案例，实现图片的显示，需要的朋友可以参考下
    2012-04-04
  • jquery实现适用于门户站的导航下拉菜单效果代码

    jquery实现适用于门户站的导航下拉菜单效果代码

    这篇文章主要介绍了jquery实现适用于门户站的导航下拉菜单效果代码,可实现鼠标滑过菜单项实现下拉列表显示效果的功能,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jquery插件实现悬浮的菜单

    jquery插件实现悬浮的菜单

    这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04

最新评论