微信小程序实现倒计时补零功能

2024-09-28 14:17:43

微信小程序中 "倒计时自动补零" 的一点代码，方法比较简单粗暴，想着以后怎么也能用到，就先总结出来了。

代码：

js：

//index.js
var num = 10//计时
var strH = ''
var strM = ''
var strS = ''
var timer = ''

Page({
 data: {
  timeText:''//展示
 },

 onLoad: function () {
  this.move()
  //计时开始 后面的1000是毫秒 每1000毫秒跳一次
  timer=setInterval(this.move,1000);
 },

 move(){
  //时
  strH = this.zeroFill(''+parseInt(num/3600%24),2)

  //分
  strM = this.zeroFill(''+parseInt(num/60%24),2)

  //秒
  strS = this.zeroFill(''+parseInt(num%60),2)

  //赋值给text内容
  this.setData({
   timeText:strH+':'+strM+':'+strS
  })

  //当时间归零停止计时器
  if (num == 0){
    clearInterval(timer)
    return
  }

  //每秒递减
  num--
 },
 zeroFill(str, n){
  //补零方法，str为数字字符串 n为需要的位数，不够补零
  if (str.length < n){
   str = '0'+str
  }
  return str
 }
})

wxml：

<text>{{timeText}}</text>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序项目实践之验证码倒计时功能

效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字首先js文件的data里面声明一个变量用于表示当前是否可以点击,codeIsCanClick = true, 默认是可以点击的写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin
微信小程序时间格式化（util.formatTime(new Date)）详解

微信小程序时间格式化微信小程序虽然还在内测,但是已经火的不行.赶紧看看.记录学习路上的点点滴滴. 获取时间直接用 Date.now() 得到一串数字.如下图: 获取格式化的时间用 util.formatTime(new Date) util是微信官方demo里面的提供的工具:如下代码 function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.
微信小程序使用picker实现时间和日期选择框功能【附源码下载】

本文实例讲述了微信小程序使用picker实现时间和日期选择框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange"> 当前城市选择:{{picker1Range[picker1Value]}} </pick
微信小程序实现验证码获取倒计时效果

本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获
微信小程序之发送短信倒计时功能

点击后代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo
微信小程序倒计时组件实现代码

功能: 适用于电商应用的限时团购.商品秒杀等先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second
微信小程序注册60s倒计时功能使用JS实现注册60s倒计时功能

微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手机:</text> <input type="
微信小程序显示倒计时功能示例【测试可用】

本文实例讲述了微信小程序显示倒计时功能.分享给大家供大家参考,具体如下: 微信小程序中显示倒计时: index.wxml: <view class='countdown'>剩:<text style='color:#6B4EFD'> {{countDownDay}} </text> 天 <text style='color:#6B4EFD'>{{countDownHour}} </text> <text style='color:#6B4E
微信小程序实现团购或秒杀批量倒计时

本文实例为大家分享了微信小程序实现批量倒计时的具体代码,供大家参考,具体内容如下效果图实现思路微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染! JS 模拟商品列表数据 goodsList: 在 onLoad 周期函数中对活动结束时间进行提取: 建立时间格式化函数 timeFormat: 建立倒计时函数 countDown: 在 onLoad 周期函数的提取结尾执行倒计时函数 countDown. 倒计时函数详解获取当前时间,同时得到活动结束时间数组: 循环活动结束时间数组
微信小程序日期时间选择器使用方法

本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下效果图实现原理利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}
微信小程序电商常用倒计时实现实例

微信小程序电商常用倒计时实现实例 wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second if (second == 0) { // console.log("Time Out..."); that.setData({ second: &q

微信小程序实现倒计时补零功能

相关推荐

随机推荐