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


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 相关文章推荐
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
原生js+canvas实现验证码
Nov 29 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
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
js判断是否是手机页面
2017/03/17 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python构建指数平滑预测模型示例
2019/11/21 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
商务专员岗位职责
2013/11/23 职场文书
培训班主持词
2014/03/28 职场文书
《花木兰》教学反思
2014/04/09 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
高中军训的心得体会
2014/09/01 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
开除通知书范本
2015/04/25 职场文书
个人承诺书格式范文
2015/04/29 职场文书
仰望星空观后感
2015/06/10 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server