用微信开发工具制作计时器效果

最近看到之前做过的一个计时器案例,感觉数据处理上和vue很相似,所以回顾一下制作过程。

界面很简单,原理是用canvas绘制出一个圆,圆下两个按钮控制计时开始和停止,在圆中有一个data记录时间的变化。效果如下:

文件目录:

app.json中代码修改如下,用来修改界面顶部信息

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#b9dd08",
    "navigationBarTitleText": "计时秒表",
    "navigationBarTextStyle":"black"
  }
}

index.wxml代码如下:

<!--pages/main/main.wxml-->
<view class="container">
  <view class='progress_box'>
    <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas>
    <canvas class="progress_canvas"  canvas-id="canvasProgress">  </canvas>
    <view class="progress_text">
      <text class="progress_time">{{time}}</text> 
    </view>
  </view>
  <div class="oo">
  <view class="open">
    <button type="default" bindtap="open" hover-class="none">开始计时</button>
  </view>
  <view class="end">
    <button type="default" bindtap="end" hover-class="none">计时停止</button>
  </view>
  </div>
</view>

index.wxss代码如下:

.container{
  background-color: #f4f6f8;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.progress_box{
  position: relative;
  width:220px;
  height: 220px; 
  display: flex; 
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.progress_bg{
  position: absolute;
  width:220px;
  height: 220px;
}
.progress_canvas{
  width:220px;
  height: 220px;
}
.progress_text{
  position: absolute;
  display: flex; 
  align-items: center;
  flex-direction: column;
  justify-content: center
}
.progress_info{  
  font-size: 26rpx;
  color: #666666;
  letter-spacing: 2rpx;
  padding-bottom: 26rpx;
  
}
.progress_time{
  font-size: 55rpx;
  border-radius:50px;
  text-align: center;
  color: #fc9153;
}

.open{
  width: 153px;
  float: left;
}
.end{
  width:153px;
  float: right;
}

index.js代码如下:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    time:"00:00"  //初始化时间为00:00
  },
  onShow: function () {//显示背景圆
    this.drawBG()
    
  },
  timer:function(){
    var csss = 0;
    var tt = new Date(0,0);
    this.si=setInterval(()=>{//判断分以及秒是否大于10,小于10时在前面补零
      if (tt.getMinutes()<10){
      this.setData({
        time:"0"+tt.getMinutes()+":"+tt.getSeconds()
        })
      }
      if (tt.getSeconds()<10){
        this.setData({
          time:tt.getMinutes() + ":" +"0"+ tt.getSeconds()
        })
      } 
      if (tt.getMinutes() < 10, tt.getSeconds() < 10){
        this.setData({
          time: "0"+tt.getMinutes() + ":" + "0" + tt.getSeconds()
        })
      }
      tt.setMinutes(csss/60)
      tt.setSeconds(csss%60)
      this.drawLoad(csss/15);
      csss++;
    },1000)
  },
  open:function(){   //点击开始计时按钮时,触发timer事件
    this.timer()
  },
  end:function(){   //点击结束按钮时,将时间重新设置为00:00,并清除计时器
    this.setData({
      time:"00:00"
    })
    clearInterval(this.si)
    this.clearLoad();
  },

  drawBG: function () {//绘制背景
    var ctx = wx.createCanvasContext("canvasProgressbg", this)
    ctx.translate(110,110)
    ctx.setLineWidth(4)//笔触
    ctx.setStrokeStyle("#cecece")//样式
    ctx.setLineCap("round")
    ctx.beginPath()//起始位置
    ctx.arc(0, 0, 80, 0, 2 * Math.PI)//圆弧
    ctx.stroke()
    ctx.draw();
  },
  drawLoad:function(e){ //绘制时间路径
    var ctx = wx.createCanvasContext("canvasProgress", this)
    ctx.translate(110, 110)
    ctx.setLineWidth(4)//笔触
    ctx.setStrokeStyle("#fc9153")//样式
    ctx.setLineCap("round")
    ctx.beginPath()//起始位置
    ctx.arc(0, 0, 80, -Math.PI / 2, e * Math.PI / 2 - Math.PI / 2,false)
    ctx.stroke()
    ctx.draw();
  },
  clearLoad: function (e) {  //清除路径
    var ctx = wx.createCanvasContext("canvasProgress", this)
    ctx.translate(110, 110)
    ctx.setLineWidth(4)//笔触
    ctx.setStrokeStyle("#cecece")//样式
    ctx.setLineCap("round")
    ctx.beginPath()//起始位置
    ctx.arc(0, 0, 80, -Math.PI / 2, e * Math.PI / 2 - Math.PI / 2, false)
    ctx.stroke()
    ctx.draw();
  }

})

相关注释已写在代码中

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页