欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)

 更新時(shí)間:2022年05月22日 07:30:36   作者:掙扎的工程師  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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)畫

    微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫

    這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • js生成驗(yàn)證碼并直接在前端判斷

    js生成驗(yàn)證碼并直接在前端判斷

    眾所周知,js是客戶端的,那么把驗(yàn)證都做在客戶端有意義嗎?還是必須從服務(wù)器生成的驗(yàn)證碼安全???前端生成的驗(yàn)證碼安全嗎?x下面我們來看個(gè)例子
    2015-05-05
  • 詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表

    詳解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-07
  • JS實(shí)現(xiàn)多選框的操作

    JS實(shí)現(xiàn)多選框的操作

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)多選框的操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • axios攔截器、ElementUI組件的使用方法

    axios攔截器、ElementUI組件的使用方法

    大家都知道ElementUI是"餓了么"公司推出的基于Vue2.0的組件庫,這篇文章主要介紹了axios攔截器、ElementUI組件的使用方法,需要的朋友可以參考下
    2023-01-01
  • JavaScript中Number.isNaN 和 isNaN 的區(qū)別詳解

    JavaScript中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-09
  • IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]

    IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]

    長久以來JavaScript兼容性一直是Web開發(fā)者的一個(gè)主要問題。在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬
    2011-10-10
  • kindeditor修復(fù)會(huì)替換script內(nèi)容的問題

    kindeditor修復(fù)會(huì)替換script內(nèi)容的問題

    這里給大家分享的是個(gè)人修改的kindeditor的代碼,主要是修復(fù)了一些BUG,添加了些常用功能,推薦給大家,有需要的小伙伴可以參考下。
    2015-04-04
  • {}與function(){}選用空對象{}來存放keyValue

    {}與function(){}選用空對象{}來存放keyValue

    雖說js里面什么都能當(dāng)對象,也能用填鴨式方法任意給對象添加屬性,屬性賦值.但是有些js內(nèi)置的對象,類型屬性也是沒辦法覆蓋的
    2012-05-05
  • js轉(zhuǎn)html實(shí)體的方法

    js轉(zhuǎn)html實(shí)體的方法

    下面小編就為大家?guī)硪黄猨s轉(zhuǎn)html實(shí)體的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-09-09

最新評論