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


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里访问SharePoint列表数据的实现方法
May 22 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
PHPMailer发送邮件
2016/12/28 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
详解webpack babel的配置
2018/01/09 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
数据员岗位职责
2013/11/19 职场文书
考试没考好检讨书
2015/05/06 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
自荐信范文
2019/05/20 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书