JavaScript怎么實現微信小程序打卡時鐘

今天小編給大家分享一下JavaScript怎么實現微信小程序打卡時鐘的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、項目展示

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

分為工作和休息兩種狀態

用戶可以設置相應的時間

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

二、首頁

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

<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" ></view>
		 		</view>
		 		<view class="timer_progress timer_right">
		 			<view class="timer_circle timer_circle--right" ></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- 
		 	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>

效果圖如下：

三、設置

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

<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="switch2Change"/>
	  	<text>啟用鈴聲</text>
	  </view>
	  <view class="section_body">
	  	<text bindtab="" class="section_tip">選擇鈴聲 > </text>
	  </view>
	</view>
</view>

效果圖如下：

以上就是“JavaScript怎么實現微信小程序打卡時鐘”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。