微信小程序项目实例——打卡时钟

微信小程序项目实例——打卡时钟

文章目录

  • 微信小程序项目实例——打卡时钟
  • 一、项目展示
  • 二、首页
  • 三、设置
  • 文末:项目代码

项目代码见文字底部


一、项目展示


这是一款简单实用的小时钟工具
分为工作和休息两种状态
用户可以设置相应的时间
所有的时钟记录都会被保存下来

微信小程序项目实例——打卡时钟_第1张图片


二、首页


首页由计时器、任务输入框和两个计时按钮组成


	
		 
		 		
		 		
		 			
		 		
		 		
		 			
		 		
			 	{{remainTimeText}}
			 	{{taskName}}{{completed ? '已完成!' : '中'}}
		 		
		 
		 
	
	
	
	  {{isRuning ? '完成': '工作'}}

	  {{isRuning ? '完成': '休息'}}
	


效果图如下:


三、设置


用户在设置界面可以更改工作时长和休息时长


	
	  工作时长(分钟)
	  
	    
	  
	

	
	  休息时长(分钟)
	  
	    
	  
	

	
	  
	  	主页背景
	  
	  
	  	选择背景 > 
	  
	

	
	  
	  	
	  	启用铃声
	  
	  
	  	选择铃声 > 
	  
	



效果图如下:

微信小程序项目实例——打卡时钟_第2张图片


文末:项目代码

点击下载

在这里插入图片描述

你可能感兴趣的:(微信小程序,微信小程序,小程序,css,android,ios)