进度条函数 -------ajax初试
做一个显示任务完成情况的进度条：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="jquery.min.js"></script>
<style>
body{ text-align: center; }
.parent{ width: 600px; height: 20px; border: 1px solid #000;margin: 10px auto;cursor: pointer ; position: relative; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) ; border-radius: 20px; background: rgb(25,25,25); padding: 2px;}
.child{ height: 100%; width: 0px ;background: rgb(92,100,121); cursor: pointer ; color: #fff;border-radius: 20px; }
.parent span{ position: absolute; right: 9px; top: 2px ; color: #fff;} </style>
</head>
<body>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div>
<div class="rank_box">
<div style="float: left;">
<span style="margin-top: 10px; margin-right: 10px; display: block;">asdasd:</span>
</div>
<div class="parent" style="float: left;">
<div class="child"></div>
<span></span>
</div>
<div style="clear: both;"></div>
</div> <button onclick="getAgentdate()" > 提交</button> <script>
//进度条函数
function sumjdt(into_money,trade_money,direct_customer,group_customer,group_people,agent_a,agent_b,direct_into,customer_trade,active_customer,mark){
var rate_agent_a = [];
$.ajax({
url:'qin.json',
data:'',
type:'get',
dataType:'json',
success:function(data){
var rate_agent_a = [data.into_money,data.trade_money,data.direct_customer,data.group_customer,data.group_people,data.agent_a,data.agent_b,data.direct_into,data.customer_trade,data.active_customer,data.mark];
var rank = [into_money,trade_money,direct_customer,group_customer,group_people,agent_a,agent_b,direct_into,customer_trade,active_customer,mark]
for( var i = 0 ;i<rank.length;i++){
if (rate_agent_a[i]==0) {
$(".rank_box").eq(i).hide();
}else {
var rate=[];
rate[i] = rank[i]/rate_agent_a[i]
$(".child").eq(i).width(rate[i]*100+'%');
$(".parent").eq(i).find('span').text(rate[i]*100+'%');
}
}
$(".parent").mouseover(function() {
var index = $(".parent").index($(this));
$(".child").eq(index).text(rank[index]+'/'+rate_agent_a[index]);
});
$(".parent").mouseout(function() {
$(".child").text("");
});
return rate_agent_a;
},
error:function() { alert("获取失败");
}
}); }
function getAgentdate(){
$.ajax({
url:'text.json',
data:'',
type:'get',
dataType:'json',
success:function(data){
sumjdt(data.into_money,data.trade_money,data.direct_customer,data.group_customer,data.group_people,data.agent_a,data.agent_b,data.direct_into,data.customer_trade,data.active_customer,data.each_intomoney,data.rate_agent);
},
error:function() {
alert("获取失败");
}
});
} </script>
</body>
</html>
两段用到的测试json:
qin.json:
{ "into_money":"" , "trade_money":"3000.00","direct_customer":"" ,"group_customer":"" ,"group_people":"" ,"agent_a":"" ,"agent_b":"" ,"direct_into":"" ,"customer_trade":"" ,"active_customer":"" ,"rate_agent":""}
text.json
{ "into_money":"" , "trade_money":"1000.00","direct_customer":"" ,"group_customer":"" ,"group_people":"" ,"agent_a":"" ,"agent_b":"" ,"direct_into":"" ,"customer_trade":"" ,"active_customer":"" ,"rate_agent":""}
进度条函数 -------ajax初试的更多相关文章
- nprogress进度条和ajax全局事件
nprogress和ajax全局事件 nprogress 官方网站:http://ricostacruz.com/nprogress/ 下载地址:https://github.com/rstacruz ...
- asp.net 后台多线程异步处理时的 进度条实现一（Ajax+Ashx实现以及封装成控件的实现）
(更新:有的同学说源代码不想看,说明也不想看,只想要一个demo,这边提供一下:http://url.cn/LPT50k (密码:TPHU)) 工作好长时间了,这期间许多功能也写成了不少的控件来使用, ...
- jQuery ajax 标准写法及进度条绘制
jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...
- asp.net XMLHttpRequest 进度条以及lengthComputable always false的解决办法
一直用ajax好长时间了,对其原理也有一些了解,最近由于项目需要,使用ajax异步进度条的效果,就研究了一下,用原生的XMLHttpRequest实现进度条函数,XMLHttpRequest有以下函数 ...
- struts2：上传多个文件时实现带进度条、进度详细信息的示范
上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...
- PHP+ajaxForm异步带进度条上传文件实例
在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: v ...
- SAP进度条
一.代码示例: ),"行数 ll_tabix(),"循环标号 ll_pecnt DECIMALS ,"百分比 ll_pecet(),"百分数 ll_text( ...
- python (大文件下载及进度条展示) 验证客户端链接的合法性,socketserver
##########总结########### 文件校验加进度条显示 ####server import os import json import socket import struct impo ...
- Python学习笔记-进度条
该功能用以输出任务百分比 #conding=utf-8 import sys #进度条函数,输入当前任务以及总任务数 def ProgressBar(Current,Total): processpe ...
随机推荐
- 每日一题 - 剑指 Offer 53 - I. 在排序数组中查找数字 I
题目信息 时间: 2019-07-04 题目链接:Leetcode tag:二分查找 哈希表 难易程度:简单 题目描述: 统计一个数字在排序数组中出现的次数. 示例1: 输入: nums = [5,7 ...
- Netty 中的内存分配浅析-数据容器
本篇接续前一篇继续讲 Netty 中的内存分配.上一篇 先简单做一下回顾: Netty 为了更高效的管理内存,自己实现了一套内存管理的逻辑,借鉴 jemalloc 的思想实现了一套池化内存管理的思路: ...
- 【经典DP】洛谷 P2782 友好城市
嘤嘤嘤,昨天两个文化课老师在上奥赛时招呼我(亲切交流),今天又要写工作报告,没时间写题解,希望今天能补上 友好城市 题目://洛谷那粘来的题面竟然能把格式粘过来 题目描述 有一条横贯东西的大河,河有笔 ...
- Spring 5.2.x 源码环境搭建(Windows 系统环境下)
前期准备 1.确保本机已经安装好了 Git 2.Jdk 版本至少为 1.8 3.安装好 IntelliJ IDEA (其他开发工具,如 eclipse.Spring Tool Suite 等也是可以的 ...
- Docker 安装并使用mysql
上一篇介绍了Docker在CentOS中的安装,本文介绍如何在Docker中安装并使用mysql 1.拉取最新的mysql镜像 [root]# docker pull mysql 2.查看已有镜像 [ ...
- SpringBoot日志功能
三.SpringBoot日志功能 1.日志框架 市面上的日志框架: JUL.JCL.Jboss-logging.Logback.Log4j.Log4j.SLF4J... 日志门面(日志的抽象层) 日志 ...
- mysql中DDL库和表的管理
#DDL /* 数据定义语言 库和表的管理 一.库的管理 创建.修改.删除 二.表的管理 创建.修改.删除 创建:create 修改:alter 删除:drop */ #一.库的管理 #1.库的创建 ...
- 动手实现 LRU 算法，以及 Caffeine 和 Redis 中的缓存淘汰策略
我是风筝,公众号「古时的风筝」. 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. 那天我在 LeetCode 上刷到一道 LRU 缓存机制的问题, ...
- It is indirectly referenced from required .class files错误查找的解决办法如下
It is indirectly referenced from required .class files 原因:是JDK引入有问题导致的 解决方案:我之前是错误的引入成了JRE 坑哇!!!,改成如 ...
- Ethical Hacking - NETWORK PENETRATION TESTING(2)
ALFA AWUS 1900 RTL8814AU https://www.alfa.com.tw/products_detail/2.htm Follow the guide on aircrac ...