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 ...
随机推荐
- 如何从普通程序员晋升为架构师 面向过程编程OP和面向编程OO
引言 计算机科学是一门应用科学,它的知识体系是典型的倒三角结构,所用的基础知识并不多,只是随着应用领域和方向的不同,产生了很多的分支,所以说编程并不是一件很困难的事情,一个高中生经过特定的训练就可以做 ...
- nohub 将程序永久运行下去
今天看了一遍文章,一直以为将程序制成sh脚本,通过crontab来间隔执行以为是真的不断执行,后来才发现是错误的,每隔一段时间都会执行一次,都会占用一个进程,难怪一看进程几十来个同样名字的进程在运行 ...
- 用 SendGrid 发送免费电子邮件
1. 概述 SendGrid 免费账号可以限额发送 100/天封邮件,虽然比 Mailgun 的每月 10000 封的免费额度少,但胜成注册无需绑定信息卡. 集成 SendGrid 有 SMTP 和 ...
- Qt5小Demo之猜数字游戏
玩法:设定时间进行猜数字,所猜数字为一个四位数,输入自己的数字,系统会提示是大了还是小了,依据条件逐步逼近正确结果.在规定时间里猜对即获胜,否则即失败. 平台支持:Win10下测试正常. 源码地址: ...
- Python3学习之路~10.1 多进程、进程间通信、进程池
一 多进程multiprocessing multiprocessing is a package that supports spawning processes using an API simi ...
- Shell：sed用法 - 查找并替换字符串
原文链接 语法 sed 's/serach_str/replace_str/g' file_path 在某个文件中查找所有的serach_str并替换为replace_str 参数 描述 serach ...
- 超实用的Flask入门基础教程，新手必备！
Flask入门基础教程 Flask简介 Flask是一个轻量级的可定制框架,使用Python语言编写,较其他同类型框架更为灵活.轻便.安全且容易上手.它可以很好地结合MVC模式进行开发,开发人员分工合 ...
- 第七周java实验作业
实验七 继承附加实验实验时间 2018-10-11 1.实验目的与要求 (1)进一步理解4个成员访问权限修饰符的用途: Public 该类或非该类均可访问 Private 只有该类可以访问 Pro ...
- 李宏毅老师机器学习课程笔记_ML Lecture 2: Where does the error come from?
引言: 最近开始学习"机器学习",早就听说祖国宝岛的李宏毅老师的大名,一直没有时间看他的系列课程.今天听了一课,感觉非常棒,通俗易懂,而又能够抓住重点,中间还能加上一些很有趣的例子 ...
- 性能测试工具Jmeter你所不知道的内幕
谈到性能测试,大家一定会联想到Jmeter和LoadRunner,这两款工具目前在国内使用的相当广泛,主要原因是Jmeter是开源免费,LoadRunner 11在现网中存在破解版本.商用型性能测试工 ...