詳解小程序毫秒級倒計時(適用于拼團(tuán)秒殺功能)
更新時間:2019年05月05日 09:36:52 作者:邱小健
這篇文章主要介紹了小程序毫秒級倒計時,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
廢話不多說直接上代碼:
效果圖:
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-03JavaScript中Infinity(無窮數(shù))的使用和注意事項
Infinity(無窮大)在 JS 中是一個特殊的數(shù)字,它的特性是它比任何有限的數(shù)字都大,如果不知道 Infinity,我們在一些運算操作遇到時,就會覺得很有意思,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Infinity(無窮數(shù))的使用和注意事項,需要的朋友可以參考下2022-04-04JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-03-03JS實現(xiàn)HTML頁面中動態(tài)顯示當(dāng)前時間完整示例
這篇文章主要介紹了JS實現(xiàn)HTML頁面中動態(tài)顯示當(dāng)前時間,結(jié)合完整實例形式分析了JavaScript使用時間函數(shù)setTimeout及clearTimeout動態(tài)顯示當(dāng)前時間相關(guān)操作技巧,非常簡單實用,需要的朋友可以參考下2018-07-07TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例
這篇文章主要為大家介紹了TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11