使用js实现时钟效果

前段时间逛论坛的时候，发现了这个帖子
FineReport V8.0 插件开发之酷炫时钟控件http://bbs.fanruan.com/thread-66972-1-1.html
效果好酷啊有木有，遗憾的是帖子中的链接已经失效了，在插件商场中也找不到相关的插件。
于是就想自己动手用js写一个。
首先在单元格中输入下面的代码，然后使用html显示内容。

1. <canvas id="view" height="300px" width="300px"></canvas>

复制代码

这个宽高可以根据自己需要填。

然后在预览方式中添加加载结束事件：

1. var dom=document.getElementById("view");  //获取canvas元素
   
2. var ctx=dom.getContext("2d");            //创建context对象
   
3. var width=ctx.canvas.width;
   
4. var height=ctx.canvas.height;
   
5. var r=width/2;
   
6. 
   
7. //绘制时钟背景
   
8. function drawBackground(){
   
9.         ctx.translate(r,r);      //将画布原点重置为画布的中心
   
10.         ctx.beginPath();
    
11.         ctx.lineWidth=10;
    
12.         ctx.arc(0,0,r-5,0,2*Math.PI);    //绘制一个圆，即时钟的边框
    
13.         ctx.stroke();
    
14.        
    
15.         //绘制时钟上的刻度
    
16.         for(var i=0;i<60;i++){
    
17.     var x=(r-20)*Math.cos(Math.PI*2/60*i);
    
18.     var y=(r-20)*Math.sin(Math.PI*2/60*i);       
    
19.         //每逢5个刻度使用黑色绘制，其余用灰色绘制       
    
20.     if(i%5===0){
    
21.                 ctx.fillStyle="#000000";
    
22.         }else{
    
23.                 ctx.fillStyle="#cccccc";
    
24.         }
    
25.         ctx.beginPath();
    
26.         ctx.arc(x,y,5,0,2*Math.PI);
    
27.         ctx.fill();
    
28.         }
    
29.         //绘制时钟上的数字
    
30.         ctx.font="20px Arial";
    
31.         ctx.textAlign="center";
    
32.         ctx.textBaseline="middle";
    
33.         ctx.fillStyle="#000000";
    
34.         for(var j=0;j<12;j++){
    
35.     var ax=(r-50)*Math.cos(Math.PI*2/12*j);
    
36.     var ay=(r-50)*Math.sin(Math.PI*2/12*j);       
    
37.         ctx.beginPath();
    
38.         ctx.fillText(j>9?j-9:j+3,ax,ay);  //因为PI的角度计算是从3点钟方向顺时针计算的，所以要对数字判断处理
    
39.         ctx.fill();
    
40.         }
    
41. }
    
42. 
    
43. //绘制时针
    
44. function drawHour(hour,minute,second){
    
45.         ctx.save();      //保存当前绘图环境
    
46.         ctx.beginPath();
    
47.         //时针的角度等于小时的角度加分钟和秒钟转化为小时的角度
    
48.         var rad=2*Math.PI/12*hour+2*Math.PI/12/60*minute+2*Math.PI/12/60/3600*second;
    
49.         ctx.rotate(rad);
    
50.         ctx.lineWidth=14;
    
51.         ctx.lineCap="round"; //设置画线结束端为圆帽形
    
52.         ctx.moveTo(0,20);
    
53.         ctx.lineTo(0,-r+100);
    
54.         ctx.stroke();
    
55.         ctx.restore();   //返回之前保存的绘图环境
    
56. }
    
57. 
    
58. //绘制分针
    
59. function drawMinute(minute,second){
    
60.         ctx.save();      //保存当前绘图环境
    
61.         ctx.beginPath();
    
62.         //分针的角度等于分钟的角度加秒钟转化为分钟的角度
    
63.         var rad=2*Math.PI/60*minute+2*Math.PI/3600*second;
    
64.         ctx.rotate(rad);
    
65.         ctx.lineWidth=10;
    
66.         ctx.lineCap="round";
    
67.         ctx.moveTo(0,20);
    
68.         ctx.lineTo(0,-r+80);
    
69.         ctx.stroke();
    
70.         ctx.restore();   //返回之前保存的绘图环境
    
71. }
    
72. 
    
73. //绘制秒针
    
74. function drawSecond(second){
    
75.         ctx.save();      //保存当前绘图环境
    
76.         ctx.beginPath();
    
77.         ctx.fillStyle="#FF0000";
    
78.         var rad=2*Math.PI/60*second;   //秒针的角度为当前秒钟的角度
    
79.         ctx.rotate(rad);
    
80.         ctx.lineWidth=2;
    
81.         ctx.lineCap="round";
    
82.         ctx.moveTo(0,30);
    
83.         ctx.lineTo(8,0);
    
84.         ctx.lineTo(0,-r+30);
    
85.         ctx.lineTo(-8,0);
    
86.         ctx.lineTo(0,30);
    
87.         ctx.fill();
    
88.         ctx.restore();   //返回之前保存的绘图环境
    
89. }
    
90. 
    
91. //重新绘制时钟
    
92. function run(){
    
93.         ctx.clearRect(0,0,width,height);   //清空整张画布,在下面的代码中重新绘制
    
94.         ctx.save();     //保存当前绘图环境
    
95.         var time =new Date();      //获取当前时间
    
96.         var hour=time.getHours();    //获取小时数
    
97.         var minute=time.getMinutes();  //获取分钟数
    
98.         var second=time.getSeconds();  //获取秒数
    
99.         drawBackground();              //绘制背景
    
100.     drawHour(hour,minute,second);  //绘制时针
     
101.     drawMinute(minute,second);     //绘制分针
     
102.     drawSecond(second);            //绘制秒针
     
103.         //绘制时钟中心的那个点
     
104.     ctx.fillStyle="#555";
     
105.     ctx.beginPath();
     
106.         ctx.arc(0,0,8,0,2*Math.PI);
     
107.         ctx.fill();
     
108.         ctx.restore();  //返回之前保存的绘图环境
     
109. }
     
110. window.setInterval(function(){run();},1000);  //每隔一秒重新绘制时钟

复制代码

如果是在表单中，就添加报表块然后执行相同操作，然后在报表块的事件里把上述js代码添加到下面代码的function里面

1. setTimeout(function(){ },1000);

复制代码

最后上个效果图：

时钟效果.cpt (11.15 KB, 下载次数: 213)

2018-1-23 18:40 上传

点击文件名下载附件
8.0模板

                                                                              clock.cpt (7.06 KB, 下载次数: 203)

2018-1-23 18:41 上传

点击文件名下载附件
9.0模板

我是来抢沙发的

这个东东？https://market.fanruan.com/plugin/633

厉害了，偷走拿来用用

已提名精华帖，待论坛运营委员会评分后可评为精华帖，帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
欢迎楼主补充更多细节或者回复交流~~

能请教下这个动图是怎么截取出来的？

好望角 发表于 2018-1-16 09:52
能请教下这个动图是怎么截取出来的？

用这个软件

好厉害，我要像你学习

转走了。。。

happy_cangcang 发表于 2018-1-16 14:33
好厉害，我要像你学习

你的移动端视频才是厉害，我的移动端才刚入门呢，要多多向你讨教

异体 发表于 2018-1-26 21:12

少年休闲海 发表于 2018-1-16 16:41
转走了。。。

有用有用

太牛了

膜拜大拿

想改下时钟 分针 和秒针 及外框 颜色，怎么修改！ctx.fillStyle=   都改过了，还是黑色

function 是什么？
另外时间不准！