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 ...
随机推荐
- shell脚本中的各种表达式介绍和使用
#前言:在shell脚本中,有各种的表达式,包括有条件测试表达式,文件表达式,字符串表达式,整数表达式,接下来我们来了解一下他们的使用方法 1.条件测试表达式 #首先来看一下条件测试语法 #条件测试语 ...
- ECNU 计算机系统 (CSAPP) 教材习题作业答案集
这里是华东师范大学计算机系统的作业答案.由于几乎每一年布置的习题都几乎相同,网上的答案又比较分散,就把自己上学期提交的作业pdf放上来了,供参考. 长这样 Download Link:http://c ...
- oracle--触发器(转)
转载自http://blog.csdn.net/indexman/article/details/8023740/ 触发器是许多关系数据库系统都提供的一项技术.在oracle系统里,触发器类似过程和函 ...
- Python习题集（四）
每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 如果一个 3 位数 ...
- spring总结————AOP面向切面总结
spring总结————AOP面向切面 一.spring aop概念 spring aop面向切面编程,java是面向对象的语言. 真正的service层代码 业务逻辑层再处理业务之前和之后都要进行一 ...
- 对tf.nn.softmax的理解
对tf.nn.softmax的理解 转载自律者自由 最后发布于2018-10-31 16:39:40 阅读数 25096 收藏 展开 Softmax的含义:Softmax简单的说就是把一个N*1的向 ...
- Fiddler1 简单使用
1.Fiddler下载地址:https://www.telerik.com/download/fiddler 2.Fiddler设置: Fiddler是强大的抓包工具,它的原理是以web代理服务器的形 ...
- Python3 整数
imag定义:返回整数的复数形式的虚部(返回整数).格式:intobject.imag real定义:返回整数的复数形式的实部(返回整数).格式:intobject.real conjugate()定 ...
- jdbc连接数据库三种方式
---恢复内容开始--- 第一种: public class Demo1 { //连接数据库的URL private String url = "jdbc:mysql://localhost ...
- Python-练习 while 和for 循环
# while 循环 age = 56count = 0 while count < 3 : guess_age=int(input('输入年龄:')) if guess_age == age: ...