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


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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
js实现聊天对话框
Feb 08 Javascript
vue prop传值类型检验方式
Jul 30 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验证码(支持中文)
2007/02/14 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
yii中widget的用法
2014/12/03 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python import与from import使用及区别介绍
2018/09/06 Python
详解python数据结构和算法
2019/04/18 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
Linux文件系统类型
2012/02/15 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
中专毕业个人的自荐信格式
2013/09/21 职场文书
大学生找工作求职信
2014/07/09 职场文书
员工工作自我评价
2014/09/26 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis