微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。​

问题描述

近期，网络上流行了一个“时间管理”的梗，想要做好时间管理，清楚把握时间才是关键点，那么借着这个“时间管理”，来介绍一个小程序实现动态时钟的案例吧。

效果图：

微信小程序|动态时钟_编程之美

图2.1 动态时钟

解决方案

1、wxml

wxml代码十分简单，只需要一个canvas组件便能实现一个时钟外圆形状。

<canvas  canvas-id='myCanvas'></canvas>

2、js

js部分主要针对于Math相关属性的应用。

（1）指针的配置：

指针都要对运动路径进行适当的设置，需要利用Math.PI属性来对不同指针转动角度进行配置。比如，秒针转动角度Math.PI/30表示将整个圆(360°)平分为60份，即一秒转过6°；分针、时针的计算同理。指针转动到某个点，存在一个坐标，坐标的计算需要利用Math.sin、Math.cos属。

（2）方法为：假设圆心坐标为(a,b)，则x=a + Math.sin(angle * (Math.PI / 180)) * r ；y=b -Math.cos(angle * (Math.PI / 180)) * r 。

（3）表盘、数字点：arc(x,y,半径,起始位置，结束位置)

3、代码示例：

（1）先定义将要直接执行的几个函数


  onShow:  function (e) {

     setInterval(show, 1000); //每秒执行1次

     function show() {

       secshow() //秒针

       minshow() //分针

       houshow() //时针

       backshow() //表盘

       numbershow() //数字

       ctx.draw()

     }

   },


（2）秒针


function secshow() {

   var now = new Date()

   var sec = now.getSeconds()

   //角度弧度

   var angle = sec * Math.PI / 30

   var x = 100 * Math.sin(angle) + 150

   var y = 150 - 100 * Math.cos(angle)

   ctx.beginPath() #开始路径

  ctx.setLineWidth(5)  //线条粗细

   ctx.setStrokeStyle('black')

   ctx.moveTo(150, 150)

   ctx.lineTo(x, y) //指针指向

   ctx.closePath() //返回初始状态

   ctx.stroke() //描出点的路径

}


（3）分针


function minshow() {

   var now = new Date()

   var min = now.getMinutes()

   var sec = now.getSeconds()

   var angle = (min + sec / 60) * Math.PI / 30

   var x = 80 * Math.sin(angle) + 150

   var y = 150 - 80 * Math.cos(angle)

   ctx.beginPath()

   ctx.setLineWidth(5)

   ctx.setStrokeStyle('black')

   ctx.moveTo(150, 150)

   ctx.lineTo(x, y)

  ctx.closePath()

   ctx.stroke()

}


（4）时针


function houshow() {

   var now = new Date()

   var hou = now.getHours()

   hou = hou % 12  //24小时制，取余数

   var min = now.getMinutes()

   var sec = now.getSeconds()

   var angle = (hou + min / 60 + sec / 3600) * Math.PI / 6

   var x = 50 * Math.sin(angle) + 150

   var y = 150 - 50 * Math.cos(angle)

   ctx.beginPath()

   ctx.setLineWidth(8)

   ctx.moveTo(150, 150)

   ctx.lineTo(x, y)

   ctx.closePath()

   ctx.stroke()

}


(5)表盘及数字点


function backshow() {

   ctx.beginPath()

  ctx.setLineWidth(3)

   ctx.arc(150, 150, 110, 0, 2 * Math.PI)

   ctx.closePath()

   ctx.stroke()

}


function numbershow() {

   ctx.beginPath()

   ctx.setFontSize(20)

   for (var i = 1; i < 13; i++) {

     var angle = i * Math.PI / 6

     var x = 100 * Math.sin(angle) + 145

     var y = 158 - 100 * Math.cos(angle)

     ctx.fillText(i, x, y)

  }

}



END

编  辑   |   王楠岚

责  编   |   吴怡辰

​ where2go 团队​


微信号：算法与编程之美          

微信小程序|动态时钟_时间管理_02

长按识别二维码关注我们!

写留言”发表评论，期待您的参与！期待您的转发！