微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下
大家好,今天我們來學(xué)習(xí)一下倒計(jì)時(shí)的實(shí)現(xiàn),好好看,好好學(xué),超詳細(xì)的。
直接上代碼吧
<view class="title-item">倒計(jì)時(shí)</view> <view class="countdown-item"> ? <view class="countdown-title"> ? ? <block> ? ? ? <text class='tui-conutdown-box'>{{days}}</text> ? ? ? <text class="countdown-text">天</text> ? ? ? <text class='tui-conutdown-box'>{{hours}}</text> ? ? ? <text class="countdown-text">時(shí)</text> ? ? ? <text class='tui-conutdown-box'>{{minutes}}</text> ? ? ? <text class="countdown-text">分</text> ? ? ? <text class='tui-conutdown-box'>{{seconds}}</text> ? ? ? <text class="countdown-text">秒</text> ? ? </block> ? </view> </view>
.countdown-item { ? width: 100%; ? height: 100rpx; ? border: 0rpx solid red; } .countdown-title { ? width: 100%; ? height: 50rpx; ? line-height: 50rpx; ? font-size: 40rpx; ? color: #fff; } .tui-conutdown-box { ? display: inline-block; ? line-height: 50rpx; ? text-align: center; ? background-color: red; ? color: #fff; ? margin: 0 4rpx; ? padding: 10rpx 20rpx; } .tui-countdown-bg { ? background-color: #DF0101; } .countdown-text{ ? color: #000; }
Page({ ?? ?data: { ?? ??? ?nowDate: '2021-12-22 18:00:00', //結(jié)束時(shí)間 ? ? ?? ?countdown: '', //倒計(jì)時(shí) ? ? ?? ?days: '00', //天 ? ? ?? ?hours: '00', //時(shí) ? ? ?? ?minutes: '00', //分 ? ? ?? ?seconds: '00', //秒 ?? ?}, ?? ? ?countTime() { ? ? let days,hours, minutes, seconds; ? ? let nowDate = this.data.nowDate; ? ? console.log(nowDate) ? ? let that = this; ? ? let now = new Date().getTime(); ? ? let end = new Date(nowDate).getTime(); //設(shè)置截止時(shí)間 ? ? // console.log("開始時(shí)間:" + now, "截止時(shí)間:" + end); ? ? let leftTime = end - now; //時(shí)間差 ? ? ? ? ? ? ? ? ? ? ? ?? ? ? if (leftTime >= 0) { ? ? ? days = Math.floor(leftTime / 1000 / 60 / 60 / 24); ? ? ? hours = Math.floor(leftTime / 1000 / 60 / 60 % 24); ? ? ? minutes = Math.floor(leftTime / 1000 / 60 % 60); ? ? ? seconds = Math.floor(leftTime / 1000 % 60); ? ? ? seconds = seconds < 10 ? "0" + seconds : seconds ? ? ? minutes = minutes < 10 ? "0" + minutes : minutes ? ? ? hours = hours < 10 ? "0" + hours : hours ? ? ? that.setData({ ? ? ? ? countdown: days+":"+hours + ":" + minutes + ":" + seconds, ? ? ? ? days, ? ? ? ? hours, ? ? ? ? minutes, ? ? ? ? seconds ? ? ? }) ? ? ? // console.log(that.data.countdown) ? ? ? //遞歸每秒調(diào)用countTime方法,顯示動(dòng)態(tài)時(shí)間效果 ? ? ? setTimeout(that.countTime, 1000); ? ? } else { ? ? ? that.setData({ ? ? ? ? countdown: '已截止' ? ? ? }) ? ? } ?}, ?onLoad: function (options) { ? ? this.countTime(); ?}, })
如圖所示:
結(jié)語
關(guān)于微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)就介紹到這里 ,歡迎大家多多指教,互相交流,一起學(xué)習(xí)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個(gè)對當(dāng)前文檔,當(dāng)前選擇或者給出范圍的命令。在HTML5中,execCommand可以通過JavaScript代碼來調(diào)用,使得開發(fā)者可以在網(wǎng)頁中實(shí)現(xiàn)一些復(fù)雜的文本操作。在HTML編輯器中這個(gè)命令用得很多,酷炫的強(qiáng)大功能。2023-07-07JavaScript中Number.isNaN 和 isNaN 的區(qū)別詳解
本文和大家分享一個(gè)前幾天寫代碼踩的坑,筆者在業(yè)務(wù)邏輯中需要對一個(gè)值進(jìn)行NaN的判斷,由于筆者的不嚴(yán)謹(jǐn),使用了isNaN,從而引起B(yǎng)ug,也正是因?yàn)檫@個(gè),筆者才知道了isNaN和Number.isNaN的區(qū)別,所以本文就和大家聊聊它們的區(qū)別2023-09-09IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]
長久以來JavaScript兼容性一直是Web開發(fā)者的一個(gè)主要問題。在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬2011-10-10kindeditor修復(fù)會(huì)替換script內(nèi)容的問題
這里給大家分享的是個(gè)人修改的kindeditor的代碼,主要是修復(fù)了一些BUG,添加了些常用功能,推薦給大家,有需要的小伙伴可以參考下。2015-04-04{}與function(){}選用空對象{}來存放keyValue
雖說js里面什么都能當(dāng)對象,也能用填鴨式方法任意給對象添加屬性,屬性賦值.但是有些js內(nèi)置的對象,類型屬性也是沒辦法覆蓋的2012-05-05