知識(shí)
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們?cè)谧非笃湟曈X(jué)表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營(yíng)銷(xiāo)的便利,運(yùn)營(yíng)的高效,讓網(wǎng)站成為營(yíng)銷(xiāo)工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持!
您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >
微信小程序之倒計(jì)時(shí)
發(fā)表時(shí)間:2021-3-31
發(fā)布人:葵宇科技
瀏覽次數(shù):78
@蝮蛇之殤 之前幫一個(gè)群?jiǎn)T解決倒計(jì)時(shí)的問(wèn)題,分享過(guò)來(lái)給大家看看
老規(guī)矩先說(shuō)思路
1、讓數(shù)字進(jìn)行倒計(jì)時(shí)
2、讓多個(gè)數(shù)字進(jìn)行倒計(jì)時(shí)
3、讓一個(gè)數(shù)組倒計(jì)時(shí)
4、優(yōu)化倒計(jì)時(shí)的方法
5、把數(shù)字換成HH:ss的格式
這里我就直接上解決的代碼
wxml代碼
<view>
<view wx:for="{{total_micro_second}}">
<view class='row'>
<view>{{total_micro_second[index].t}}</view>
<view data-index='{{index}}' bindtap='timeZT'>{{item.ztText}}</view>
<view data-index='{{index}}' bindtap='timeStop'>{{item.tzText}}</view>
</view>
</view>
</view>
js代碼
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
total_micro_second: []
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
var that = this
var time = this.data.total_micro_second
var total_micro_second = "00:29"; //表示60秒倒計(jì)時(shí),想要變長(zhǎng)就把60修改更大
var total_micro_second2 = "00:35";
var date = {}
date.t = total_micro_second
date.f = true
date.ztText = "暫停"
date.tzText = "停止"
time.push(date)
var date2 = {}
date2.t = total_micro_second2
date2.f = true
date2.ztText = "暫停"
date2.tzText = "停止"
time.push(date2)
console.log("入前", time)
//這里是組裝數(shù)據(jù),也可以直接在data里面寫(xiě)死,實(shí)際情況是根據(jù)查詢(xún)的結(jié)果進(jìn)行生成
this.setData({
total_micro_second: time
})
setTimeout(function () {
for (var i in time) {
count_down(that, i);
}
}, 1000)
},
//時(shí)間暫停
timeZT: function (e) {
var index = e.currentTarget.dataset.index
var times = this.data.total_micro_second
console.log("暫停", index)
console.log("暫停的數(shù)據(jù)", times[index])
console.log(times[index].t)
if (times[index].t != "00:00") {
if (times[index].f) {
times[index].f = false
times[index].ztText = "繼續(xù)"
} else {
times[index].f = true
times[index].ztText = "暫停"
}
this.setData({
total_micro_second: times
})
}
},
timeStop: function (e) {
var index = e.currentTarget.dataset.index
var times = this.data.total_micro_second
console.log("停止", index)
console.log("停止的數(shù)據(jù)", times[index])
if (times[index].f) {
times[index].f = false
times[index].tzText = "已停止"
times[index].t = "00:00"
}
// else {
// times[index].f = true
// times[index].t = "00:20"
// times[index].tzText = "停止"
// }
this.setData({
total_micro_second: times
})
}
})
function count_down(that, i) {
var times = that.data.total_micro_second
console.log(i, times)
if (times[i].f) { //為true
var tim = times[i].t.split(":");
var second = parseInt(tim[0]) * 60 //分鐘
second += parseInt(tim[1]) //秒
//console.log("總時(shí)間", second)
if (second <= 0) { //可能存在2秒內(nèi)的誤差
times[i].t = "00:00"
times[i].f = false
that.setData({
total_micro_second: times
});
i = "S"
return;
}
second -= 1
var min = parseInt(second / 60)
var sec = second - parseInt(second / 60) * 60
times[i].t = fill_zero_prefix(min) + ":" + fill_zero_prefix(sec)
that.setData({
total_micro_second: times
});
}
// // 放在最后--
if (i != "S") {
setTimeout(function () {
count_down(that, i);
}, 1000)
}
}
// 位數(shù)不足補(bǔ)零
function fill_zero_prefix(num) {
return num < 10 ? "0" + num : num
}
app.wxss樣式(我所有項(xiàng)目都會(huì)有這個(gè))
/**
* 下劃線(xiàn)
*/
//紅色下劃線(xiàn)
.U_red {
padding-bottom: 2rpx;app.wxss樣式(我所有項(xiàng)目都會(huì)有這個(gè))
border-bottom: 1px solid red;
}
//黑色下劃線(xiàn)
.U_black {
padding-bottom: 2rpx;
border-bottom: 1px solid black;
}
//黑色上劃線(xiàn)
.U_black_top {
padding-bottom: 2rpx;
border-top: 1px solid black;
}
//白色下劃線(xiàn)
.U_white {
padding-bottom: 2rpx;
border-bottom: 1px solid white;
}
/**
* Test class
*/
//黑色邊框
.border_black {
border: 1rpx solid black;
}
//紅色邊框
.border_red {
border: 1rpx solid red;
}
//白色圓角
.border_white {
border: 1rpx solid white;
border-radius: 30rpx;
}
//布局
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
//布局
.row_c {
display: flex;
flex-direction: row;
justify-content: center;
}
//布局
.row_content {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
//布局
.column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
//黑色
.bk {
color: black;
}
//字體加粗
.b_font {
font-weight: 600;
}
tip:
1、如有遇到新問(wèn)題,可以在下方留言或者加QQ群437729329 進(jìn)行咨詢(xún)
2、如果有優(yōu)化的童鞋可以在下方留言
3、如果有封裝好的,也可以在下方留言
本文作者:小程序社區(qū)博主ETL
原文地址:微信小程序之倒計(jì)時(shí)-微信小程序聯(lián)盟/博主專(zhuān)區(qū)-微信小程序開(kāi)發(fā)社區(qū)-微信小程序聯(lián)盟
相關(guān)案例查看更多
相關(guān)閱讀
- python開(kāi)發(fā)小程序
- web學(xué)習(xí)路線(xiàn)
- 手機(jī)網(wǎng)站建設(shè)
- 云南網(wǎng)站建設(shè)列表網(wǎng)
- 汽車(chē)回收管理系統(tǒng)
- 云南省建設(shè)廳官方網(wǎng)站
- 云南網(wǎng)站設(shè)計(jì)
- 昆明小程序代建
- 網(wǎng)站建設(shè)招商
- 昆明網(wǎng)站建設(shè)公司
- 云南網(wǎng)站建設(shè)首選
- 報(bào)廢車(chē)拆解回收管理系統(tǒng)
- 云南衛(wèi)視小程序
- 海報(bào)插件
- 紅河小程序開(kāi)發(fā)
- 商標(biāo)注冊(cè)
- 云南花農(nóng)小程序
- 網(wǎng)絡(luò)公司報(bào)價(jià)
- 小程序開(kāi)發(fā)公司
- 河南小程序制作
- 云南網(wǎng)站建設(shè)費(fèi)用
- 云南小程序開(kāi)發(fā)哪家好
- 云南小程序哪家好
- 小程序表單
- 排名
- 云南網(wǎng)站建設(shè)哪家公司好
- 百度排名
- 小程序開(kāi)發(fā)聯(lián)系方式
- 云南網(wǎng)站建設(shè) 網(wǎng)絡(luò)服務(wù)
- 云南網(wǎng)站建設(shè)方法