欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崙?zhàn)之打卡時鐘的繪制

 更新時間:2022年04月26日 08:43:22   作者:失散多年的哥哥  
這篇文章主要介紹了如何利用微信小程序制作一個打卡時鐘,分為工作和休息兩種狀態(tài),用戶可以設(shè)置相應(yīng)的時間,所有的時鐘記錄都會被保存下來,感興趣的可以了解一下

一、項目展示

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

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

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

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

二、首頁

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

<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>

效果圖如下:

到此這篇關(guān)于微信小程序?qū)崙?zhàn)之打卡時鐘的繪制的文章就介紹到這了,更多相關(guān)小程序打卡時鐘內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 原生js拖拽實現(xiàn)圖形伸縮效果

    原生js拖拽實現(xiàn)圖形伸縮效果

    這篇文章主要為大家詳細(xì)介紹了原生js拖拽實現(xiàn)圖形的伸縮效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • 一文徹底理解JavaScript原型與原型鏈

    一文徹底理解JavaScript原型與原型鏈

    這篇文章主要介紹了一文徹底理解JavaScript原型與原型鏈,JavaScript中有許多內(nèi)置對象,如:Object,?Math,?Date等,文章圍繞主題展開主題詳情,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-08-08
  • js+CSS 圖片等比縮小并垂直居中實現(xiàn)代碼

    js+CSS 圖片等比縮小并垂直居中實現(xiàn)代碼

    本例子在在 ff 2.0/ ie6 / ie7 中測試通過。但在 opera 8.5 cn中沒有通過。希望大家測試。
    2008-12-12
  • 前端終止請求的3種方式總結(jié)(ajax、axios)

    前端終止請求的3種方式總結(jié)(ajax、axios)

    這篇文章主要給大家總結(jié)介紹了關(guān)于前端終止請求的3種方式,其中包括ajax、axios的相關(guān)資料, 取消請求在前端有時候會用到,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-09-09
  • html+css+js實現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼

    html+css+js實現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼

    這篇文章主要介紹了html+css+js實現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-03-03
  • JS實現(xiàn)狀態(tài)欄跑馬燈文字效果代碼

    JS實現(xiàn)狀態(tài)欄跑馬燈文字效果代碼

    這篇文章主要介紹了JS實現(xiàn)狀態(tài)欄跑馬燈文字效果代碼,涉及JavaScript定時函數(shù)及流程控制的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-10-10
  • webpack打包js的方法

    webpack打包js的方法

    這篇文章主要介紹了webpack打包js的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • 基于javascript實現(xiàn)動態(tài)時鐘效果

    基于javascript實現(xiàn)動態(tài)時鐘效果

    這篇文章主要為大家詳細(xì)介紹了基于javascript實現(xiàn)動態(tài)時鐘效果的相關(guān)資料,動態(tài)顯示系統(tǒng)當(dāng)前時間,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-02-02
  • JS+H5 Canvas實現(xiàn)時鐘效果

    JS+H5 Canvas實現(xiàn)時鐘效果

    這篇文章主要為大家詳細(xì)介紹了JS+H5 Canvas實現(xiàn)時鐘效果,利用JavaScript和Canvas實現(xiàn)簡單時鐘效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-07-07
  • js判斷是否有中文的腳本_js判斷中文方法集合

    js判斷是否有中文的腳本_js判斷中文方法集合

    看網(wǎng)上好多朋友問js判斷是否有文件的代碼,而網(wǎng)上的好多都是是不是全是中文和一些正則,并沒有實際解決問題,在腳本之家站長的幫助下,發(fā)現(xiàn)了這個思路。
    2008-09-09

最新評論