const util = require('../../utils/util.js')
const defaultLogName = {
work: '工作',
rest: '休息'
}
const actionName = {
stop: '停止',
start: '开始'
}
const initDeg = {
left: 45,
right: -45,
}
Page({
data: {
remainTimeText: '',
timerType: 'work',
log: {},
completed: false,
isRuning: false,
leftDeg: initDeg.left,
rightDeg: initDeg.right
},
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)
}
})
微信小程序练手项目-小闹钟(完整代码).zip （18个子文件） 
微信小程序练手项目-小闹钟(完整代码) timer pages index 
index.wxml 1KB index.js 3KB index.wxss 3KB setting setting.js 430B setting.wxml 1KB setting.wxss 283B logs logs.js 861B logs.wxml 985B logs.wxss 365B app.json 894B app.js 471B image 
complete.png 834B
view.gif 684KB wechat.png 1KB wechatHL.png 1KB nodata.png 2KB utils util.js 170B app.wxss 752B资源评论
