<!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毫秒执行一个匿名函数，里面的代码就是一次增加一个像素，当然你这里也可以用百分比去增加像素。介绍另外一种方法，也可以用动画去实现进度条的效果。。。。。。有兴趣的可以去尝试一下

html + css + jquery实现简单的进度条实例的更多相关文章

  1. HTML5+CSS+JQuery 实现简单的进度条功能

    样式: <style type="text/css"> .processcontainer2{ width:450px; border:1px solid #6C9C2 ...

  2. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  3. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  4. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  5. Winfrom 简单的进度条小程序

    使用Winform空间编写简单的进度条小程序: 所需控件:Lable 标签  TextBox  文本框  progressBar  进度条控件  timer 定时器 下面是源码及效果图: /// &l ...

  6. Linux shell 下简单的进度条实现

    Linux shell 下简单的进度条实现 [root@db145 ~]# cat print_process.sh function Proceess(){ spa='' i= ] do print ...

  7. PHP+jQuery开发简单的翻牌抽奖实例

    PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...

  8. jquery自带的进度条功能如何使用？

    弹出进度条:先做弹出的功能modal,再做进度条显示.在弹出的界面上增加进度条功能 $.ajax({ xhr: function() { var xhr = new window.XMLHttpReq ...

  9. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

随机推荐

  1. 谈谈hadoop集群启动时进程那回事

    不多说,直接上干货! ==================> 1. 启动./start-dfs.sh的顺序是: namenode,datanode,secondarynamenode. 每一个前 ...

  2. celery在Django中的应用

    这里不解释celery,如果不清楚可以参考下面链接: http://docs.celeryproject.org/en/latest/getting-started/introduction.html ...

  3. springboot-18-springboot的参数封装

    springboot的参数封装, 和springmvc相识 简单参数的封装 1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交. /** * ...

  4. mybatis 小结

    1.  根据后台list 在SQL中使用到In的时候 <if test="sbidList != null and sbidList.size() > 0"> A ...

  5. mvc中的action验证登录（ActionFilterAttribute）

    方法一 :  1.创建一个全局action过滤器  (在appstart  的filterconfig中注册   filters.Add(new LoginAttribute());)  2.不需要登 ...

  6. JavaScript部分兼容性函数

    1.getElementsByClassName() function getElementsByClassName(node,classname){ if(node.getElementsByCla ...

  7. “App.exe 以附加有调试器，但没有将该调试器配置为调试此未经处理的异常。”

    目前不清楚原因,但是将项目文件放到C盘就可以正常调试运行. 记录一下

  8. C# 使用/配置Log4Net

    1.首先在项目中添加Nuget程序包... 2.然后在NuGet窗体中搜索Log4Net,然后点击安装<安装过程可能会持续几分钟,请耐心等待> 3.在项目中添加一个Config文件,如已有 ...

  9. request:fail 小程序要求的 TLS 版本必须大于等于 1.2

    把以下代码复制到txt后,把后缀改成reg扩展名的文件,然后双击运行一下,运行完后重启一下服务器,就可以了. Windows Registry Editor Version 5.00 [HKEY_LO ...

  10. ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock 问题修改

    ubuntu 常见错误–Could not get lock /var/lib/dpkg/lock 通过终端安装程序sudo apt-get install xxx或者apt-get update时出 ...