ReportStudio入门教程(七十二) - 显示时间进度(进度条版)

上一次， 我们只是使用一个文字显示出了进度，这回呢， 我们使用一个像进度条一样的图形来显示

像这样：

1. CSS样式

这是为了控制样式

<style type="text/css"> body{ text-align:center; vertical-align:middle; } .graph{ width:100px; border:1px solid #4A76C7; height:15px; vertical-align:middle; } #bar{ display:block; background:#4A76C7; float:left; height:100%; text-align:center; vertical-align:middle; } </style> 

2. 时间进度显示

我们使用这3个HTMl项目

第1个HTML项目:

第2个HTML项目：

注意这个我们要修改源类型为“报表表达式”

这里，我们用一个Table，存放文本的信息

3. JS控制图形展示

我们需要在“页尾”，添加JS控制图形的显示

4.总体思想

我们使用HTML项目，控制文本，使用DIV,SPAN，使用JS控制SPAN的所占的百分比，就这样而已，个人对于样式不太擅长，大家可以再优化下。