评论

利用canvas实现倒计时功能

利用canvas实现倒计时的功能

  1. wxml代码:
    <view class=“page-body”>
    <view class=“page-body-wrapper”>
    <canvas canvas-id=“canvas” class=“canvas”></canvas>
    </view>
    </view>

  2. js代码:
    onReady: function () {

    this.totalTime = 30
    this.interval = setInterval(this.drawText,1000)
    },
    drawText: function (){
    var context = wx.createCanvasContext(“canvas”)
    var _totalTime = this.totalTime
    function text(t)
    {
    context.setFontSize(20)
    context.fillText(t, 100, 100)
    }
    text(_totalTime)

    _totalTime = _totalTime - 1
    this.totalTime = _totalTime

    context.draw(false, dd=>{
    if (this.totalTime < 0)
    {
    this.totalTime = 30
    }
    })
    },

点赞 1
收藏
评论

3 个评论

  • 陈式坚
    陈式坚
    2019-05-18

    所以一般就是有个服务器时间,然后在倒计时开始和结束后再校准一次

    2019-05-18
    赞同 2
    回复
  • Maverick
    Maverick
    2019-05-17

    setInterval并不是准时执行,出现阻塞就会有偏差,时间长偏差就会很大了;最好是每次执行获取当前时间计算倒计时。

    2019-05-17
    赞同 2
    回复 1
    •  ㅤ
       ㅤ
      2019-05-17

      为何你们的昵称都那么

      见过

      null、false、undefined、的

      !true

      2019-05-17
      回复
  • 橘子🍊
    橘子🍊
    2019-05-18

    怎么开发

    2019-05-18
    赞同
    回复
登录 后发表内容