第微信小程序?qū)崙?zhàn)之打卡時鐘的繪制目錄一、項目展示二、首頁三、設(shè)置

一、項目展示

這是一款簡單實用的小時鐘工具

分為工作和休息兩種狀態(tài)

用戶可以設(shè)置相應的時間

所有的時鐘記錄都會被保存下來

二、首頁

首頁由計時器、任務輸入框和兩個計時按鈕組成

viewclass="containertimer{{isRuning'timer--runing':''}}"

view

view

view/view

view

view/view

/view

view

view/view

/view

textwx:if="{{!completed}}"{{remainTimeText}}/text

text

wx:if="{{isRuning}}"

animation="{{nameAnimation}}"

{{taskName}}{{completed'已完成！':'中'}}/text

image

wx:if="{{completed}}"

src="../../image/complete.png"/image

/view

input

type="text"

placeholder-

bindinput="changeLogName"

placeholder="給您的任務取個名字吧"/

/view

view

view

bindtap="startTimer"

data-type="work"

class="timer_ctrl{{isRuningtimerType=='rest''hide':''}}"{{isRuning'完成':'工作'}}/view

view

bindtap="startTimer"

data-type="rest"

class="timer_ctrl{{isRuningtimerType=='work''hide':''}}"{{isRuning'完成':'休息'}}/view

/view

/view

效果圖如下：

三、設(shè)置

用戶在設(shè)置界面可以更改工作時長和休息時長

view

view

text工作時長(分鐘)/text

view

slider

bindchange="changeWorkTime"

show-value="true"

min="1"

max="60"

value="{{workTime}}"

left-icon="cancel"

right-icon="success_no_circle"/

/view

/view

view

text休息時長(分鐘)/text

view

slider

bindchange="changeRestTime"

show-value="true"

min="5"

max="60"

value="{{restTime}}"

left-icon="cancel"

right-icon="success_no_circle"/

/view

/view

view

view

text主頁背景/text

/view

view

textbindtab=""選擇背景/text

/view

/view

view

view

switchtype="checkbox"size="mini"checkedbindchange="switch1Change"/

text啟用鈴聲/text