提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

使用js实现时钟效果

axing 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2018-1-15 21:08 | 显示全部楼层 |取消关注该作者的回复
前段时间逛论坛的时候,发现了这个帖子
FineReport V8.0 插件开发之酷炫时钟控件http://bbs.fanruan.com/thread-66972-1-1.html
效果好酷啊有木有,遗憾的是帖子中的链接已经失效了,在插件商场中也找不到相关的插件。
于是就想自己动手用js写一个。
首先在单元格中输入下面的代码,然后使用html显示内容。
  1. <canvas id="view" height="300px" width="300px"></canvas>
复制代码
这个宽高可以根据自己需要填。
截图201801152100262851.png
然后在预览方式中添加加载结束事件:
  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. function drawBackground(){
  8.         ctx.translate(r,r);      //将画布原点重置为画布的中心
  9.         ctx.beginPath();
  10.         ctx.lineWidth=10;
  11.         ctx.arc(0,0,r-5,0,2*Math.PI);    //绘制一个圆,即时钟的边框
  12.         ctx.stroke();
  13.        
  14.         //绘制时钟上的刻度
  15.         for(var i=0;i<60;i++){
  16.     var x=(r-20)*Math.cos(Math.PI*2/60*i);
  17.     var y=(r-20)*Math.sin(Math.PI*2/60*i);       
  18.         //每逢5个刻度使用黑色绘制,其余用灰色绘制       
  19.     if(i%5===0){
  20.                 ctx.fillStyle="#000000";
  21.         }else{
  22.                 ctx.fillStyle="#cccccc";
  23.         }
  24.         ctx.beginPath();
  25.         ctx.arc(x,y,5,0,2*Math.PI);
  26.         ctx.fill();
  27.         }
  28.         //绘制时钟上的数字
  29.         ctx.font="20px Arial";
  30.         ctx.textAlign="center";
  31.         ctx.textBaseline="middle";
  32.         ctx.fillStyle="#000000";
  33.         for(var j=0;j<12;j++){
  34.     var ax=(r-50)*Math.cos(Math.PI*2/12*j);
  35.     var ay=(r-50)*Math.sin(Math.PI*2/12*j);       
  36.         ctx.beginPath();
  37.         ctx.fillText(j>9?j-9:j+3,ax,ay);  //因为PI的角度计算是从3点钟方向顺时针计算的,所以要对数字判断处理
  38.         ctx.fill();
  39.         }
  40. }

  41. //绘制时针
  42. function drawHour(hour,minute,second){
  43.         ctx.save();      //保存当前绘图环境
  44.         ctx.beginPath();
  45.         //时针的角度等于小时的角度加分钟和秒钟转化为小时的角度
  46.         var rad=2*Math.PI/12*hour+2*Math.PI/12/60*minute+2*Math.PI/12/60/3600*second;
  47.         ctx.rotate(rad);
  48.         ctx.lineWidth=14;
  49.         ctx.lineCap="round"; //设置画线结束端为圆帽形
  50.         ctx.moveTo(0,20);
  51.         ctx.lineTo(0,-r+100);
  52.         ctx.stroke();
  53.         ctx.restore();   //返回之前保存的绘图环境
  54. }

  55. //绘制分针
  56. function drawMinute(minute,second){
  57.         ctx.save();      //保存当前绘图环境
  58.         ctx.beginPath();
  59.         //分针的角度等于分钟的角度加秒钟转化为分钟的角度
  60.         var rad=2*Math.PI/60*minute+2*Math.PI/3600*second;
  61.         ctx.rotate(rad);
  62.         ctx.lineWidth=10;
  63.         ctx.lineCap="round";
  64.         ctx.moveTo(0,20);
  65.         ctx.lineTo(0,-r+80);
  66.         ctx.stroke();
  67.         ctx.restore();   //返回之前保存的绘图环境
  68. }

  69. //绘制秒针
  70. function drawSecond(second){
  71.         ctx.save();      //保存当前绘图环境
  72.         ctx.beginPath();
  73.         ctx.fillStyle="#FF0000";
  74.         var rad=2*Math.PI/60*second;   //秒针的角度为当前秒钟的角度
  75.         ctx.rotate(rad);
  76.         ctx.lineWidth=2;
  77.         ctx.lineCap="round";
  78.         ctx.moveTo(0,30);
  79.         ctx.lineTo(8,0);
  80.         ctx.lineTo(0,-r+30);
  81.         ctx.lineTo(-8,0);
  82.         ctx.lineTo(0,30);
  83.         ctx.fill();
  84.         ctx.restore();   //返回之前保存的绘图环境
  85. }

  86. //重新绘制时钟
  87. function run(){
  88.         ctx.clearRect(0,0,width,height);   //清空整张画布,在下面的代码中重新绘制
  89.         ctx.save();     //保存当前绘图环境
  90.         var time =new Date();      //获取当前时间
  91.         var hour=time.getHours();    //获取小时数
  92.         var minute=time.getMinutes();  //获取分钟数
  93.         var second=time.getSeconds();  //获取秒数
  94.         drawBackground();              //绘制背景
  95.     drawHour(hour,minute,second);  //绘制时针
  96.     drawMinute(minute,second);     //绘制分针
  97.     drawSecond(second);            //绘制秒针
  98.         //绘制时钟中心的那个点
  99.     ctx.fillStyle="#555";
  100.     ctx.beginPath();
  101.         ctx.arc(0,0,8,0,2*Math.PI);
  102.         ctx.fill();
  103.         ctx.restore();  //返回之前保存的绘图环境
  104. }
  105. window.setInterval(function(){run();},1000);  //每隔一秒重新绘制时钟
复制代码

如果是在表单中,就添加报表块然后执行相同操作,然后在报表块的事件里把上述js代码添加到下面代码的function里面
  1. setTimeout(function(){ },1000);
复制代码
最后上个效果图: gg.gif

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

点评

论坛运营委员会评:技术来讲确实很好,不过没有实际的大屏例子或者配合效果即无具体应用场景,超过半数成员选择pass,期待楼主下次带来的新分享哈~~  发表于 2018-1-29 16:58

评分

参与人数 2F豆 +266 收起 理由
兔子酱 + 166 感谢参与精华帖奖励计划~~
happy_cangcang + 100 牛牛牛

查看全部评分

此帖共有 211 位番薯登录后查看
回复

使用道具 举报

糕沫酱 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2018-1-15 23:42 | 显示全部楼层 |取消关注该作者的回复
我是来抢沙发的
来自安卓客户端来自安卓客户端
  收起(1)
  • axing axing
    2018-01-16 08:43 评论
  • 评论

回复 支持 反对

使用道具 举报

星痕 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP1
发表于 2018-1-15 23:45 | 显示全部楼层 |取消关注该作者的回复
  收起(3)
  • axing axing : 这个看他的插件截图只有数字效果,没有图形效果
    2018-01-16 08:42 评论
  • 星痕 星痕 : 回复 axing :那你很棒棒哦
    2018-01-16 10:02 评论
  • axing axing : 回复 星痕 :
    2018-01-16 10:14 评论
  • 评论

回复 支持 反对

使用道具 举报

李少泽 社区微信达人 初学乍练(Lv1)
发表于 2018-1-16 08:39 | 显示全部楼层 |取消关注该作者的回复
  收起(1)
  • axing axing
    2018-01-16 08:43 评论
  • 评论

回复 支持 反对

使用道具 举报

好望角 实名认证 渐入佳境(Lv2)
发表于 2018-1-16 08:49 | 显示全部楼层 |取消关注该作者的回复
厉害了,偷走拿来用用
  收起(1)
  • axing axing
    2018-01-16 10:50 评论
  • 评论

回复 支持 反对

使用道具 举报

兔子酱 社区微信达人帆软员工 管理员
发表于 2018-1-16 09:27 | 显示全部楼层 |取消关注该作者的回复
已提名精华帖,待论坛运营委员会评分后可评为精华帖,帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
欢迎楼主补充更多细节或者回复交流~~
  收起(3)
  • axing axing 又pass了,还没拿过精华帖呢
    2018-01-29 17:22 评论
  • 橙子君 橙子君 : 回复 axing :迟早拿精华的啦!
    2018-01-29 17:30 评论
  • axing axing : 回复 橙子君 :
    2018-01-29 17:32 评论
  • 评论

回复 支持 反对

使用道具 举报

好望角 实名认证 渐入佳境(Lv2)
发表于 2018-1-16 09:52 | 显示全部楼层 |取消关注该作者的回复
能请教下这个动图是怎么截取出来的?
  • 评论

回复 支持 反对

使用道具 举报

axing 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2018-1-16 10:48 | 显示全部楼层 |取消关注该作者的回复
好望角 发表于 2018-1-16 09:52
能请教下这个动图是怎么截取出来的?

用这个软件
截图201801161048249331.png
  收起(1)
  • 好望角 好望角 : 谢谢,受教了
    2018-01-16 10:53 评论
  • 评论

回复 支持 反对

使用道具 举报

happy_cangcang 实名认证 番薯互助团队 互助新人
发表于 2018-1-16 14:33 | 显示全部楼层 |取消关注该作者的回复
好厉害,我要像你学习
  • 评论

回复 支持 反对

使用道具 举报

少年休闲海 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2018-1-16 16:41 | 显示全部楼层 |取消关注该作者的回复
转走了。。。
  • 评论

回复 支持 反对

使用道具 举报

axing 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2018-1-16 17:34 | 显示全部楼层 |取消关注该作者的回复
happy_cangcang 发表于 2018-1-16 14:33
好厉害,我要像你学习

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

回复 支持 反对

使用道具 举报

异体 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2018-1-26 21:12 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

axing 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2018-1-27 16:33 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

axing 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2018-1-27 16:57 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

LLLLLLLYF 社区微信达人 初学乍练(Lv1)
发表于 2018-2-28 17:06 | 显示全部楼层 |取消关注该作者的回复
有用有用
  • 评论

回复 支持 反对

使用道具 举报

朝颜若花  初学乍练(Lv1)
发表于 2018-8-7 19:51 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

果果果 社区微信达人 渐入佳境(Lv2)
发表于 2018-8-9 14:38 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 反对

使用道具 举报

xhqw821  初学乍练(Lv1)
发表于 2018-8-9 22:42 | 显示全部楼层 |取消关注该作者的回复
太牛了
  • 评论

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

what a fine day
任务进行中

Copyright © 帆软|联系帆软| 联系管理员@兔子酱|免责声明|手机版|帆软社区 ( 苏ICP备14031611号-3 )

GMT+8, 2018-10-20 21:12 , Processed in 1.083475 second(s), 199 queries , Gzip On.

返回顶部 返回列表