詳解小程序毫秒級(jí)倒計(jì)時(shí)(適用于拼團(tuán)秒殺功能)
廢話不多說直接上代碼:
效果圖:

index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
countdown:''
, endDate2: '2018-08-08 11:41:00'
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var that = this;
that.countTime()
},
countTime() {
var that = this;
var date = new Date();
var now = date.getTime();
var endDate = new Date(that.data.endDate2);//設(shè)置截止時(shí)間
var end = endDate.getTime();
var leftTime = end - now; //時(shí)間差
var d, h, m, s, ms;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
ms = Math.floor(leftTime % 1000);
ms = ms < 100 ? "0" + ms : ms
s = s < 10 ? "0" + s : s
m = m < 10 ? "0" + m : m
h = h < 10 ? "0" + h : h
that.setData({
countdown: d + ":" + h + ":" + m + ":" + s + ":" + ms,
})
//遞歸每秒調(diào)用countTime方法,顯示動(dòng)態(tài)時(shí)間效果
setTimeout(that.countTime, 100);
} else {
console.log('已截止')
that.setData({
countdown:'00:00:00'
})
}
},
})
index.html
<view>
<text>{{countdown}}</text>
</view>
以上所述是小編給大家介紹的小程序毫秒級(jí)倒計(jì)時(shí)詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
- js倒計(jì)時(shí)小程序
- 微信小程序倒計(jì)時(shí)功能實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)團(tuán)購或秒殺批量倒計(jì)時(shí)
- 微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼
- 微信小程序之發(fā)送短信倒計(jì)時(shí)功能
- 微信小程序注冊(cè)60s倒計(jì)時(shí)功能 使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
- 微信小程序電商常用倒計(jì)時(shí)實(shí)現(xiàn)實(shí)例
相關(guān)文章
JavaScript設(shè)計(jì)模式之調(diào)停者模式實(shí)例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之調(diào)停者模式,詳細(xì)分析了調(diào)停者模式的概念、原理、優(yōu)缺點(diǎn)并結(jié)合javascript實(shí)例形式給出了相關(guān)使用技巧,需要的朋友可以參考下2018-02-02
JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法
這篇文章主要介紹了JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法,實(shí)例分析了javascript操作頁面滾動(dòng)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript中的執(zhí)行環(huán)境和作用域鏈
這篇文章主要介紹了JavaScript中的執(zhí)行環(huán)境和作用域鏈,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09
微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法,簡(jiǎn)單講述了image組件的常用屬性,并結(jié)合實(shí)例形式分析了微信小程序?qū)崿F(xiàn)圖片自適應(yīng)寬度比例的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
JavaScript事件機(jī)制的剖析與優(yōu)化詳解
在現(xiàn)代前端開發(fā)中,JavaScript事件處理是一個(gè)至關(guān)重要的部分,它能夠使網(wǎng)頁與用戶交互,實(shí)現(xiàn)豐富的交互體驗(yàn),然而,對(duì)JavaScript事件機(jī)制的深入理解是開發(fā)者成為優(yōu)秀前端工程師的關(guān)鍵所在,本文將全面剖析JavaScript事件機(jī)制,需要的朋友可以參考下2023-12-12
JavaScript實(shí)現(xiàn)Java中Map容器的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Java中Map容器的方法,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)Java中Map容器的原理與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-10-10

