简单的进度条展示教程！

admin

1. /* 公用函数库 @ 进度条展示 */
   
2. /* Author: Tsmini.com */
   
3. /* Version: 1.0 */
   
4. /* LastUpdated:2017-02-26 */
   
5. 
   
6. function tsmini_pbar($value='50',$max='100',$width='90%',$height='10px',$color='#0099cc',$css='border-radius:5px;'){
   
7.         
   
8.         $value = ($value>$max)?$max:$value;
   
9.         $pc = round($value/$max*100,1)."%";
   
10.         $output = "<div style='width:".$width.";height:".$height.";background:#EDEDED;".$css."'>";
    
11.         $output.= "<div style='float:left;width:".$pc.";height:".$height.";background:".$color.";".$css."'></div>";
    
12.         $output.= "</div><div style='clear:both;'></div>";
    
13.         $r['div'] = $output;
    
14.         $r['pc'] = $pc;
    
15.         return $r;
    
16. }

复制代码

函数输入值解释：
$value='50', 进度条中正处于什么值
$max='100', 进度条的最大值
$width='90%', 进度条占所处容器（DIV）的宽度，可以是百分比，也可以是一个像素
$height='10px', 进度条占所处容器（DIV）的高度，可以是百分比，也可以是一个像素
$color='#0099cc',  进度条颜色
$css='border-radius:5px;' 进度条的附件CSS，例如border-radius表示圆角

函数输出数组解释：
函数会返回一个数组$r，数组有两个元素。
$r['div'] 进度条图表
$r['pc'] 进度百分比（%）
使用场景案例：任务完成度评价

使用方法：
将该函数粘贴进PHP文件中，或下载附件中的PHP文件，用require_once引入，然后直接调用即可。

延伸思考：不能引入PHP函数时，如何在模板中加入进度条？
很显然，就是上面函数中的 DIV 构成。

1. <div style='width:100%;height:20px;background:#EDEDED;'>
   
2.     <div style='float:left;width:56%;height:100%;background:#FF6600;'>
   
3.     </div>
   
4. </div>
   
5. <div style='clear:both;'>
   
6. </div>

复制代码

这样就能输出一个高度为20px，进度为56%的橙色进度条了！

文件名称:tsmini_common_pbar.zip 
下载次数:0  文件大小:631 Bytes  售价:10元宝 [记录]
下载权限: 不限 → 开通VIP可打折下载附件 → [点此购买VIP]  [充值元宝]  [[资源无效反馈]]

会跳舞的猫猫

很干净的论坛，真心支持

雪莹飞

回的人少，我来小顶一下！