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


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通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
Vue编程式跳转的实例代码详解
Jul 10 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
组合算法的PHP解答方法
2012/02/04 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
报表员工作失误检讨书范文
2014/09/19 职场文书
护士2015年终工作总结
2015/04/29 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android