#7 提交实验七

students/1714080903206/clock/app.js

@@ -0,0 +1,23 @@
+//app.js
+const defaultTime = {
+  defaultWorkTime: 25,
+  defaultRestTime: 5
+}
+App({
+  onLaunch: function () {
+    let workTime = wx.getStorageSync('workTime')
+    let restTime = wx.getStorageSync('restTime')
+    if (!workTime) {
+      wx.setStorage({
+        key: 'workTime',
+        data: defaultTime.defaultWorkTime
+      })
+    }
+    if (!restTime) {
+      wx.setStorage({
+        key: 'restTime',
+        data: defaultTime.defaultRestTime
+      })
+    }
+  }
+})

students/1714080903206/clock/app.json

@@ -0,0 +1,40 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/logs/logs",
+    "pages/setting/setting"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#3197ed",
+    "navigationBarTitleText": "",
+    "navigationBarTextStyle": "white"
+  },
+  "tabBar": {
+    "color": "#dddddd",
+    "selectedColor": "#3cc51f",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "iconPath": "image/wechat.png",
+        "selectedIconPath": "image/wechatHL.png",
+        "text": "主页"
+      },
+      {
+        "pagePath": "pages/logs/logs",
+        "iconPath": "image/wechat.png",
+        "selectedIconPath": "image/wechatHL.png",
+        "text": "记录"
+      },
+      {
+        "pagePath": "pages/setting/setting",
+        "iconPath": "image/wechat.png",
+        "selectedIconPath": "image/wechatHL.png",
+        "text": "设置"
+      }
+    ]
+  },
+  "sitemapLocation": "sitemap.json"
+}

students/1714080903206/clock/app.wxss

@@ -0,0 +1,70 @@
+view,
+sroll-view,
+swiper,
+icon,
+text,
+progress,
+button,
+checkbox,
+form,
+input,
+label,
+input,
+picker,
+radio,
+slider,
+switch,
+action-sheet,
+modal,
+toast,
+loading,
+navigator,
+audio,
+image,
+video,
+map,
+canvas {
+  box-sizing: border-box;
+}
+page {
+  height: 100%;
+}
+
+.hide {
+  display: none!important;
+}
+
+.container,
+input,
+button {
+  font: 14px "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+}
+
+.container {
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.panel {
+  background: #fff;
+  border-radius: 3px;
+  padding: 5px 10px;
+}
+.nodata{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+}
+
+.nodata_img{
+	display: block;
+	width: 45px;
+	height: 45px;
+}
+
+.nodata_text{
+	color:#dedede;
+	font-size: 12px;
+	padding-left: 10px;
+}

students/1714080903206/clock/pages/index/index.js

@@ -0,0 +1,146 @@
+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)
+  }
+})

students/1714080903206/clock/pages/index/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

students/1714080903206/clock/pages/index/index.wxml

@@ -0,0 +1,40 @@
+<view class="container timer {{isRuning ? 'timer--runing': ''}}">
+	<view class="timer_main">
+		 <view class="timer_time-wrap">
+		 		<view class="timer_progress_mask"></view>
+		 		<view class="timer_progress timer_left">
+		 			<view class="timer_circle timer_circle--left" style="transform: rotate({{leftDeg}}deg);"></view>
+		 		</view>
+		 		<view class="timer_progress timer_right">
+		 			<view class="timer_circle timer_circle--right" style="transform: rotate({{rightDeg}}deg);"></view>
+		 		</view>
+			 	<text wx:if="{{!completed}}" class="timer_time">{{remainTimeText}}</text>
+			 	<text 
+			 		wx:if="{{isRuning}}" 
+			 		animation="{{nameAnimation}}" 
+			 		class="timer_taskName">{{taskName}}{{completed ? '已完成！' : '中'}}</text>
+		 		<image 
+		 			wx:if="{{completed}}" 
+		 			class="timer_done" 
+		 			src="../../image/complete.png"></image>
+		 </view>
+		 <input 
+		 	type="text" 
+		 	placeholder-style="text-align:center" 
+		 	class="timer_inputname" 
+		 	bindinput="changeLogName"
+		 	placeholder="给您的任务取个名字吧"/>
+	</view>
+
+	<view class="timer_footer">
+	  <view 
+	  	bindtap="startTimer" 
+	  	data-type="work" 
+	  	class="timer_ctrl {{isRuning && timerType == 'rest' ? 'hide' : ''}}" >{{isRuning ? '完成': '工作'}}</view>
+
+	  <view 
+	  	bindtap="startTimer" 
+	  	data-type="rest" 
+	  	class="timer_ctrl {{isRuning && timerType == 'work' ? 'hide' : ''}}" >{{isRuning ? '完成': '休息'}}</view>
+	</view>
+</view>