微信小程序——绘制时钟

最新推荐文章于 2024-12-17 11:59:09 发布

原创

最新推荐文章于 2024-12-17 11:59:09 发布 · 952 阅读

标签

#编辑器

本文介绍了如何在微信小程序中创建一个动态时钟，通过`index.js`、`index.wxml`、`index.wxss`及`App.json`的代码展示，详细讲解了时钟的绘制过程，并设置每秒更新时间的机制。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

时钟目录、效果图

在这里插入图片描述

index.js代码：

Page({
/**
* 页面的初始数据
*/
data: {

},
drawClock:function(){

    let width = 300,
    height=300
    var ctx= this.ctx
    ctx.translate(width/2,height/2)
    ctx.rotate(-Math.PI/2)
     
    ctx.lineWidth=6
    ctx.lineCap='round'
    for(let i=0;i<12;i++){
    ctx.beginPath()
    ctx.moveTo(80,0)
    ctx.lineTo(100,0)
    ctx.stroke()
    ctx.rotate(Math.PI/6)
    }

    ctx.lineWidth=5
    ctx.lineCap='round'
    for(let i = 0;i<60;i++){
    ctx.beginPath()
    ctx.moveTo(90,0)
    ctx.lineTo(100,0)
    ctx.stroke()
    ctx.rotate(Math.PI/30)
    }
    let time = this.getTime()
    let h = time[0]
    let m = time[1]

最低0.47元/天解锁文章