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


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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
javascript数据类型示例分享
Jan 19 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
微信小程序实现批量倒计时功能
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
PHPThumb图片处理实例
2014/05/03 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
python集合类型用法分析
2015/04/08 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Flask框架信号用法实例分析
2018/07/24 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
工作个人的自我评价
2014/01/14 职场文书
优秀经理事迹材料
2014/02/01 职场文书
推广普通话演讲稿
2014/05/23 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
硕士学位申请报告
2015/05/15 职场文书
新生开学寄语大全
2015/05/28 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Linux中如何安装并部署Redis
2022/04/18 Servers
基于docker安装zabbix的详细教程
2022/06/05 Servers