柿霖不是林 发表于 2017-3-3 10:57:33

微信小程序学习用demo：任务计时：任务计时，计时详情





const util = require('../../utils/util.js')
var app = getApp();
const defaultLogName = {
work: '工作',
rest: '休息'
}
const actionName = {
stop: '停止',
start: '开始'
}

const initDeg = {
left: 45,
right: -45,
}

Page({

data: {
    isShowing: false,
    remainTimeText: '',
    timerType: 'work',
    log: {},
    completed: false,
    isRuning: false,
    leftDeg: initDeg.left,
    rightDeg: initDeg.right,
    userInfo: {}
},
onLoad: function(){
    var that = this;
    app.getUserInfo(function(userInfo){
      that.setData({
         userInfo: userInfo
      })
    })
},

onShow: function() {
    if (this.data.isRuning) return
    let workTime = util.formatTime(wx.getStorageSync('workTime'), 'HH')
    let restTime = util.formatTime(wx.getStorageSync('restTime'), 'HH')
    this.setData({
      workTime: workTime,
      restTime: restTime,
      remainTimeText: workTime + ':00'
    })
},

startTimer: function(e) {
    let startTime = Date.now()
    let isRuning = this.data.isRuning
    let timerType = e.target.dataset.type
    let showTime = this.data
    let keepTime = showTime * 60 * 1000
    let logName = this.logName || defaultLogName

    if (!isRuning) {
      this.timer = setInterval((function() {
      this.updateTimer()
      this.startNameAnimation()
      }).bind(this), 1000)
    } else {
      this.stopTimer()
    }

    this.setData({
      isRuning: !isRuning,
      completed: false,
      timerType: timerType,
      remainTimeText: showTime + ':00',
      taskName: logName
    })

    this.data.log = {
      name: logName,
      startTime: Date.now(),
      keepTime: keepTime,
      endTime: keepTime + startTime,
      action: actionName,
      type: timerType
    }

    this.saveLog(this.data.log)
},

startNameAnimation: function() {
    let animation = wx.createAnimation({
      duration: 450
    })
    animation.opacity(0.2).step()
    animation.opacity(1).step()
    this.setData({
      nameAnimation: animation.export()
    })
},

stopTimer: function() {
    // reset circle progress
    this.setData({
      leftDeg: initDeg.left,
      rightDeg: initDeg.right
    })

    // clear timer
    this.timer && clearInterval(this.timer)
},

updateTimer: function() {
    let log = this.data.log
    let now = Date.now()
    let remainingTime = Math.round((log.endTime - now) / 1000)
    let H = util.formatTime(Math.floor(remainingTime / (60 * 60)) % 24, 'HH')
    let M = util.formatTime(Math.floor(remainingTime / (60)) % 60, 'MM')
    let S = util.formatTime(Math.floor(remainingTime) % 60, 'SS')
    let halfTime

    // update text
    if (remainingTime > 0) {
      let remainTimeText = (H === "00" ? "" : (H + ":")) + M + ":" + S
      this.setData({
      remainTimeText: remainTimeText
      })
    } else if (remainingTime == 0) {
      this.setData({
      completed: true
      })
      this.stopTimer()
      return
    }

    // update circle progress
    halfTime = log.keepTime / 2
    if ((remainingTime * 1000) > halfTime) {
      this.setData({
      leftDeg: initDeg.left - (180 * (now - log.startTime) / halfTime)
      })
    } else {
      this.setData({
      leftDeg: -135
      })
      this.setData({
      rightDeg: initDeg.right - (180 * (now - (log.startTime + halfTime)) / halfTime)
      })
    }
},

changeLogName: function(e) {
    this.logName = e.detail.value
},

saveLog: function(log) {
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(log)
    wx.setStorageSync('logs', logs)
},

showMenu: function(e) {
    var show = !this.data.isShowing;
    this.setData({
      isShowing:show
    })
}
})

**** Hidden Message *****

玉帝 发表于 2017-4-28 16:09:19

11111111111111

艾特新媒体1505186070 发表于 2017-11-10 10:44:15

下载完怎么用

jack369 发表于 2020-4-14 16:37:12

专注于与个人游戏开发者合作，有产品的朋友联系微信号jim20180688，详聊
页: [1]
查看完整版本: 微信小程序学习用demo：任务计时：任务计时，计时详情