php+JS进度条
<?php
ini_set('max_execution_time','0');//设置本页面加载时间无限制
echo "<div style='border: 1px solid grey;width:1000px;height:30px;overflow:hidden'>
<div style='background-color:red;width:0px;height:100%;text-align:center;color:white' id='div'></div>
</div>
<p>正在操作第:<span id='p'></span>个用户</p>
";
$user=[
'0'=>['id'=>1], '1'=>['id'=>2], '2'=>['id'=>3], '3'=>['id'=>4], '4'=>['id'=>5], '5'=>['id'=>6], '6'=>['id'=>7], '7'=>['id'=>8], '8'=>['id'=>9], '9'=>['id'=>10], '10'=>['id'=>11], '11'=>['id'=>12], '12'=>['id'=>13], '13'=>['id'=>14], '14'=>['id'=>15], '15'=>['id'=>16], '16'=>['id'=>17], '17'=>['id'=>18], '18'=>['id'=>19]
];
$total = count($user);
function send($id,$total)
{
$b=($id/$total)*100;
$a = round($b,1);
if($a>100){ $a=100;}
echo "<script> document.getElementById('div').style.width='$a%'; document.getElementById('p').innerHTML=$id; document.getElementById('div').innerHTML='$a%'; </script>";
}
foreach ($user as $key => $value){
sleep(1);//模拟耗时
print str_repeat(" ", 4096);//清楚缓存数据释放的容量
flush();
send($value['id'],$total);
}
ob_end_flush();
php+JS进度条的更多相关文章
- js进度条源码下载—js进度条代码
现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...
- YprogressBar,html5进度条样式,js进度条插件
简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...
- 简易js进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在vue项目中使用Nprogress.js进度条
NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress ...
- js进度条实现
1.先设置CSS样式(可自定义) /*#region 进度条 */ .progbar { background-color: #e1e1e1; width:auto; color: #222; hei ...
- js 进度条效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...
- JS进度条顺滑版实现
进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...
- js 进度条,可实现结束和重新开始
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js进度条插件pace.js
主要用到themes文件夹和pace.js文件
- js进度条小事例
<style> #div1{width: 500px;height: 20px;border: 1px solid gray;} #div2{height: 20px;width: 0px ...
随机推荐
- 【BZOJ2286】[Sdoi2011]消耗战 虚树
[BZOJ2286][Sdoi2011]消耗战 Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的 ...
- HBase架构原理详情
本文从网上看到的,自己看过了,同时收藏下!感谢分享! HBase定义 HBase 是一个高可靠.高性能.面向列.可伸缩的分布式存储系统,利用Hbase技术可在廉价PC Server上搭建 大规模结构化 ...
- python系列八:Python3条件控制&循环语句
#!/usr/bin/python #-*-coding:gbk-*-#Python3 条件控制&循环语句import randomage = int(input("请输入你的年龄: ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- ubuntu下MySQL无法启动Couldn't find MySQL server (/usr/bin/mysqld_safe)”
一台虚拟测试机,启动的时候,报上述错误,从这个报错来看,多半是因为读取到了另外的my.cnf导致的 那么,my.cnf放置在什么地方? 可以通过如下指令获取到 root@mysql:~# mysqld ...
- Python3.6全栈开发实例[021]
21.给出一个纯数字列表. 请对列表进行排序(升级题). 思路: (1)完成a和b的数据交换. 例如, a = 10, b = 24 交换之后, a = 24, b = 10(2)循环列表. 判断a[ ...
- python面向对象(二)
属性查找 类有两种属性:数据属性和函数属性 1. 类的数据属性是所有对象共享的 2. 类的函数属性是绑定给对象用的 class BeijingStudent: school='Beijing' ...
- 我的Android进阶之旅------>HTTP Content-type 对照表
HTTP Content-type 对照表 文件扩展名 Content-Type(Mime-Type) 文件扩展名 Content-Type(Mime-Type) .*( 二进制流, 不知道下载文件类 ...
- matlab学习笔记之基础知识(一)
一.两种特殊数据类型 1.元胞数组 元胞数组是MATLAB的一种特殊数据类型,可以将元胞数组看做一种无所不包的通用矩阵,或者叫做广义矩阵.组成元胞数组的元素可以是任何一种数据类型的常数或者常量,每 ...
- MyISAM VS InnoDB
A.构成上的区别: InnoDB只在磁盘上存储一个文件.frm 每个MyISAM在磁盘上存储成三个文件.第一个文件的名字以表的名字开始,扩展名指出文件类型: 文 ...