微信小程序?qū)崿F(xiàn)答題倒計(jì)時(shí)

更新時(shí)間：2022年09月09日 14:27:14 作者：白面葫蘆娃·煎餅

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)答題倒計(jì)時(shí)，自定義計(jì)時(shí)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

想做一個(gè)答題的計(jì)時(shí)器效果，本文為大家分享了微信小程序?qū)崿F(xiàn)答題倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下

思路

利用canvas不停的畫弧線

效果

代碼

wxml

<view class='container'>

? <view class="bg">
? ? {{stepText}}s
? </view>
? ?<canvas class='bgCanvas' canvas-id='bgCanvas'></canvas>
</view>

<button bindtap='clickStartBtn'>開始倒計(jì)時(shí)</button>
<button bindtap='reStartBtn'>重置</button>

wxss

.container{
? ? /**background-color: wheat;*/
? ? width:100%;
? ? height:100px;
??
? ? position: relative;
? ? padding:0 0;
? ? margin:10rpx;
? ? background-color: rgb(27, 122, 167);

? ? display: flex;
? ? flex-direction: column;
? ? align-items: center;
? ? justify-content: center;
}

.bg{
??
? ?border-radius: 50%;
? ?border: 6rpx solid #DCDCDC;
? ?width: 120rpx;
? ?height: 120rpx;
? ?text-align: center;
? ?line-height: 135rpx;
? ?color: white;
}

.bgCanvas{
? ? width:200rpx;
? ? height:200rpx;
? ? margin: 0 auto;
? ? position: absolute;
? ??
? ??
}
.stepText{
? /**font-weight: bold;*/
? font-size: 60rpx;
? color: white;
? margin-top: 50rpx;
}

const ctx = wx.createCanvasContext("bgCanvas")
Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? stepText: 5 ?//設(shè)置倒計(jì)時(shí)初始值
? },

? getCircle: function(num) {
? ? //開始創(chuàng)建一個(gè)路徑，需要調(diào)用fill或者stroke才會(huì)使用路徑進(jìn)行填充或描邊。
? ? //begin another path
? ? ctx.beginPath()
? ? //設(shè)置線條端點(diǎn)樣式 ?半圓 ?不然默認(rèn)是一條線
? ? ctx.setLineCap('round')
? ? ctx.setLineWidth(6)
? ? // 起始弧度 12點(diǎn)鐘 ? ? ?
? ? ctx.arc(50, 50, 31, 1.5 * Math.PI, num * Math.PI, true)
? ? ctx.setStrokeStyle('#00E5EE')

? ? //畫出淡藍(lán)色的內(nèi)圈?
? ? ctx.stroke()

? ? //告訴<canvas/>組件你要將剛剛的描述繪制上去
? ? ctx.draw()
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
? ? /**設(shè)置線條寬度
? ? ctx.setLineWidth(7)
? ? //畫一條弧線 圓的x坐標(biāo) y坐標(biāo) ?圓的半徑 ?起始弧度，單位弧度（在3點(diǎn)鐘方向） 終止弧度
? ? ctx.arc(50, 50, 35, 0, 2 * Math.PI, false)
? ? //設(shè)置線條樣式 ? 設(shè)置邊框顏色。
? ? ctx.setStrokeStyle("#F5F5F5")
? ? //畫出當(dāng)前路徑的邊框。 對(duì)當(dāng)前路徑進(jìn)行描邊 ?白色背景圓邊
? ? ctx.stroke()*/
? ? this.getCircle(-0.5);

? ??


? },

? reStartBtn: function(){
? ? this.getCircle(-0.5);
? ? this.setData({
? ? ? stepText:5
? ? })
? },

? //點(diǎn)擊開始倒計(jì)時(shí)按鈕
? clickStartBtn: function () {
? ? var that = this
? ??
? ? //定義倒計(jì)時(shí)
? ? var step = that.data.stepText; ?
? ?
? ? var ?timer;
? ? clearInterval(timer);

? ? //從12點(diǎn) ?開始繪制
? ? var num = -0.5;
? ? //每次繪制添加的角度 0.04 ? ?一個(gè)圓 是 2*Math.PI ? 5秒要跑50次?

? ? //2/50 就是每次要增加的角度
? ? var decNum = 2 / step / 10
? ? //可按照指定的周期(以毫秒計(jì))來調(diào)用函數(shù) ?每1毫秒畫一次
? ?//定時(shí)器
? ?timer= setInterval(function () {

? ? ? that.setData({
? ? ? ? stepText: parseInt(step)//去掉小數(shù)保留整數(shù)
? ? ? })
? ? ? //toFixed() 方法可把 Number 四舍五入為指定小數(shù)位數(shù)的數(shù)字。
? ? ? //每執(zhí)行一次 都減去100毫秒 0.1s ? 更新圓框中間的秒
? ? ? step = (step - 0.1).toFixed(1)
? ? ?
? ? ? // 概念就是 1.5 ---->1.5?
? ? ? num += decNum
? ? ? //重新繪制圓的終止節(jié)點(diǎn)
? ? ? //num.toFixed(2)可以四舍五入，保留兩位小數(shù)，但會(huì)轉(zhuǎn)換為String類型
? ? ? num = num.toFixed(2)
? ? ? num = parseFloat(num);

? ? ? if (num != 1.5) {
? ? ? ? that.getCircle(num);
? ? ? } else {
? ? ? ? ctx.draw()
? ? ? }
? ??

? ? ? if (step <= 0) {
? ? ? ? clearInterval(timer) ?//銷毀定時(shí)器

? ? ? }

? ? }, 100)
? ? //


? },
})

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: