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


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 constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
原生js 秒表实现代码
Jul 24 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
js调用刷新界面的几种方式
May 03 Javascript
js图片轮播插件的封装
Jul 21 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JavaScript中this详解
2015/09/01 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
小程序实现多列选择器
2019/02/15 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python实现下载文件的三种方法
2017/02/09 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
linux面试相关问题
2013/04/28 面试题
计算机本科生自荐信
2013/10/15 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
追悼词范文大全
2015/06/23 职场文书
村主任当选感言
2015/08/01 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python