<!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. win7,8走网络打印机出现删除设备和打印机门未关闭的解决方法

    不多说,直接上干货! 用学校的内网连接, 即可. 右键,查看设备网页. 出现下面的情况: 多学学. 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家 ...

  2. 机器学习-KNN算法

    原理 KNN算法,又叫K近邻算法.就是在训练集中数据和标签已知的情况下,输入测试数据,将测试数据的特征与训练集中对应的特征进行相互比较,找到训练集中与之最为相似的前K个数据,则该测试数据对应的类别就是 ...

  3. 02-python基本数据类型

    python的变量不需要声明, 但变量使用前必须复制, 因为python中所有的内容全部是对象 变量是没有类型的, 有类型的是指向内存对象的类型 a = ' a = 是合法的 此外, python还可 ...

  4. vim---打造Python IDE

    1.文法高亮 为了能在Vim中支持Python文法需要用到插件python.vim,该插件默认位于(/usr/share/vim/vim72/)<Vim安装目录>/<$VIMRUNT ...

  5. redis实战笔记（7）-第7章 基于搜索的应用程序

    本章主要内容   使用Redis进行搜索 对搜索结果进行排序 实现广告定向 实现职位搜索    

  6. 体验 QQ机器人C# SDK 1.X 特性总结

    主要特性 依赖注入 框架本身采用 Autofac 作为依赖注入框架.进行插件开发时,必然会使用到该框架.建议开发者阅读官方文档熟悉其用法.https://autofac.readthedocs.io/ ...

  7. 不停机不停服务，MYSQL可以这样修改亿级数据表结构

    摘  要:本文阐述了MySQL DDL 的问题现状.pt-online-schema-change的工作原理,并实际利用pt-online-schema-change工具在线修改生产环境下1.6亿级数 ...

  8. [转]ASP.NET MVC4中@model使用多个类型实例的方法

    本文转自:http://blog.csdn.net/hulihui/article/details/48199897 有时需要在ASP.NET MVC4的视图的@model中使用多个类型的实例,.NE ...

  9. 关于post跨域请求数据的问题-包括同源策略

    在<system.webServer>配置下面加入 <httpProtocol> <customHeaders> <add name="Access ...

  10. Python爬虫初识

    本文章是对网易云课堂中的Python网络爬虫实战课程进行总结.感兴趣的朋友可以观看视频课程.课程地址 爬虫简介 一段自动抓取互联网信息的程序 非结构化数据 没有固定的数据格式,如网页资料. 必须通过E ...