当前位置: 首页 > 编程笔记 >

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

富建章
2023-03-14
本文向大家介绍微信小程序实现倒计时补零功能,包括了微信小程序实现倒计时补零功能的使用技巧和注意事项,需要的朋友参考一下

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

代码:

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序 倒计时组件实现代码,包括了微信小程序 倒计时组件实现代码的使用技巧和注意事项,需要的朋友参考一下 功能: 适用于电商应用的限时团购、商品秒杀等 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码。 wxml文件放个text <text>second: {{second}

  • 本文向大家介绍小程序实现列表倒计时功能,包括了小程序实现列表倒计时功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了小程序实现列表倒计时的具体代码,供大家参考,具体内容如下 效果 HTML代码 CSS代码 JS代码(得到后台数据查询用FIND方法插入字段,直接遍历会有问题) 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍详解微信小程序用定时器实现倒计时效果,包括了详解微信小程序用定时器实现倒计时效果的使用技巧和注意事项,需要的朋友参考一下 平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用。 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑。 如果实现简单的60s倒计时效果,我们可直接使用setIn

  • 本文向大家介绍微信小程序实现团购或秒杀批量倒计时,包括了微信小程序实现团购或秒杀批量倒计时的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现批量倒计时的具体代码,供大家参考,具体内容如下 效果图 实现思路 微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染! JS 模拟商品列表数据 goodsList; 在 onLoad 周期函数中对活动结束时间进行提取; 建

  • 本文向大家介绍微信小程序实现拖拽功能,包括了微信小程序实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 总结 以上所述是小编给大家介绍的微信小程序实现拖拽功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • 本文向大家介绍微信小程序实现签字功能,包括了微信小程序实现签字功能的使用技巧和注意事项,需要的朋友参考一下 效果展示   准备工作 1.canvas的使用 主要用到了 bindtouchstart , bindtouchmove 两个属性,捕捉手指移动的同时,将移动前的坐标和移动后的坐标用canvas的画图api绘制出来 2.wx.createCanvasContext 这个api用于创建并获取指