微信小程序實現(xiàn)倒計時
本文實例為大家分享了微信小程序實現(xiàn)倒計時的具體代碼,供大家參考,具體內容如下
大家好,今天我們來學習一下倒計時的實現(xiàn),好好看,好好學,超詳細的。
直接上代碼吧
<view class="title-item">倒計時</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">時</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', //結束時間 ? ? ?? ?countdown: '', //倒計時 ? ? ?? ?days: '00', //天 ? ? ?? ?hours: '00', //時 ? ? ?? ?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(); //設置截止時間 ? ? // console.log("開始時間:" + now, "截止時間:" + end); ? ? let leftTime = end - now; //時間差 ? ? ? ? ? ? ? ? ? ? ? ?? ? ? 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) ? ? ? //遞歸每秒調用countTime方法,顯示動態(tài)時間效果 ? ? ? setTimeout(that.countTime, 1000); ? ? } else { ? ? ? that.setData({ ? ? ? ? countdown: '已截止' ? ? ? }) ? ? } ?}, ?onLoad: function (options) { ? ? this.countTime(); ?}, })
如圖所示:
結語
關于微信小程序實現(xiàn)倒計時就介紹到這里 ,歡迎大家多多指教,互相交流,一起學習
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
微信小程序scroll-view組件實現(xiàn)滾動動畫
這篇文章主要為大家詳細介紹了微信小程序scroll-view組件實現(xiàn)滾動動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-01-01詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個對當前文檔,當前選擇或者給出范圍的命令。在HTML5中,execCommand可以通過JavaScript代碼來調用,使得開發(fā)者可以在網(wǎng)頁中實現(xiàn)一些復雜的文本操作。在HTML編輯器中這個命令用得很多,酷炫的強大功能。2023-07-07JavaScript中Number.isNaN 和 isNaN 的區(qū)別詳解
本文和大家分享一個前幾天寫代碼踩的坑,筆者在業(yè)務邏輯中需要對一個值進行NaN的判斷,由于筆者的不嚴謹,使用了isNaN,從而引起B(yǎng)ug,也正是因為這個,筆者才知道了isNaN和Number.isNaN的區(qū)別,所以本文就和大家聊聊它們的區(qū)別2023-09-09IE和Firefox的Javascript兼容性總結[推薦收藏]
長久以來JavaScript兼容性一直是Web開發(fā)者的一個主要問題。在正式規(guī)范、事實標準以及各種實現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬2011-10-10{}與function(){}選用空對象{}來存放keyValue
雖說js里面什么都能當對象,也能用填鴨式方法任意給對象添加屬性,屬性賦值.但是有些js內置的對象,類型屬性也是沒辦法覆蓋的2012-05-05