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


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判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
js实现图片放大展示效果
Aug 30 Javascript
写一个Vue Popup组件
Feb 25 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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性能优化大全(php.ini)
2016/05/20 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
分享6个隐藏的python功能
2017/12/07 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Python eval函数介绍及用法
2020/11/09 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
庆七一活动方案
2014/01/25 职场文书
早读课迟到检讨书
2014/09/25 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
地心历险记观后感
2015/06/15 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书