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


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 的replace
Apr 12 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
javascript触发模拟鼠标点击事件
Jun 26 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
js 操作css实现代码
2009/06/11 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
对javascript继承的理解
2016/10/11 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
Vue实现手机计算器
2020/08/17 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python利用ansible分发处理任务
2015/08/04 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
手机银行营销方案
2014/03/14 职场文书
聘用意向书范本
2014/04/01 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2014年工程师工作总结
2014/11/25 职场文书
停电放假通知
2015/04/14 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript