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 ...
随机推荐
- Android无线测试之—UiAutomator UiSelector API介绍之三
节点关系介绍 每一个布局文件都是一个严格的层次结构布局文件,只有对层次结构非常的了解,才能更好的搜索定位我们需要的主键元素 一.XML文档节点关系介绍 备注:查看节点关系主要使用UiAutomatro ...
- jmeter返回结果是乱码及Unicode转中文
1.结果树中有乱码的处理方式 到bin目录下面修改jmeter的配置文件 使用jmeter进行压测时,如果响应数据的返回结果有乱码,则修改jmeter.properties文件中的该字段的值改为utf ...
- splay tree旋转操作 hdu 1890
很神奇的旋转操作. 目前没看到其他数据结构能实现这个功能.平衡树不好处理区间操作,线段树很难旋转.splay tree搞这个就很简单了. 下面用的这个模板跑了700ms,好慢,估计是删除操作太费时了, ...
- FZU 2099 魔法阵(计算几何)
Problem 2099 魔法阵 Accept: 120 Submit: 289 Time Limit: 1000 mSec Memory Limit : 32768 KB Probl ...
- 巨蟒python全栈开发django2:初识django
今日内容大纲: 1.起飞版web框架 2.自定制框架的流程 3.jinja2模板渲染初识 4.MVC&&MTV 5.django版本介绍及django安装 6.django初识(一些操 ...
- JavaScript数据结构与算法-数组练习
一. 创建一个记录学生成绩的对象,提供一个添加成绩的方法,以及一个显示学生平均成绩的方法. // 创建一个记录学生成绩的对象 const Students = function Students () ...
- SpringBoot + Thymeleaf + Validate验证
在开发业务时,不可避免的需要处理一些校验, 如果是写 if-else 这种代码去校验, 那会有一大段这样的代码.不过还好有个校验插件: javax.validation.validation-api ...
- [NOIP2018PJ]对称二叉树
[NOIP2018PJ]对称二叉树 这个题正常人看到题面难道不是哈希? 乱写了个树哈希... #include<bits/stdc++.h> using namespace std; co ...
- spring boot 2.0添加对fastjson的支持
首先引入fastjson的maven依赖: <dependency> <groupId>com.alibaba</groupId> <artifactId&g ...
- [转载]威力导演14旗舰破解版(中文简体)|取消30天限制CyberLink&nb
2015月9月15日(当地时间),CyberLink讯连科技发布新一代视频编辑软件 — PowerDirector威力导演14,融合了上个版本发布以来的多次更新升级,威力导演依旧 ...