最近想在在做的微信小程序加一个计时器功能，就是可以设置一个时间，可以开始倒计时，暂停，最终实现结果（图1，2所示），可能这个配色及样式有点糟糕毕竟css太难了，可以在这个基础上进行扩展，如果时间到了会弹出图片或者播放音乐等等

图1

图2

1. block.wxml编写，写出计时器大概骨架

wxml中编写出大体需要的组件，代码如下：

<!--index.wxml-->
<image class="bg" src="../../images/webp (2).webp"></image>
<view hidden="{{clockShow}}"><view class="slider"><slider min="1" max="60" show-value activeColor="#E7624F"backgroundColor="#666666" value="{{time}}" bindchange="slideChange"></slider></view><view class="task_text"><view class="task_title">选择一个任务</view><view class="task_desc">在接下来的{{time}}分钟内，您将专注做这件事</view></view><view class="task_cate"><view wx:for="{{cateArr}}" class="cate_item" wx:key="cate" bindtap="clickCate"data-index="{{index}}"><view class="cate_icon"> <image src="../../images/{{item.icon}}.png"></image> </view><view class='cate_text {{index == cateActive ? "cate_text_active" : ""}}'>{{item.text}}</view></view><view class="start" bindtap="start">开始专注</view></view>
</view><view class="clock" hidden="{{!clockShow}}" style="height:{{clockHeight}}rpx"><view class="progress"><canvas canvas-id="progress_bg" class="progress_bg"></canvas><canvas canvas-id="progress_active" class="progress_active"></canvas><view class="progress_text">{{timeStr}}</view></view><view class="btns"><view class="okBtn" bindtap="ok" wx:if="{{okShow}}">返回</view><view class="pauseBtn" bindtap="pause" wx:if="{{pauseShow}}">暂停</view><view class="continueCancelBtn" wx:if="{{continueCancelShow}}"><view class="continueBtn" bindtap="continue">继续</view><view class="cancelBtn" bindtap="cancel">放弃</view></view></view>
</view>

2. block.wxss编写，写出计时器大概骨架

block.wxss对wxml中的组件编写样式，实现好看背景及布局，代码如下：

.adv1{width: 100%;height: 900rpx;background: url('/img/ba3.png') no-repaeat 0 0;background-size: contain;
}
.adv-img{width: 100%;height: 900rpx;position: absolute;
}
.tiaoguo{font-size: 25rpx;background-color: wheat;border-radius: 80rpx;display: inline-block;margin-left: 10rpx;position: absolute;z-index: 999;right: 25rpx;top: 850rpx;padding-left: 10rpx;padding-right: 10rpx;
}
button{border-radius: 18rpx;width: 220rpx;background-color: #EECBAD;color: #8B5742;margin-top: 38rpx;font-size: 33rpx;
}
.text2{width: 100%;height: 100%;display: flex;justify-content: center;margin-top: 23rpx;font-size: 28rpx;
}.bg{width: 100%;height: 100%;position:fixed; background-size:100% 100%;z-index: -1;filter: blur(10rpx);
}
.silder{width: 650rpx;margin: 40rpx auto;
}
.task_text{height: 120rpx;margin: 40rpx auto;text-align: center;
}
.task_text .task_title{font-size: 35rpx;height: 70rpx;line-height: 70rpx;
}
.task_text .task_desc{font-size: 30rpx;height: 50rpx;line-height: 50rpx;color: #999999;
}
.task_cate{width: 660rpx;margin: 0 auto;display: flex;flex-wrap: wrap;
}
.task_cate .cate_item{width: 220rpx;height: 130rpx;text-align: center;margin-bottom: 50rpx;
}
.task_cate .cate_item .cate_icon{height: 70rpx;
}
.task_cate .cate_item .cate_icon image{width: 50rpx;height: 50rpx;
}
.task_cate .cate_item .cate_text{height: 60rpx;line-height: 60rpx;font-size: 30rpx;
}
.task_cate .cate_item .cate_text_active{color: #e41749;
}
.start{width: 280rpx;height: 90rpx;line-height: 90rpx;text-align: center;margin: 40rpx auto;border: 2rpx solid #e41749;color: #e41749;border-radius: 20rpx;
}
.clock{overflow: hidden;background: #8ac6d1;
}
.progress{width: 400rpx;height: 400rpx;/* background: orange; */margin: 140rpx auto;position: relative;
}
.progress .progress_bg,.progress_active{position: absolute;left: 0;top: 0;width: 400rpx;height: 400rpx;
}
.progress .progress_text{width: 160rpx;height: 60rpx;line-height: 60rpx;font-size: 30rpx;color: #ffffff;text-align: center;position: absolute;left: 120rpx;top: 170rpx;
}
.btns .okBtn, .btns .pauseBtn, .btns .continueBtn, .btns .cancelBtn{width: 280rpx;height: 80rpx;line-height: 80rpx;text-align: center;color: #ffffff;border: 3rpx solid #ffffff;border-radius: 20rpx;margin: 0 auto 20rpx auto;
}

3. block.js编写，写出计时器大概骨架

block.js动态绑定数据，实现开始计时，以及暂停计时等功能，代码如下：

//获取util实例
const app = getApp()
const util = require('../../utils/util.js')Page({data: {clockShow:false,clockHeight:0,time:'5',mTime:300000,timeStr:'05:00',rate:'',timer:null,cateArr:[{icon: 'work',text: '工作'},{icon: 'study',text: '学习'},{icon: 'think',text: '思考'},{icon: 'write',text: '写作'},{icon: 'sport',text: '运动'},{icon: 'read',text: '阅读'}],cateActive:'0',okShow:false,pauseShow:true,continueCancelShow:false},onLoad: function() {var res = wx.getSystemInfoSync();var rate = 750 / res.windowWidth;console.log(rate);this.setData({rate:rate,clockHeight:rate * res.windowHeight})},slideChange:function(e){this.setData({time:e.detail.value})},clickCate:function(e){this.setData({cateActive:e.currentTarget.dataset.index})},start:function(){this.setData({clockShow:true,mTime:this.data.time*60*1000,timeStr:parseInt(this.data.time) >= 10 ? this.data.time+':00' : '0' + this.data.time+':00'})this.drawBg();this.drawActivve();},drawBg:function(){var lineWidth = 6 / this.data.rate;//pxvar ctx = wx.createCanvasContext('progress_bg');ctx.setLineWidth(lineWidth);ctx.setStrokeStyle('#000000');ctx.setLineCap('round');ctx.beginPath();ctx.arc(400/this.data.rate/2,400/this.data.rate/2,400/this.data.rate/2-2*lineWidth,0,2*Math.PI,false);ctx.stroke();ctx.draw();},// 动态画圆drawActivve:function(){var _this = this;var timer = setInterval(function(){//1.5-3.5var angle = 1.5 + 2*(_this.data.time*60*1000 - _this.data.mTime)/(_this.data.time*60*1000);var currentTime = _this.data.mTime - 100;_this.setData({mTime:currentTime});if(angle < 3.5){if(currentTime % 1000 == 0){var timeStr1 = currentTime / 1000;// svar timeStr2 = parseInt(timeStr1 / 60);// mvar timeStr3 = (timeStr1 - timeStr2*60) >= 10 ? (timeStr1 - timeStr2*60) :'0'+(timeStr1 - timeStr2*60);var timeStr2 = timeStr2 >= 10 ? timeStr2 : '0'+timeStr2;_this.setData({timeStr:timeStr2+':'+timeStr3})}var lineWidth = 6 / _this.data.rate;//pxvar ctx = wx.createCanvasContext('progress_active');ctx.setLineWidth(lineWidth);ctx.setStrokeStyle('#ffffff');ctx.setLineCap('round');ctx.beginPath();ctx.arc(400/_this.data.rate/2,400/_this.data.rate/2,400/_this.data.rate/2-2*lineWidth,1.5*Math.PI,angle*Math.PI,false);ctx.stroke();ctx.draw();}else{var logs = wx.getStorageSync('logs') || [];logs.unshift({date:util.formatTime(new Date),cate:_this.data.cateActive,time:_this.data.time});wx.setStorageSync('logs', logs);_this.setData({timeStr:'00:00',okShow:true,pauseShow:false,continueCancelShow:false});clearInterval(timer);}},100)_this.setData({timer:timer})},pause:function(){clearInterval(this.data.timer);this.setData({pauseShow:false,continueCancelShow:true,okShow:false})},continue:function(){this.drawActivve();this.setData({pauseShow:true,continueCancelShow:false,okShow:false})},cancel:function(){clearInterval(this.data.timer);this.setData({pauseShow:true,continueCancelShow:false,okShow:false,clockShow:false})},ok:function(){clearInterval(this.data.timer);this.setData({pauseShow:true,continueCancelShow:false,okShow:false,clockShow:false})}})

4. 在微信小程序项目根目录下新建utils文件夹，放置utils.js的文件

utils文件夹一定在项目根目录下（图3所示），utils.js文件是对日期格式进行处理，代码如下：

图3

utils.js代码：

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n
}module.exports = {formatTime: formatTime
}

到这里，我们就可以实现微信小程序简单的计时器，你也可以在这个基础上实现一些更复杂的更好看的功能

微信小程序之自定义计时器相关推荐

微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
微信小程序可自定义单片机温湿度阈值(基于esp32c3+onenet+微信小程序)
前段时间有个粉丝问我能不能出一个微信小程序调节阈值的教程,我就下班之余在原来的基础上改进一下,因为是修改阈值,这里我就用继电器控制风扇.温度达到一定阈值控制风扇启动来做例子.这个成功了,其他阈值修 ...
微信小程序的自定义导航栏
微信小程序的导航栏主要分为两个部分:状态栏和标题栏. 关于微信小程序的自定义导航栏也就是通过微信小程序官方提供的API接口来算出状态栏和标题栏的高度. 注意获取到的数值单位都是px. 首先要开启自定义 ...

微信小程序之自定义计时器

1. block.wxml编写，写出计时器大概骨架

2. block.wxss编写，写出计时器大概骨架

3. block.js编写，写出计时器大概骨架

4. 在微信小程序项目根目录下新建utils文件夹，放置utils.js的文件

微信小程序之自定义计时器相关推荐

最新文章

热门文章