微信小程序?qū)崙?zhàn)之打卡時(shí)鐘的繪制
一、項(xiàng)目展示
這是一款簡單實(shí)用的小時(shí)鐘工具
分為工作和休息兩種狀態(tài)
用戶可以設(shè)置相應(yīng)的時(shí)間
所有的時(shí)鐘記錄都會(huì)被保存下來
二、首頁
首頁由計(jì)時(shí)器、任務(wù)輸入框和兩個(gè)計(jì)時(shí)按鈕組成
<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="給您的任務(wù)取個(gè)名字吧"/> </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>
效果圖如下:
三、設(shè)置
用戶在設(shè)置界面可以更改工作時(shí)長和休息時(shí)長
<view class="container"> <view class="section panel"> <text class="section_title">工作時(shí)長(分鐘)</text> <view class="section_body"> <slider bindchange="changeWorkTime" show-value="true" min="1" max="60" value="{{workTime}}" left-icon="cancel" right-icon="success_no_circle"/> </view> </view> <view class="section panel"> <text class="section_title">休息時(shí)長(分鐘)</text> <view class="section_body"> <slider bindchange="changeRestTime" show-value="true" min="5" max="60" value="{{restTime}}" left-icon="cancel" right-icon="success_no_circle"/> </view> </view> <view class="section panel"> <view class="section_title"> <text>主頁背景</text> </view> <view class="section_body"> <text bindtab="" class="section_tip">選擇背景 > </text> </view> </view> <view class="section panel"> <view class="section_title"> <switch class="section_check" type="checkbox" size="mini" checked bindchange="switch1Change"/> <text>啟用鈴聲</text> </view> <view class="section_body"> <text bindtab="" class="section_tip">選擇鈴聲 > </text> </view> </view> </view>
效果圖如下:
到此這篇關(guān)于微信小程序?qū)崙?zhàn)之打卡時(shí)鐘的繪制的文章就介紹到這了,更多相關(guān)小程序打卡時(shí)鐘內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js+CSS 圖片等比縮小并垂直居中實(shí)現(xiàn)代碼
本例子在在 ff 2.0/ ie6 / ie7 中測試通過。但在 opera 8.5 cn中沒有通過。希望大家測試。2008-12-12前端終止請求的3種方式總結(jié)(ajax、axios)
這篇文章主要給大家總結(jié)介紹了關(guān)于前端終止請求的3種方式,其中包括ajax、axios的相關(guān)資料, 取消請求在前端有時(shí)候會(huì)用到,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09html+css+js實(shí)現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼
這篇文章主要介紹了html+css+js實(shí)現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03JS實(shí)現(xiàn)狀態(tài)欄跑馬燈文字效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)狀態(tài)欄跑馬燈文字效果代碼,涉及JavaScript定時(shí)函數(shù)及流程控制的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10基于javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果的相關(guān)資料,動(dòng)態(tài)顯示系統(tǒng)當(dāng)前時(shí)間,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02JS+H5 Canvas實(shí)現(xiàn)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了JS+H5 Canvas實(shí)現(xiàn)時(shí)鐘效果,利用JavaScript和Canvas實(shí)現(xiàn)簡單時(shí)鐘效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07