HTML5+CSS+JQuery 实现简单的进度条功能
样式：
<style type="text/css">
.processcontainer2{
width:450px;
border:1px solid #6C9C2C;
height:25px;
border-radius: 10px;
box-shadow: 5px 10px 20px lightgray;
}
#processbar2{
background:green;
float:left;
height:100%;
text-align:center;
line-height:150%;
border-radius: 10px;
color: white;
}
</style>
关键HTML代码：
<body>
<div class="processcontainer2">
<div id="processbar2">0</div>
</div>
</body>
脚本：
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript">
function gogogo(){
var bar=$("#processbar2");
$(bar).html(parseInt($(bar).html())+1+"%")
$(bar).css("width",$(bar).html())
console.log($(bar).html())
//进度条满
if($(bar).html()=="100%"){
window.clearInterval(start);
}
}
var start=setInterval(function(){gogogo()},50);
$(document).ready(function(){
start;
})
</script>
效果：
HTML5+CSS+JQuery 实现简单的进度条功能的更多相关文章
- html + css + jquery实现简单的进度条实例
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- jquery自带的进度条功能如何使用？
弹出进度条:先做弹出的功能modal,再做进度条显示.在弹出的界面上增加进度条功能 $.ajax({ xhr: function() { var xhr = new window.XMLHttpReq ...
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- 创建一个jQuery UI的垂直进度条效果
日期:2013-9-24 来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...
- 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- Winfrom 简单的进度条小程序
使用Winform空间编写简单的进度条小程序: 所需控件:Lable 标签 TextBox 文本框 progressBar 进度条控件 timer 定时器 下面是源码及效果图: /// &l ...
- Linux shell 下简单的进度条实现
Linux shell 下简单的进度条实现 [root@db145 ~]# cat print_process.sh function Proceess(){ spa='' i= ] do print ...
- .Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能
.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能 我的项目需求是:在.net4.5中用mvc5实现上传xml文件,后台实时导入数据库时传到前台进度, ...
- js 实现进度条功能。
/** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...
随机推荐
- 【05】openlayers 网格图层
效果: 创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection: 'EPSG:4326', //投 ...
- 面试官：HashMap死循环形成的原因是什么？
介绍 HashMap实现原理 之前的文章已经分析了HashMap在JDK1.7的实现,这篇文章就只分析HashMap死循环形成的原因 死循环形成是在扩容转移元素的时候发生的 void resize(i ...
- Chrome调试工具常用功能
一.打开的快捷键 windows: ctrl + shift + i/F12 1.Elements 1.选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件 2.在 Element 选项 ...
- python从数据库取数据后写入excel 使用pandas.ExcelWriter设置单元格格式
用python从数据库中取到数据后,写入excel中做成自动报表,ExcelWrite默认的格式一般来说都比较丑,但workbook提供可以设置自定义格式,简单记录个demo,供初次使用者参考. 一. ...
- jmeter 性能测试基本过程及示例
jmeter 为性能测试提供了一下特色: jmeter 可以对测试静态资源(例如 js.html 等)以及动态资源(例如 php.jsp.ajax 等等)进行性能测试jmeter 可以挖掘出系统最大能 ...
- Natas4 Writeup（Referer篡改）
Natas4: 提示来源出错,合法用户只能来自"http://natas5.natas.labs.overthewire.org/". 在http的header中,referer代 ...
- ML-Agents（三）3DBall例子
ML-Agents(三)3DBall例子 前一周忙着公司的考试,都没有怎么学新的,今天补上~ 之后的记录,我准备先只研究官方的示例,主要是把研究过程中的疑惑和想法记下来.首先我先补充一下如何利用GPU ...
- 【codeforces】Educational Codeforces Round 80 D. Minimax Problem——二分+二进制处理
题目链接 题目大意 有n个维度为m的向量,取其中两个进行合并,合并时每个维度取两者之间的较大者,得到的新的向量中,维度值最小者最大为多少 分析 首先最需要注意的是m的取值,m最大只有8 那么我们可以二 ...
- 2020 python web开发就业要求锦集
郑州 Python程序员 河南三融云合信息技术有限公司 6-8k·12薪 7个工作日内反馈 郑州 1个月前 本科及以上2年以上语言不限年龄不限 微信扫码分享 收藏 Python程序员 河南三融云合信息 ...
- 原 c++中map与unordered_map的区别
c++中map与unordered_map的区别 头文件 map: #include < map > unordered_map: #include < unordered_map ...