【微信小程式】【可重用代碼】基於資料庫時間實現商品倒計時

来源:https://www.cnblogs.com/lishilin-glut/archive/2022/07/22/16506653.html
-Advertisement-
Play Games

最近做拍賣小程式,裡面有一個需求是監控拍賣時間,需要對時間進行動態的倒計時顯示 從構思開始,做這個倒計時也花了我4個小時多,也遇到了很多問題,現在我把完整的功能給實現了,可以拿來套用,只需要傳入你自己資料庫的時間即可。 1、第一個函數 //傳入資料庫結束時間參數並計算倒計時 countdown(en ...


最近做拍賣小程式,裡面有一個需求是監控拍賣時間,需要對時間進行動態的倒計時顯示

從構思開始,做這個倒計時也花了我4個小時多,也遇到了很多問題,現在我把完整的功能給實現了,可以拿來套用,只需要傳入你自己資料庫的時間即可。

1、第一個函數

  //傳入資料庫結束時間參數並計算倒計時
  countdown(endTime){//取出競拍結束時間,精確到秒,如果資料庫設置的是精確到毫秒,這裡需要再除以1000
        let auctionEndtime = res.data.end_time
        console.log(res)
        //獲取當前系統時間,預設精確到毫秒,這裡要用秒,所以除以1000
        var nowTime = new Date().getTime() / 1000
        //剩餘時間總的秒數
        var totalSecond = Math.floor(auctionEndtime - nowTime)
        console.log('剩餘秒數',totalSecond)
        //計算倒計時
        this.doCountdown(totalSecond)
  }

2、第二個函數

 //計算商品倒計時
  doCountdown(totalSecond){
    let _this = this
    //每隔一秒執行一次代碼,將計數器賦值給頁面變數myTime
    myTime =  setInterval(function () {
        //如果競拍已經結束
        if(totalSecond < 0){
          _this.setData({
            clock: ''
          })
          clearInterval(myTime)
          return 
        }else{
          //執行計算
          var time = _this.formatTime(totalSecond)
          _this.setData({
            clock: time
          })
        }
        totalSecond --;
    },1000)
  },

註意,需要在page()上面定義頁面全局變數myTime,以便對計數器進行清除

 

 3、第三個函數

  //倒計時時間格式化
  formatTime(totalSecond){
    //剩餘天數
    var day = Math.floor(totalSecond / 3600 / 24)
    //n天後剩餘小時數
    var hour = Math.floor(totalSecond /3600 % 24)
    //n天n小時後剩餘分鐘數
    var min = Math.floor(totalSecond / 60 % 60)
    //n天n小時n分鐘後剩餘秒數
    var sec = Math.floor(totalSecond % 60)
    return day + "天" + hour + "小時" + min + "分" + sec + "秒"
  }

4、計數器的清除

每次離開頁面需要清除計數器

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 相信之前使用過Win版系統的朋友們對這款VMware Fusion Pro for Mac應該都不會陌生,這款軟體以其強大的功能和適配能力廣受用戶的好評,在Mac端也同樣是一款最受用戶歡迎之一的虛擬機軟體,VM虛擬機mac版可以讓您能夠輕鬆的在Apple的macOS和Mac的硬體上無縫運行Windo ...
  • 1、cannot verify <mydomainname> certificate, issued by ‘/C=US/O=Let’s Encrypt/CN=R3’: 解決1:wget --no-check-certificate <website> //再運行一遍 解決2:sudo yum in ...
  • 七、分詞器 7.1、分詞器介紹 瞭解分詞器的概念 分詞器(Analyzer)是將一段文本,按照一定邏輯,拆分成多個詞語的一種工具,如下所示 華為手機 > 華為、手、手機 ElasticSearch 內置分詞器有以下幾種 Standard Analyzer 預設分詞器,按詞/字切分,小寫處理 (英文) ...
  • 大家好!我是黃啊碼,上節課留的作業大家都做了嗎?沒做的話回去做完再來聽課。 好了,先來解答上節課留下的問題: 我們在資料庫表中新增一列user_height表示身高,然後拿到所有數據: 我們如果單單用user_age來分組看看結果如何: 你:這也太簡單了吧,我來: select * from use ...
  • 大家好!我是黃啊碼,今天沒繼續select * 了吧,如果還繼續,那接下來的課程先別學,回去好好把之前的課程重覆複習一遍,學明白了我們再會?廢話不多說,學今天的課程之前我們先來說說這幾個詞是怎麼個執行順序: LIMIT、DISTINCT、 FROM 、 WHERE、GROUP BY、 HAVING ...
  • 分享嘉賓:翟佳 StreamNative 聯合創始人 編輯整理:張曉偉 美團點評 出品平臺:DataFunTalk **導讀:**多數讀者們瞭解BookKeeper是通過Pulsar,實際上BookKeeper在資料庫和存儲場景都有著非常廣泛的應用。BookKeeper是Pulsar的底層存儲,Pu ...
  • 在相同流量消耗的情況下,540p可秒變1080p?這不是魔法,通過視頻超解析度技術(簡稱視頻超分),就能讓視頻變得更清晰。 7月20日,在小紅書最新版本7.48的App中,用戶就能體驗到這項技術帶來的優質視頻體驗。小紅書和華為HMS Core合作,在移動端上線了基於HUAWEI HiAI Found ...
  • 【導讀】 隨著人工智慧不斷發展,機器學習技術也開始被廣泛地應用到教育、金融、零售、交通、醫療等各個領域,給我們的生活帶來巨大的便利。本期Discovery直播以《與虎墩一起,玩轉AI新“聲”態》為主題,邀請了HMS Core 機器學習服務產品經理、機器翻譯高級專家以及我們的好朋友“虎墩”,展示機器學 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...