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

 更新时间:2018年07月09日 14:21:31   作者:司小文  
这篇文章主要为大家详细介绍了微信小程序实现倒计时补零功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

代码:

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>

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

相关文章

  • javascript实现数字时钟效果

    javascript实现数字时钟效果

    这篇文章主要为大家详细介绍了javascript实现数字时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • JS实现标签页效果(配合css)

    JS实现标签页效果(配合css)

    实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变,这样的效果是CSS和JS配合实现的,下面我们就来看看具体代码
    2013-04-04
  • JS实现双击内容变为可编辑状态

    JS实现双击内容变为可编辑状态

    在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等。怎么实现的呢?今天小编给大家分享JS实现双击内容变为可编辑状态,需要的的朋友参考下
    2017-03-03
  • 微信小程序实现登录注册功能

    微信小程序实现登录注册功能

    这篇文章主要介绍了微信小程序实现登录注册功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 20行js代码实现的贪吃蛇小游戏

    20行js代码实现的贪吃蛇小游戏

    曾经诺基亚的贪吃蛇风靡一时,在游戏匮乏的年代,用Java实现太难,现在网页制作20行代码就做成一个简单的demo了,下面这篇文章主要给大家介绍了利用20行js代码实现的贪吃蛇小游戏,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-06-06
  • 怎样用JavaScript实现原型模式

    怎样用JavaScript实现原型模式

    这篇文章主要介绍了怎样用JavaScript实现原型模式,想学习设计模式的同学,可以参考下
    2021-04-04
  • JS实现div居中示例

    JS实现div居中示例

    div居中的方法有很多,网上可以找得到,但是本文要介绍的是使用JS实现的,比较另类,大家不妨参考下
    2014-04-04
  • 基于JavaScript实现每日签到打卡轨迹功能

    基于JavaScript实现每日签到打卡轨迹功能

    这篇文章主要为大家详细介绍了基于JavaScript实现每日签到打卡轨迹功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript中深拷贝与浅拷贝详解

    JavaScript中深拷贝与浅拷贝详解

    大家好,本篇文章主要讲的是JavaScript中深拷贝与浅拷贝详解,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下
    2022-02-02
  • ES6中Array.find()和findIndex()函数的用法详解

    ES6中Array.find()和findIndex()函数的用法详解

    ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
    2017-09-09

最新评论