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


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 String 对象
Apr 25 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
小程序云开发实战小结
Oct 25 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
javascript CSS画图之基础篇
2009/07/29 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
小学生环保倡议书
2014/05/15 职场文书
运动会方阵口号
2014/06/07 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
搭讪开场白台词大全
2015/05/28 职场文书