詳解小程序毫秒級倒計時(適用于拼團秒殺功能)
更新時間:2019年05月05日 09:36:52 作者:邱小健
這篇文章主要介紹了小程序毫秒級倒計時,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
廢話不多說直接上代碼:
效果圖:

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è)置截止時間
var end = endDate.getTime();
var leftTime = end - now; //時間差
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方法,顯示動態(tài)時間效果
setTimeout(that.countTime, 100);
} else {
console.log('已截止')
that.setData({
countdown:'00:00:00'
})
}
},
})
index.html
<view>
<text>{{countdown}}</text>
</view>
以上所述是小編給大家介紹的小程序毫秒級倒計時詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Firefox中autocomplete="off" 設(shè)置不起作用Bug的解決方法
在實現(xiàn)補全提示功能時(Suggest),都會給輸入框(Input)元素添加autocomplete屬性,且值設(shè)為off。2011-03-03
JavaScript中Infinity(無窮數(shù))的使用和注意事項
Infinity(無窮大)在 JS 中是一個特殊的數(shù)字,它的特性是它比任何有限的數(shù)字都大,如果不知道 Infinity,我們在一些運算操作遇到時,就會覺得很有意思,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Infinity(無窮數(shù))的使用和注意事項,需要的朋友可以參考下2022-04-04
JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-03-03
JS實現(xiàn)HTML頁面中動態(tài)顯示當前時間完整示例
這篇文章主要介紹了JS實現(xiàn)HTML頁面中動態(tài)顯示當前時間,結(jié)合完整實例形式分析了JavaScript使用時間函數(shù)setTimeout及clearTimeout動態(tài)顯示當前時間相關(guān)操作技巧,非常簡單實用,需要的朋友可以參考下2018-07-07
TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例
這篇文章主要為大家介紹了TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11

