<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fe</title>
<link rel="stylesheet" type="text/css" href="easyui/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/jinduDemo.css">
<link rel="stylesheet" type="text/css" href="easyui/lodingstyle.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="progressBIgDiv"style="z-index:9999;background: -webkit-gradient(linear, left top, left bottom, from(#28519c00), to(#1b2969));">
<div id="caseViolette">
<div id="cercle">
<div id="cercleCache"></div>
</div>
<div id="load">
<p>loading</p>
</div>
<div id="point"></div>
</div>
<div id="p" class="easyui-progressbar" style="position: absolute;top: 152px;width: 498px;height: 18px;margin: 0px;"></div>
<div style="position: absolute;margin:20px 0;top: 152px;">
<a href="#" class="easyui-linkbutton" onclick="start()">测试</a>
</div>
</div>
<script>
function start() {
var value = $('#p').progressbar('getValue');
if (value < 100) {
value += Math.floor(Math.random() * 10);
$('#p').progressbar('setValue', value);
setTimeout(arguments.callee, 200);
}
};
</script>
<!--<script type='text/javascript'>
var timerId;
$(function(){
//每隔0.5秒自动调用方法，实现进度条的实时更新
timerId=window.setInterval(getForm,500);
});
function getForm(){
//使用JQuery从后台获取JSON格式的数据
$.ajax({
type:"post",//请求方式
url:"getProgressValueByJson",//发送请求地址
timeout:30000,//超时时间：30秒
dataType:"json",//设置返回数据的格式
//请求成功后的回调函数 data为json格式
success:function(data){
if(data.progressValue>=100){
window.clearInterval(timerId);
}
$('#p').progressbar('setValue',data.progressValue);
},
//请求出错的处理
error:function(){
window.clearInterval(timerId);
alert("请求出错");
}
});
}
</script>-->
</body>
</html>

easyui制作进度条案例demo的更多相关文章

  1. Unity3D NGUI制作进度条

    利用GUI可以制作进度条,但是NGUI更加方便 我是用的NGUI3.5.3, 先找到NGUI  Slider的预制体,利用自带的UISlider来制作. 主要是利用UISlider的Value来控制进 ...

  2. EasyUI添加进度条

    EasyUI添加进度条 添加进度条重点只有一个,如何合理安排进度刷新与异步调用逻辑,假如我们在javascript代码中通过ajax或者第三方框架dwr等对远程服务进行异步调用,实现进度条就需要做到以 ...

  3. html5中的progress兼容ie，制作进度条样式

    html5新增的progress标签用处很大,它可以制作进度条,不用像以前那样用css来制作进度条! 一.progress使用方法 progress标签很好使用,他有两个属性,value和max,va ...

  4. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  5. 制作进度条(UISlider)

    怎样判断是否应当使用进度条 用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比,进度条分为可拖动和不可拖动两种. 可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可 ...

  6. js - 预加载+监听图片资源加载制作进度条

    这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图 本 ...

  7. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. EasyUI Progressbar 进度条

    通过 $.fn.progressbar.defaults 重写默认的 defaults. 进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更新以便让用户知道当前正在执行的操 ...

  9. NX二次开发-BlockUI对话框嵌套MFC对话框制作进度条

    半年前在一些QQ群看到有大神NX二次开发做出了进度条,那个时候我还不会弄,也不知道怎么弄得,后来断断续续得研究了一下,直到今天我把它做出来了.内心还是很喜悦的!回想自己这两年当初从没公司肯给我做NX二 ...

随机推荐

  1. 雷林鹏分享：Ruby 文件的输入与输出

    Ruby 文件的输入与输出 Ruby 提供了一整套 I/O 相关的方法,在内核(Kernel)模块中实现.所有的 I/O 方法派生自 IO 类. 类 IO 提供了所有基础的方法,比如 read. wr ...

  2. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

  3. UVA-10806 Dijkstra, Dijkstra. （最小费用流，网络流建模）

    题目大意:给一张带权简单图,找出一条经过起点s和终点t的最小回路. 题目分析:建立网络,以s为源点,t为汇点,另每条边的容量为1,单位费用为边权值.求最小费用流,增广两次后的最小费用便是答案. 代码如 ...

  4. 也来说说C#异步委托 （转自 Rising_Sun）

    前些日子,看到园子里面有人用老王喝茶的例子讲解了一下同步和异步,虽然没有代码实现,但是能够通俗易懂的讲解了同步.异步.阻塞.非阻塞的关系了,今天借题发挥,用一个热水器加热洗澡的例子来具体演示一下C#使 ...

  5. Halcon12新特性之VS可视化调试插件

    当我们用VC\C#调试halcon代码的时候,通常会遇到一个头痛的问题,我们无法看到halcon变量的调试信息 如下图:什么鬼...什么鬼   比如我们想看一个double数值变量,我们需要 doub ...

  6. centos7 搭建svn服务器&客户端的访问&备份迁移

    当今用于版本控制的软件程序主要的有svn和git,其它软件咱不熟悉,今天记录下搭建svn服务器和svn客户端使用: 使用环境:虚拟机为centos7系统,svn服务器安装在centos7系统平台上,s ...

  7. HDU 4635

    http://acm.hdu.edu.cn/showproblem.php?pid=4635 问:最多加多少条边,使得原图不是强连通图 正向考虑有困难,不妨反向思考,既最少去掉几条边使得原图不是强连通 ...

  8. 在Windows中配置Rsync同步

    Rsync是一款不错的文件免费同步软件,可以镜像保存整个目录树和文件系统,同时保持原来文件的权限.时间.软硬链接.第一次同步时 rsync 会复制全部内容,下次只传输修改过的文件部分.传输数据过程中可 ...

  9. Oracle 和 mysql 的批量操作Sql语句 的区别

    正确的oracle批量新增的sql是: 方法 1: <insert id="insertAttractionsBatch" parameterType="java. ...

  10. C#.NET股票历史数据采集，【附18年历史数据和源代码】

    阅读目录 1.数据采集需求 2.股市数据接口 3.数据库设计 4.关键信息采集 5.源代码和数据库 如果用知乎,可以关注专栏:.NET开源项目和PowerBI社区 重点重点:我没有买股票,没有买股票, ...