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


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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
js日期相关函数总结分享
Oct 15 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
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
PHP date函数参数详解
2006/11/27 PHP
15种PHP Encoder的比较
2007/04/17 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python统计单词出现的次数
2018/04/04 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
Form表单及django的form表单的补充
2019/07/25 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
Java面向对象面试题
2016/12/26 面试题
爱岗敬业演讲稿范文
2014/01/14 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
2014年工程工作总结
2014/11/25 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
windows系统安装配置nginx环境
2022/06/28 Servers