微信小程序 简单计时器制作

微信小程序 简单计时器制作

小程序简单计时器的制作,也可用于倒计时,以录音计时为例:

  1. // 计时器
  2. function timer(that){
  3.   // timeout则跳出递归
  4.   if (that.data.record == 0){
  5.     return;
  6.   }
  7.   if(that.data.min == 10){
  8.     return;
  9.   }
  10.   let sec = that.data.sec * 1
  11.   let min = that.data.min * 1
  12.   sec += 1
  13.   if(sec < 10){
  14.     sec = '0' + sec;
  15.   }else if(sec == 60){
  16.     sec = '00'
  17.     min += 1
  18.   }
  19.   if(min < 10){
  20.     min = '0' + min
  21.   }
  22.   that.setData({
  23.     sec: sec,
  24.     min: min
  25.   })
  26.   setTimeout(function(){
  27.     timer(that);
  28.   },1000)
  29. }
  30. Page({
  31.   /**
  32.    * 页面的初始数据
  33.    */
  34.   data: {
  35.     record: 0, // 录音按钮显示状态
  36.     sec: '00',
  37.     min: '00',
  38.   },
  39.   // 开始录音
  40.   startRecord: function (e) {
  41.     let that = this;
  42.     that.setData({
  43.       sec: '00'
  44.     })
  45.     recorderManager.start(options);
  46.     recorderManager.onStart(() => {
  47.       that.setData({
  48.         record: 1
  49.       })
  50.       timer(that);
  51.     })
  52.   },
  53.   // 停止录音
  54.   stopRecord: function (e) {
  55.     let that = this;
  56.     recorderManager.stop();
  57.     recorderManager.onStop((res) => {
  58.       console.log('recorder stop', res)
  59.       const { tempFilePath } = res
  60.       wx.showToast({
  61.         title: '录音保存成功',
  62.         icon: 'success',
  63.         duration: 2000
  64.       })
  65.       that.setData({
  66.         record: 0
  67.       })
  68.       timer(that);
  69.     })
  70.   },
  71. })

评论

  1. Windows Chrome 55.0.2883.87
    6 年前
    2018-3-13 17:41:34

    感谢博主, 正好用到。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇