微信小程序自定義計(jì)時(shí)器功能
更新時(shí)間：2022年09月09日 14:20:22 作者：java猿小白
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義計(jì)時(shí)器功能，設(shè)置一個(gè)時(shí)間，可以開(kāi)始倒計(jì)時(shí)、暫停，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近想在在做的微信小程序加一個(gè)計(jì)時(shí)器功能，就是可以設(shè)置一個(gè)時(shí)間，可以開(kāi)始倒計(jì)時(shí)，暫停，最終實(shí)現(xiàn)結(jié)果（圖1，2所示），可能這個(gè)配色及樣式有點(diǎn)糟糕畢竟css太難了 ，可以在這個(gè)基礎(chǔ)上進(jìn)行擴(kuò)展，如果時(shí)間到了會(huì)彈出圖片或者播放音樂(lè)等等
圖1
圖2
1. block.wxml編寫(xiě)，寫(xiě)出計(jì)時(shí)器大概骨架
wxml中編寫(xiě)出大體需要的組件，代碼如下：
<!--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">選擇一個(gè)任務(wù)</view>
? ? ? ? <view class="task_desc">在接下來(lái)的{{time}}分鐘內(nèi)，您將專注做這件事</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">
? ? ? ? 開(kāi)始專注
? ? ? ? </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">繼續(xù)</view>
? ? ? <view class="cancelBtn" bindtap="cancel">放棄</view>
? ? </view>
? </view>
</view>2. block.wxss編寫(xiě)，寫(xiě)出計(jì)時(shí)器大概骨架
block.wxss對(duì)wxml中的組件編寫(xiě)樣式，實(shí)現(xiàn)好看背景及布局，代碼如下：
.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編寫(xiě)，寫(xiě)出計(jì)時(shí)器大概骨架
block.js動(dòng)態(tài)綁定數(shù)據(jù)，實(shí)現(xiàn)開(kāi)始計(jì)時(shí)，以及暫停計(jì)時(shí)等功能，代碼如下：
//獲取util實(shí)例
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: '學(xué)習(xí)'
? ? ? },
? ? ? {
? ? ? ? icon: 'think',
? ? ? ? text: '思考'
? ? ? },
? ? ? {
? ? ? ? icon: 'write',
? ? ? ? text: '寫(xiě)作'
? ? ? },
? ? ? {
? ? ? ? icon: 'sport',
? ? ? ? text: '運(yùn)動(dòng)'
? ? ? },
? ? ? {
? ? ? ? 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;//px
? ? var 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();
? },
? // 動(dòng)態(tài)畫(huà)圓
? drawActivve:function(){
? ? var _this = this;
? ? var timer = setInterval(function(){
? ? ? //1.5-3.5
? ? ? var 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;// s
? ? ? ? ? var timeStr2 = parseInt(timeStr1 / 60);// m
? ? ? ? ? var 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;//px
? ? ? ? var 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. 在微信小程序項(xiàng)目根目錄下新建utils文件夾，放置utils.js的文件
utils文件夾一定在項(xiàng)目根目錄下（圖3所示），utils.js文件是對(duì)日期格式進(jìn)行處理，代碼如下：
圖3
utils.js代碼：
const formatTime = date => {
? const year = date.getFullYear()
? const month = date.getMonth() + 1
? const 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
}到這里，我們就可以實(shí)現(xiàn)微信小程序簡(jiǎn)單的計(jì)時(shí)器，你也可以在這個(gè)基礎(chǔ)上實(shí)現(xiàn)一些更復(fù)雜的更好看的功能。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
firefox下對(duì)ajax的onreadystatechange的支持情況分析
firefox下對(duì)ajax的onreadystatechange的支持分析。用的到的朋友可以參考下。2009-12-12
js簡(jiǎn)單實(shí)現(xiàn)讓文本框內(nèi)容逐個(gè)字的顯示出來(lái)
逐個(gè)字顯示效果就像是打印機(jī)一樣，在某些情況下起到強(qiáng)調(diào)作用，下面有個(gè)不錯(cuò)的示例，大家可以學(xué)習(xí)下2013-10-10
JavaScript實(shí)現(xiàn)日期格式化詳細(xì)實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)日期格式化的相關(guān)資料,JavaScript中的日期對(duì)象提供了許多方法和屬性,可以通過(guò)它們來(lái)進(jìn)行日期的格式化,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于webpack2.0搭建前端項(xiàng)目的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用webpack2.0具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
BootStrap自定義popover,點(diǎn)擊區(qū)域隱藏功能的實(shí)現(xiàn)
下面小編就為大家分享一篇BootStrap自定義popover,點(diǎn)擊區(qū)域隱藏功能的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
js原生之焦點(diǎn)圖轉(zhuǎn)換加定時(shí)器實(shí)例
本文主要分享了在jQuery之焦點(diǎn)圖轉(zhuǎn)換-左右的基礎(chǔ)上，將jQuery代碼改成js原生，并添加定時(shí)器（setInterval()和clearInterval()）的實(shí)例代碼。需要的朋友可以參考借鑒2016-12-12
詳解小程序云開(kāi)發(fā)攻略(解決最棘手的問(wèn)題)
這篇文章主要介紹了詳解小程序云開(kāi)發(fā)攻略(解決最棘手的問(wèn)題)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
微信小程序?qū)崿F(xiàn)單選選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單選選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
JS實(shí)現(xiàn)DIV高度自適應(yīng)窗口示例
這篇文章主要介紹了JS實(shí)現(xiàn)DIV高度自適應(yīng)窗口的方法,結(jié)合完整實(shí)例形式分析了JS通過(guò)動(dòng)態(tài)操作頁(yè)面元素屬性實(shí)現(xiàn)高度自適應(yīng)的相關(guān)技巧,需要的朋友可以參考下2017-02-02
JS實(shí)現(xiàn)簡(jiǎn)單面向?qū)ο蟮念伾x擇器實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單面向?qū)ο蟮念伾x擇器,以完整實(shí)例形式分析了JavaScript基于面向?qū)ο髮?shí)現(xiàn)顏色選擇器的具體步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-04-04