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


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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
js实现数字滚动特效
Dec 16 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
js的event详解。
2006/09/06 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
Python文件和流(实例讲解)
2017/09/12 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
Python多继承顺序实例分析
2018/05/26 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python适配器模式代码实现解析
2019/08/02 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
九一八事变演讲稿
2014/09/05 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
python内置进制转换函数的操作
2021/06/02 Python
MySQL GRANT用户授权的实现
2021/06/18 MySQL
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python