問題描述
近期,網(wǎng)絡(luò)上流行了一個“時間管理”的梗,想要做好時間管理,清楚把握時間才是關(guān)鍵點(diǎn),那么借著這個“時間管理”,來介紹一個小程序?qū)崿F(xiàn)動態(tài)時鐘的案例吧。
效果圖:
圖2.1 動態(tài)時鐘
解決方案
1、wxml
wxml代碼十分簡單,只需要一個canvas組件便能實(shí)現(xiàn)一個時鐘外圓形狀。
<canvas canvas-id='myCanvas'></canvas> |
2、js
js部分主要針對于Math相關(guān)屬性的應(yīng)用。
(1)指針的配置:
指針都要對運(yùn)動路徑進(jìn)行適當(dāng)?shù)脑O(shè)置,需要利用Math.PI屬性來對不同指針轉(zhuǎn)動角度進(jìn)行配置。比如,秒針轉(zhuǎn)動角度Math.PI/30表示將整個圓(360°)平分為60份,即一秒轉(zhuǎn)過6°;分針、時針的計(jì)算同理。指針轉(zhuǎn)動到某個點(diǎn),存在一個坐標(biāo),坐標(biāo)的計(jì)算需要利用Math.sin、Math.cos屬。
(2)方法為:假設(shè)圓心坐標(biāo)為(a,b),則x=a + Math.sin(angle * (Math.PI / 180)) * r ;y=b -Math.cos(angle * (Math.PI / 180)) * r 。
(3)表盤、數(shù)字點(diǎn):arc(x,y,半徑,起始位置,結(jié)束位置)
3、代碼示例:
(1)先定義將要直接執(zhí)行的幾個函數(shù)
onShow: function (e) { setInterval(show, 1000); //每秒執(zhí)行1次 function show() { secshow() //秒針 minshow() //分針 houshow() //時針 backshow() //表盤 numbershow() //數(shù)字 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) //線條粗細(xì) ctx.setStrokeStyle('black') ctx.moveTo(150, 150) ctx.lineTo(x, y) //指針指向 ctx.closePath() //返回初始狀態(tài) ctx.stroke() //描出點(diǎn)的路徑 } |
(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小時制,取余數(shù) 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)表盤及數(shù)字點(diǎn)
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) } } |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)