JavaScript實(shí)現(xiàn)微信小程序打卡時鐘項(xiàng)目實(shí)例
一、項(xiàng)目展示
這是一款簡單實(shí)用的小時鐘工具
分為工作和休息兩種狀態(tài)
用戶可以設(shè)置相應(yīng)的時間
所有的時鐘記錄都會被保存下來
二、首頁
首頁由計(jì)時器、任務(wù)輸入框和兩個計(jì)時按鈕組成
<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ù)取個名字吧"/> </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è)置界面可以更改工作時長和休息時長
<view class="container"> <view class="section panel"> <text class="section_title">工作時長(分鐘)</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">休息時長(分鐘)</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>
效果圖如下:
文末:項(xiàng)目代碼
以上就是JavaScript實(shí)現(xiàn)微信小程序打卡時鐘項(xiàng)目實(shí)例的詳細(xì)內(nèi)容,更多關(guān)于JavaScript微信小程序打卡時鐘的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
這篇文章主要介紹了JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法,分別用js與jQuery兩種方式加以實(shí)現(xiàn),是非常實(shí)用的特效技巧,需要的朋友可以參考下2014-11-11全面解析Bootstrap中transition、affix的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中transition、affix的使用方法,感興趣的朋友可以參考一下2016-05-05JavaScript中表格文件導(dǎo)出的實(shí)現(xiàn)示例
本文主要介紹了JavaScript中表格文件導(dǎo)出的實(shí)現(xiàn)示例,JavaScript中的Blob對象和a標(biāo)簽的download屬性是實(shí)現(xiàn)這一功能的關(guān)鍵,本文就來詳細(xì)的介紹一下,感興趣的可以了解一下2024-01-01Typescript高級類型Record,Partial,Readonly詳解
這篇文章主要介紹了Typescript高級類型Record,Partial,Readonly等介紹,keyof將一個類型的屬性名全部提取出來當(dāng)做聯(lián)合類型,本文通過實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11JS面向?qū)ο?、prototype、call()、apply()
那天用到prototype.js于是打開看看,才看幾行就滿頭霧水,原因是對js的面向?qū)ο蟛皇呛苁煜?,于是百?google了一把,最后終于算小有收獲,寫此紀(jì)念一下^_^。2009-05-05