微信小程式-倒計時
60秒倒計時
效果:
佈局:
<button bindtap='countdown'>60秒倒計時</button>
<text>{{second}}</text>
js程式碼:
// pages/info-four/info-four.js Page({ /** * 頁面的初始資料 */ data: { second: 60 }, // 小程式實現簡單的倒計時效果 // 基本實現功能:1,從60到0的倒計時效果2,倒計時完畢後會有提示 countdown: function () { var that = this var second = this.data.second if (second == 0) { that.setData({ second: 60 }) return } var time = setTimeout(function () { that.setData({ second: second - 1 }) that.countdown(that) }, 1000) }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { }, /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命週期函式--監聽頁面顯示 */ onShow: function () { }, /** * 生命週期函式--監聽頁面隱藏 */ onHide: function () { }, /** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { }, /** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { }, /** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })
電商秒殺倒計時效果
效果:
佈局
<text>pages/info-three/info-three.wxml</text>
<button bindtap='countdown'>電商秒殺倒計時效果</button>
<text >秒殺: {{clock}}</text>
<text>{{micro_second}}</text>
js程式碼
// pages/info-three/info-three.js var total_micro_second = 10 * 1000;//這是10秒倒計時 Page({ /** * 頁面的初始資料 */ data: { clock: '' }, /* 毫秒級秒殺倒計時 */ countdown: function () { var that = this // 定義一個總毫秒數,以一天為例 // var total_micro_second = 3600 * 1000*24;//這是一天倒計時 console.log('countdown=') // 渲染倒計時時鐘 var clock = this.dateformat(total_micro_second)//格式化時間 console.log('clock=' + clock) that.setData({ clock: clock }); if (total_micro_second <= 0) { that.setData({ clock: "秒殺結束" }); // timeout則跳出遞迴 return } // settimeout實現倒計時效果 setTimeout(function () { // 放在最後-- total_micro_second -= 10 that.countdown() }, 10)//注意毫秒的步長受限於系統的時間頻率,於是我們精確到0.01s即10ms }, // 時間格式化輸出,如1天天23時時12分分12秒秒12 。每10ms都會呼叫一次 dateformat: function (micro_second) { // 總秒數 var second = Math.floor(micro_second / 1000); // 天數 var day = Math.floor(second / 3600 / 24); // 總小時 var hr = Math.floor(second / 3600); // 小時位 var hr2 = hr % 24; // 分鐘位 var min = Math.floor((second - hr * 3600) / 60); // 秒位 var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60; // 毫秒位,保留2位 var micro_sec = Math.floor((micro_second % 1000) / 10); return day + "天" + hr2 + "時" + min + "分" + sec + "秒" + micro_sec; }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { }, /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命週期函式--監聽頁面顯示 */ onShow: function () { }, /** * 生命週期函式--監聽頁面隱藏 */ onHide: function () { }, /** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { }, /** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { }, /** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })
。。。
相關推薦
微信小程式倒計時重置爬坑
const constants = require('../../constants.js'); const request = require('../../utils/request.js'); var countdown = 0; var countTimeout =
微信小程式倒計時功能
倒計時功能是一個比較常見的功能,比如使用者獲取驗證碼就需要用到。這裡記錄一下在微信小程式裡面倒計時功能的簡單實現 直接看看程式碼吧 //倒計時60秒 function countDown(t
微信小程式-倒計時
60秒倒計時效果:佈局:<button bindtap='countdown'>60秒倒計時</button> <text>{{second}}</text>js程式碼:// pages/info-four/info-four.
微信小程式 倒計時
專案需要做倒計時. 黃大哥的輪子.拿來用用.表示很順手. 程式碼: 1.index.wxml <text style="display: block;text-align: center;font-size: 30px;color: #f60;
超精簡的微信小程式倒計時功能
方法:將時間轉化成秒為單位的正數進行運算,最終得出結果。js程式碼 onLoad: function () { var nowdate = Date.parse(new Date())/1000; /獲取系統當前時間 var setdate = 152873
微信小程式實現倒計時計時器
微信小程式驗證碼倒計時*秒 var timer = setInterval(function () { lastTime--; that.setData({ codeText:
JS 倒計時(微信小程式)
下面的例子是微信小程式的寫法和web端的都是差不多的,只是顯示在頁面的寫法不一樣: var timer = null; /** * 倒計時 * @param time 服務端傳來的時間戳 */ function countdown(time) {
微信小程式實現驗證碼倒計時效果
效果圖 wxml <input class='input-pwd' placeholder="新密碼" placeholder-style='color: #000' password focus bindconfirm='getPwd'/> <input class='i
微信小程式設定倒計時效果
效果 微信小程式設定倒計時步驟 1.設定一個定時器,然後將時間設為一秒 2.在這個函式裡將當前時間距終止的時間,的時間戳的差值減一 3.計算剩餘的時間,還剩的時分秒等 4.將計算的時間儲存到data中 坑 一定要計算後的結果,一定要儲存,不然倒計時沒有效果
微信小程式 多倒計時砍殺
<!--pages/input/input.wxml--> <view class="list" wx:for="{{list}}"wx:key="index"> <view class='m-list' style='margon-top:20px'>
微信小程式60秒倒計時
微信小程式傳送簡訊驗證碼後60秒倒計時功能,效果圖: 完整程式碼 index.wxml <!--index.wxml--> <view class="container"> <view class="section"> &l
微信小程式之商城倒計時
index.html === > <view class="countDownTimeView pull-left countDownAllView text-left"> <text>倒計時:</text>
微信小程式商城拼團商品、搶購商品倒計時
//單個倒計時,適用用於單個商品的倒計時 function countdown(that) { var EndTime = that.data.end_time || [];//倒計時的結束時間
微信小程式開發(3)--倒計時60獲取驗證碼
1,工具類(引用微信小程式提供的工具類)countdown.js class Countdown {constructor(options = {}) {Object.assign(this, {options, })this.__init()}/*** 初始化*/_
微信小程式----簡訊驗證碼倒計時外掛
效果圖 JS // 倒計時外掛 class CountTime { constructor(page) { this.page = page; this.time =
微信小程式時間格式倒計時
Page({ // 倒計時 count_down: function (countDown_time){ var that = this; var time = countDow
微信小程式---完整的驗證碼獲取倒計時效果 ---根據手機號是否符合要求進行判斷
提示:按鈕的設定不要要view標籤代替 因為view沒有禁用屬性圖示:(為了錄屏把計時器調快了 自己吧計時器設成一秒就行)wxml程式碼:<view class='shouji_info'><view class='info_list'><i
微信小程式+WEB使用JS實現註冊【60s】倒計時功能
微信小程式+WEB使用JS實現註冊【60s】倒計時功能開發步驟: 1、效果圖: 2、頁面僅僅利用了JS的相關功能,包含:wxml、js、wxss 2.1wxml頁面程式碼: <text
微信小程式--日期格式化和實現倒計時
首先看看日期怎麼格式化第一種:Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+":
微信小程式中使用圓形倒計時例項
需求概要 小程式中使用圓形倒計時,效果圖: 思路 使用2個canvas 一個是背景圓環,一個是彩色圓環。 解決方案 第一步先寫結構 一個盒子包裹2個canvas以及文字盒子; 盒子使用相對定位作為父級,flex佈局,設定居中; 一個canvas,使用絕對定位作為