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

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

[mw_shl_code=html,true]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[timerType + 'Time']
let keepTime = showTime * 60 * 1000
let logName = this.logName || defaultLogName[timerType]

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[isRuning ? 'stop' : 'start'],
   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
})
  }
})[/mw_shl_code]

游客，如果您要查看本帖隐藏内容请回复

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

11111111111111

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

下载完怎么用

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

专注于与个人游戏开发者合作，有产品的朋友联系微信号jim20180688，详聊

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源