微信小程序实现商城倒计时


Posted in Javascript onNovember 01, 2020

本文实例为大家分享了微信小程序实现商城倒计时的具体代码,供大家参考,具体内容如下

index.html:

<view class="countDownTimeView pull-left countDownAllView text-left">
 
 <text>倒计时:</text> 
 <text class="voteText countDownTimeText">{{countDownHour}}</text> : 
 <text class="voteText countDownTimeText">{{countDownMinute}}</text> : 
 <text class="voteText countDownTimeText">{{countDownSecond}}</text>
 
</view>

util.js :

const formatTime = date => {
 
 const year = date.getFullYear()
 const month = date.getMonth() + 1
 const day = date.getDate()
 const hour = date.getHours()
 const minute = date.getMinutes()
 const second = date.getSeconds()
 
 return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
 
}
 
const formatNumber = n => {
 n = n.toString()
 return n[1] ? n : '0' + n
}
 
module.exports = {
 formatTime: formatTime
}

index.js:

var util = require('../../utils/util.js'); //调用微信小程序中时间格式化的js
 
Page: ({
 
 data: {
 
   countDownHour: 0, //倒计时 -时
   countDownMinute: 0, //倒计时 -分
   countDownSecond: 0, //倒计时-秒
 
  },
 
 
 
 // 页面渲染后 执行
 
 onLoad: function () {
 
  //设置倒计时时间,1s变换一次
  var interval = setInterval(function () {
   var d = new Date(); //获取系统日期和时间
   var nowHour = d.getHours(); //小时
   var nowMinutes = d.getMinutes(); //分
   var nowSeconds = d.getSeconds(); //秒
 
   // 显示在倒计时中的小时位
   var hour = 24 - nowHour;
 
   // 显示在倒计时中的分钟位
   var minutes = 60 - nowMinutes;
 
   // 显示在倒计时中的秒数
   var seconds = 60 - nowSeconds;
 
 
   //当小时、分钟、秒都为0时,活动结束,倒计时显示为00:00:00
   if (hour == 0 && minutes == 0 && seconds == 0) {
 
    clearInterval(interval);
    wx.showToast({
    title: '活动已结束',
    });
    console.log(totalSecond);
 
    this.setData({
    countDownHour: '00',
    countDownMinute: '00',
    countDownSecond: '00',
    });
   }
 
 
   //当小时位、分钟位、秒位小于10时,用字符串拼接的方式显示,例如:06:08:02
 
   if (hour < 10) {
    hour = "0" + hour;
   }
   if (minutes < 10) {
    minutes = "0" + minutes;
   }
   if (seconds < 10) {
    seconds = "0" + seconds;
   }
   this.setData({
    countDownHour: hour,
    countDownMinute: minutes,
    countDownSecond: seconds,
   });
  }.bind(this), 1000);
 },
})

最终实现效果图如下:

微信小程序实现商城倒计时

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
微信小程序实现批量倒计时功能
Nov 01 #Javascript
微信小程序实现订单倒计时
Nov 01 #Javascript
Vue监听页面刷新和关闭功能
Jun 20 #Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 #Javascript
js实现页面多个日期时间倒计时效果
Jun 20 #Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 #Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 #Javascript
You might like
ajax php 实现写入数据库
2009/09/02 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
微信小程序收藏功能的实现代码
2020/06/19 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
python 域名分析工具实现代码
2009/07/15 Python
详解Django中的form库的使用
2015/07/18 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
总结Python编程中函数的使用要点
2016/03/20 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
建筑总经理岗位职责
2014/02/02 职场文书
房地产促销活动方案
2014/03/01 职场文书
股东协议书
2014/04/14 职场文书
自强之星事迹材料
2014/05/12 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书