微信小程序?qū)崿F(xiàn)答題倒計(jì)時(shí)
想做一個(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; }
js
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) ? ? // ? }, })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
- 微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
- 微信小程序倒計(jì)時(shí)功能實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)團(tuán)購或秒殺批量倒計(jì)時(shí)
- 微信小程序顯示倒計(jì)時(shí)功能示例【測(cè)試可用】
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼
- 詳解微信小程序用定時(shí)器實(shí)現(xiàn)倒計(jì)時(shí)效果
- 微信小程序中顯示倒計(jì)時(shí)代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)功能
相關(guān)文章
微信小程序官方動(dòng)態(tài)自定義底部tabBar的例子
這篇文章主要介紹了微信小程序官方動(dòng)態(tài)自定義底部tabBar的例子,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09JavaScript中reduce方法的用法及使用場(chǎng)景
reduce()方法對(duì)數(shù)組中的每個(gè)元素按序執(zhí)行一個(gè)提供的reducer函數(shù),每一次運(yùn)行 reducer會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個(gè)返回值,今天我們就介紹一下reduce的幾種簡(jiǎn)單使用場(chǎng)景,需要的朋友可以參考下2023-08-08JavaScript+html實(shí)現(xiàn)前端頁面隨機(jī)二維碼驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實(shí)現(xiàn)前端頁面隨機(jī)二維碼驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06uniapp?手機(jī)驗(yàn)證碼輸入框?qū)崿F(xiàn)代碼(隨機(jī)數(shù)、倒計(jì)時(shí)、隱藏手機(jī)號(hào)碼中間四位)可以直接使用
這篇文章主要介紹了uniapp?手機(jī)驗(yàn)證碼輸入框(隨機(jī)數(shù)、倒計(jì)時(shí)、隱藏手機(jī)號(hào)碼中間四位),實(shí)現(xiàn)思路通過創(chuàng)建六個(gè)正方形的view,然后創(chuàng)建一個(gè)數(shù)字input,最大輸入長(zhǎng)度為六位(根據(jù)驗(yàn)證碼的長(zhǎng)度),再將input隱藏掉,獲取到的值分別放到六個(gè)view中,需要的朋友可以參考下2023-02-02基于JS實(shí)現(xiàn)導(dǎo)航條flash導(dǎo)航條
flash導(dǎo)航條在網(wǎng)站建設(shè)中應(yīng)用比較廣泛,此種效果給瀏覽者帶來極好的視覺效果,非常棒,下面小編給大家介紹基于JS實(shí)現(xiàn)導(dǎo)航條flash導(dǎo)航條,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-06-06