微信小程序——实现时钟样式

最新推荐文章于 2024-06-26 16:36:40 发布

DavidGhul

最新推荐文章于 2024-06-26 16:36:40 发布

阅读量4.5k

点赞数 4

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/weixin_43113563/article/details/95764280

版权

本文将展示如何在微信小程序中实现一个动态更新的时钟样式，介绍相关文件结构和实现步骤。

摘要由CSDN通过智能技术生成

效果和文件结构

在这里插入图片描述

<!--index.wxml-->
<canvas class='canvas' canvas-id='myCanvas'></canvas>

/**index.wxss**/
.canvas{
   
    width: 300px;
    height: 300px;
    background-color: lavender;
}

//index.js
//获取应用实例
const ctx = wx.createCanvasContext('myCanvas')
Page({
   
    onShow: function(e) {
   
        setInterval(show, 1000); //每秒执行1次
        function show() {
   
            secshow()
            minshow()
            houshow()
            backshow()
            numbershow()
            ctx.draw()
        }
    }