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 ...
随机推荐
- 大型Java进阶专题(四) 设计模式之工厂模式
前言 今天开始我们专题的第三课了,开始对设计模式进行讲解,本章节介绍:了解设计模式的由来,介绍设计模式能帮我们解决那些问题以及剖析工厂模式的历史由来及应用场景.本章节参考资料书籍<Sprin ...
- 公共卫生GIS共享服务平台
1 系统详细设计 1.1 GIS共享服务管理 1.1.1 概述 GIS共享服务管理是本系统的重要组成部分,它实现了对各类地图数据.业务资源数据的集成统一管理,提供了一个平台级的管理解决方案,能够往 ...
- Git在公司内部的使用规范
Git在公司内部的使用规范 目录 Git在公司内部的使用规范 1.版本定义 2.系统开发环境 3. 分支定义 4.Commit 日志规范 5.开发工作流程: 5.1.常规分支debug流程: 5.2. ...
- 【转载】oracle的安装和配置
转自: https://blog.csdn.net/weixin_40364885/article/details/80787472 一.概念 oracle在使用的时候时是不收费的,如果你要在工作中来 ...
- 【限时免费】AppBoxCore - 细粒度权限管理框架（EFCore+RazorPages+async/await）！
目录 前言 全新AppBoxCore RazorPages 和 TagHelpers 技术架构 页面处理器和数据库操作的异步调用 Authorize特性和自定义权限验证过滤器 Authorize登录授 ...
- 环境篇：Docker
环境篇:Docker www.docker.com Docker 是什么? Docker 是一个开源的应用容器引擎,基于Go语言并遵从Apache协议的开源,让开发者可以打包他们的应用以及依赖包到一个 ...
- 菜鸟教程-python中的包
转载自:http://www.runoob.com/python/python-modules.html 包是一个分层次的文件目录结构,它定义了一个由模块及子包,和子包下的子包等组成的 Python ...
- python制作一键启动脚本
我们的系统环境或许没有Python环境,又想使用脚本,这就要使该脚本能脱离Python环境独立运行,比如说将该脚本打包成exe可执行文件等.那么怎么做呢?你可能想到py2exe和pyinstaller ...
- 李瑞红201771010111《面向对象程序设计（java）》第四周学习总结
实验四:类与对象的定义及使用 第一部分:理论知识学习 1.类与对象概念 (1)类是构造对象的模板或蓝图,由类构造对象的过程称为创建类的实例. (2)对象:即数据,对象有三个特性,行为.状态.标识. ...
- Check If It Is a Straight Line
2019-10-21 10:35:33 问题描述: 问题求解: public boolean checkStraightLine(int[][] coordinates) { int n = coor ...