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


Posted in Javascript onJuly 09, 2018

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

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

代码:

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  Error 对象 错误处理
May 18 Javascript
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
纯js实现倒计时功能
Jan 06 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
Angular6中使用Swiper的方法示例
Jul 09 #Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 #Javascript
微信小程序实现漂亮的弹窗效果
May 26 #Javascript
Angular通过指令动态添加组件问题
Jul 09 #Javascript
js实现左右两侧浮动广告
Jul 09 #Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 #Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 #Javascript
You might like
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
django 信号调度机制详解
2019/07/19 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python3.4中清屏的处理方法
2020/07/06 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
幼师专业毕业生自荐信
2013/09/29 职场文书
关爱残疾人标语
2014/06/25 职场文书
护理目标管理责任书
2014/07/25 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers