1.1 预期效果

在制作决策报表时，需要制作一个普通的时间模块，用传统FR的方法耗时耗力，性能也不怎么好，可通过 JS 实现该时间模块，提高性能，减少样式导致的问题。

1.2 实现思路

使用 JS 技术直接实现实时时间效果。

2.1 准备模板

打开一张 .frm 结尾的报表，例如：reportlets\demo\analytics\marketing\销售额市场分析.frm，如下图所示：

2.2 添加事件

点击body，为body添加「初始化后」事件。如下图所示：

JavaScript 代码如下:

$("body").prepend('<canvas id="canvas" style="position:absolute;z-index:10;right: 25%;top: 2%;" width="200" height="20"></canvas>');
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = 'white';
function renderTime() {
       var date=new Date();   
       var year=date.getFullYear(); //获取当前年份   
       var mon=date.getMonth()+1; //获取当前月份   
       var da=date.getDate(); //获取当前日   
       if(mon < 10) {
         mon = "0" + mon;
       }
      if(da < 10) {
         da = "0" + da;
       }
       
       var day=date.getDay(); //获取当前星期几  
       if(day== "0") {
         day = "日";
       } else if(day == "1"){
         day = "一";
       } else if(day == "2"){
         day = "二";
       } else if(day == "3"){
         day = "三";
       } else if(day == "4"){
         day = "四";
       } else if(day == "5"){
         day = "五";
       } else if(day == "6"){
         day = "六";
       } else {
         day = "NO";
       }
       var hh=date.getHours(); //获取小时   
       var mm=date.getMinutes(); //获取分钟   
       var ss=date.getSeconds(); //获取秒  
       if(hh < 10) {
         hh = "0" + hh;
       }
       if(mm < 10) {
         mm = "0" + mm;
       }
       if(ss < 10) {
         ss = "0" + ss;
       }
       var d=year + '-' + mon + '-' + da + '  ' + '星期'+ day + '    ' + hh + ':' + mm + ':' + ss;

       ctx.fillStyle = 'rgb(20, 99, 140)';
       //ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';
       ctx.fillRect(0, 0, 200, 20);
       //Date
       ctx.font = "bold 9pt Asia";
       ctx.fillStyle = 'white';
       ctx.fillText(d, 13, 10);

}
setInterval(renderTime, 40);

2.3 效果预览

保存模板，点击「分页预览」，效果如下图所示：

注：不支持移动端

点击可下载模板：销售额市场分析.frm