用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序|动态时钟

Rolan 2020-5-2 00:02

问题描述近期,网络上流行了一个“时间管理”的梗,想要做好时间管理,清楚把握时间才是关键点,那么借着这个“时间管理”,来介绍一个小程序实现动态时钟的案例吧。效果图:图2.1动态时钟解决方案1、wxmlwxml代码十 ...

问题描述

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

效果图:

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.sinMath.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)

  }

}

 


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 算法与编程之美 来自: 微信公众号