微信小程序之自定义计时器

最近想在在做的微信小程序加一个计时器功能，就是可以设置一个时间，可以开始倒计时，暂停，最终实现结果（图1，2所示），可能这个配色及样式有点糟糕毕竟css太难了 ，可以在这个基础上进行扩展，如果时间到了会弹出图片或者播放音乐等等

图1

图2

1. block.wxml编写，写出计时器大概骨架

wxml中编写出大体需要的组件，代码如下：

<!--index.wxml-->
<image class="bg" src="../../images/webp (2).webp"></image>
<view hidden="{
    {clockShow}}">
  <view class="slider">
      <slider min="1" max="60" show-value activeColor="#E7624F"
      backgroundColor="#666666" value="{
    {time}}" bindchange="slideChange"></slider>
      </view>
      <view class="task_text">
        <view class="task_title">选择一个任务</view>
        <view class="task_desc">在接下来的{
  {time}}分钟内，您将专注做这件事</view>
      </view>
      <view class="task_cate">
        <view wx:for="{
    {cateArr}}" class="cate_item" wx:key="cate" bindtap="clickCate"
        data-index="{
    {index}}">
          <view class="cate_icon"> <image src="../../images/{
    {item.icon}}.png"></image> </view>
          <view class='cate_text {
    {index == cateActive ? "cate_text_active" : ""}}'>{
  {item.text}}</view>
        </view>
        <view class="start" bindtap="start">
        开始专注
        </view>
  </view>
</view>

<view class="clock" hidden="{
    {!clockShow}}" style="height:{
      {
      clockHeight}}rpx">
  <view class="progress">
    <canvas canvas-id="progress_bg" class="progress_bg"></canvas>
    <canvas canvas-id="progress_active" class="progress_active"></canvas>
    <view class="progress_text">{
  {timeStr}}</view>
  </view>
  <view class="btns">
    <view class