<!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. 以整体思维看问题：解决单页应用，系统角色请求覆盖身份唯一标识（本项目中是session_id命名的）发送请求问题

    以前都是开始一段废话的,现在直接进入主题,首先介绍一下一些概念: 单页应用: 优点: 具有桌面应用的即时性.网站的可移植性和可访问性. 用户体验好.快,内容的改变不需要重新加载整个页面,web应用更具 ...

  2. webpack局部安装的问题

    webpack的局部安装 npm install webpack 默认状态是当前目录下安装,-g是全局安装 ---------------------------------------------- ...

  3. lua的克隆函数，table的深度拷贝

    --深度拷贝Table function DeepCopy(obj) local InTable = {}; local function Func(obj) if type(obj) ~= &quo ...

  4. sersync+rsync=实时异步备份

    环境准备 服务器两台 rsync-server:192.168.1.8  (备份服务器) sersync-node1:192.168.1.9 (需要备份的服务器) 系统 CentOS7.4 关闭防火墙 ...

  5. Ceph 块设备 - 命令，快照，镜像

    目录 一.Ceph 块设备 二.块设备 rbd 命令 三.操作内核模块 四.快照基础 rbd snap 五.分层快照 六.镜像 rbd mirror 七.QEMU 八.libvirt 九.Openst ...

  6. vscode 常用配置

    { "workbench.iconTheme": "vscode-icons", "editor.tabSize": 2, "ed ...

  7. javascript实例——鼠标特效篇(包含2个实例)

    鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一.本文将将一些与鼠标有关系的特效. 1.跟随鼠标移动的彩色星星 如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小. ...

  8. nginx重启报错：nginx: [error] invalid PID number "" in "/run/nginx.pid"

    问题描述:执行 nginx -t 是OK的,然而在执行 nginx -s reload 的时候报错 nginx: [error] invalid PID number “” in “/run/ngin ...

  9. 入门redis

    学习了大佬的博客,来源自:https://www.cnblogs.com/5ishare/p/6280023.html 一.下载 https://github.com/ServiceStack/red ...

  10. 转载：@Html.ValidationSummary(true)

    ASP.NET MVC3 Model验证总结 @Html.ValidationSummary(true)   http://www.wyjexplorer.cn/Post/2012/8/3/model ...