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


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 相关文章推荐
JavaScript Timer实现代码
Feb 17 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
javascript 实现map集合
Apr 03 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
AngularJs 常用的过滤器
May 15 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
微信小程序实现批量倒计时功能
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
PHP文件操作方法汇总
2015/07/01 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
Python 自动补全(vim)
2014/11/30 Python
Django发送html邮件的方法
2015/05/26 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
小学学校评估方案
2014/06/08 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js