小程序简单版录音机

先来看看效果

结构

先来看看页面结构

    <!-- wxml -->
    
<view class="wx-container">
  <view id="title">录音机</view>
  <view id="time">{
  {hours}}:{
  {minute}}:{
  {second}}</view>
  <view class="btngroup">
    <view hover-class="change" catch:tap="play">播放</view>
    <view class="play" hover-class="change" catch:tap="start"></view>
    <view hover-class="change" catch:tap="stop">结束</view>
  </view>
</view>

页面样式

/* pages/radio/index.wxss */
.wx-container {
   
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}

#title {
   
  margin: 100rpx auto;
  text-align: center;
  font-size: 50rpx;

}

#time {
   
  font-size: 150rpx;
}

.btngroup {
   
  height: 180rpx;
  margin: 100rpx auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btngroup>view:not(.play) {
   
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  line-height: 120rpx;
  background-color: #eee;
}

.play {
   
  width: 150rpx;
  height: 150rpx;
  border: solid 50rpx red;
  box-sizing: border-box;
  border-radius: 50%;
  transition: .2s;
  background-color: transparent;
}

.change {
   
  transition: .2s;
  box-shadow: 0 0 8rpx 8rpx rgb(0, 0, 0);

}

核心代码

计时函数

🆗，接下来要实现点击录音按钮，进行一个计时效果

这边是一个计时函数，写得比较繁琐，要是各位大大有更好的办法也欢迎补充

Page({
   
  data: {
   
    time: 0,
    cleartime: '',
    timer: null,
    hours: '0' + 0, // 时
    minute: '0' + 0, // 分
    second: '0' + 0, // 秒
  },

// -----------------------------
// 计时器
  setInterval() {
   
    const _this = this
    var second = _this.data.sec