詳解小程序毫秒級倒計時（適用于拼團秒殺功能）
更新時間：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);//設置截止時間
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,
})
//遞歸每秒調用countTime方法，顯示動態(tài)時間效果
setTimeout(that.countTime, 100);
} else {
console.log('已截止')
that.setData({
countdown:'00:00:00'
})
}
},
})
index.html
<view>
<text>{{countdown}}</text>
</view>
以上所述是小編給大家介紹的小程序毫秒級倒計時詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了JavaScript設計模式之調停者模式,詳細分析了調停者模式的概念、原理、優(yōu)缺點并結合javascript實例形式給出了相關使用技巧,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了JavaScript控制網頁平滑滾動到指定元素位置的方法,實例分析了javascript操作頁面滾動的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
flash上傳頭像多不勝舉了，可JS仿flash的見的不多，也是工作需要，就試著寫寫看！不料，設想還真的可行2011-07-07
JavaScript中的執(zhí)行環(huán)境和作用域鏈
這篇文章主要介紹了JavaScript中的執(zhí)行環(huán)境和作用域鏈，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-09-09
微信小程序實現(xiàn)image組件圖片自適應寬度比例顯示的方法
這篇文章主要介紹了微信小程序實現(xiàn)image組件圖片自適應寬度比例顯示的方法,簡單講述了image組件的常用屬性,并結合實例形式分析了微信小程序實現(xiàn)圖片自適應寬度比例的相關操作技巧,需要的朋友可以參考下2018-01-01
在現(xiàn)代前端開發(fā)中,JavaScript事件處理是一個至關重要的部分,它能夠使網頁與用戶交互,實現(xiàn)豐富的交互體驗,然而,對JavaScript事件機制的深入理解是開發(fā)者成為優(yōu)秀前端工程師的關鍵所在,本文將全面剖析JavaScript事件機制,需要的朋友可以參考下2023-12-12
2008-01-01
?樹形圖可視化廣泛用于分層數(shù)據(jù)分析。如果你沒有經驗還想創(chuàng)建一個，那將會有些復雜。下面是一個詳細教程，教你如何使用JavaScript創(chuàng)建交互式樹形圖2022-06-06
JavaScript實現(xiàn)Java中Map容器的方法
這篇文章主要介紹了JavaScript實現(xiàn)Java中Map容器的方法,結合實例形式分析了JavaScript實現(xiàn)Java中Map容器的原理與相關實現(xiàn)技巧,需要的朋友可以參考下2016-10-10
css文件可以用js 動態(tài)修改，在做一些交互動作時，非常實用，下面是具體示例，大家可以看看2014-08-08