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


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点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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/07/27 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
RequireJS用法简单示例
2018/08/20 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
python实现图片上添加图片
2019/11/26 Python
基于python监控程序是否关闭
2020/01/14 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
心理健康课教学反思
2014/02/13 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2015年教师新年寄语
2014/12/08 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
培训简讯范文
2015/07/20 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python