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


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 新手学习常见问题解决方法
Apr 18 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
Java中Timer的用法详解
Oct 21 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
vue的$http的get请求要加上params操作
Nov 12 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 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
自我鉴定范文300字
2013/10/01 职场文书
一夜的工作教学反思
2014/02/08 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
期末评语大全
2014/05/04 职场文书
执行力心得体会范文
2016/01/11 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android