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


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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
Vue实现选择城市功能
May 27 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
VsCode与Node.js知识点详解
Sep 05 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
我的论坛源代码(九)
2006/10/09 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python 获取计算机的网卡信息
2021/02/18 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
学校2014年度工作总结
2014/12/06 职场文书
感谢信怎么写
2015/01/21 职场文书
成绩单家长意见
2015/06/03 职场文书
python基础之函数的定义和调用
2021/10/24 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js