玩传奇论坛

标题: 简单的进度条展示教程！ [打印本页]

作者: admin 时间: 2018-1-11 13:11
标题: 简单的进度条展示教程！

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

复制代码

函数输入值解释：
$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 构成。

<div style='width:100%;height:20px;background:#EDEDED;'>
<div style='float:left;width:56%;height:100%;background:#FF6600;'>
</div>
</div>
<div style='clear:both;'>
</div>

复制代码

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

tsmini_common_pbar.zip (631 Bytes, 下载次数: 0, 售价: 10 元宝)

作者: 会跳舞的猫猫 时间: 2018-2-28 11:26
很干净的论坛，真心支持

作者: 雪莹飞 时间: 2018-4-7 14:07
回的人少，我来小顶一下！

欢迎光临玩传奇论坛 (http://wanmirbbs.com/)