<?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进度条的更多相关文章

  1. js进度条源码下载—js进度条代码

    现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...

  2. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  3. 简易js进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 在vue项目中使用Nprogress.js进度条

    NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress ...

  5. js进度条实现

    1.先设置CSS样式(可自定义) /*#region 进度条 */ .progbar { background-color: #e1e1e1; width:auto; color: #222; hei ...

  6. js 进度条效果

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...

  7. JS进度条顺滑版实现

    进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...

  8. js 进度条,可实现结束和重新开始

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. js进度条插件pace.js

    主要用到themes文件夹和pace.js文件

  10. js进度条小事例

    <style> #div1{width: 500px;height: 20px;border: 1px solid gray;} #div2{height: 20px;width: 0px ...

随机推荐

  1. Android开发:拖拽

    google官网的training和API两个地方都提到了拖拽的实现,两种方法不太一样. 方法一 training(https://developer.android.com/training/ges ...

  2. 通过w3c方式 读取xml内容

    /** * 通过w3c方式 读取xml内容 * @param lablenames 要读取的节点名称 * @param file_path_name 文件绝对路径 * @return */ publi ...

  3. EF 批量更新删除(linq篇)

    刚开始用EF很多东西都不会用,事后想想都很简单的东西总是用很麻烦的方式实现 1:  EF的联合查询 inner join  很久很久以前我是这么写一个列表展示的,其中有两个字段Contractor和M ...

  4. SharePoint服务器端对象模型 之 访问文件和文件夹(Part 4)

    (四)列表附件 列表的附件也是文件系统的一部分,它依附于普通列表的列表条目之上(文档库没有附件),它的操作在一些地方和文档库中文档的操作非常类似.   1.附件的读取 一个列表条目的附件可以使用SPL ...

  5. 微信小程序网络请求的setDate

    我感觉这个无比的奇葩..... 因为之前react的时候,我习惯在请求成功的时候直接this.setDate.........但是,在微信小程序中,一定要将this换成一个变量...一定要!!!否则会 ...

  6. 巨蟒python全栈开发django8:基于对象和基于双下划线的多表查询

    1.编辑删除&&多对多关系的其他方法 提交,数据,得到结果 查看运行 给编辑和删除,添加样式 我们点击删除,可以成功删除 打印sql语句的,在settings.py里边的配置 LOGG ...

  7. Markov Process

    w Markov Process -- from Wolfram MathWorld  http://mathworld.wolfram.com/MarkovProcess.html 谷歌背后的数学_ ...

  8. docker openvas

    https://hub.docker.com/r/mikesplain/openvas/ Requirements DockerPorts available: 443, 9390, 9391 Usa ...

  9. java线程:Atomic(原子)

    .何谓Atomic? Atomic一词跟原子有点关系,后者曾被人认为是最小物质的单位.计算机中的Atomic是指不能分割成若干部分的意思.如果一段代码被认为是Atomic,则表示这段代码在执行过程中, ...

  10. window7系统下安装scrapy爬虫框架

    本文是在python3.6环境下安装的下面软件,如果大家和我的python版本不一致,请在页面选择符合自己版本的软件下载. 1.wheel pip install wheel 2.lxml 下载lxm ...