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


Posted in Javascript onNovember 19, 2020

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

商城商品中的活动倒计时

js

var endTime = new Date().getTime() + 24 * 3600 * 1000*4;

Page({

 /**
 * 页面的初始数据
 */
 data: {
 headerImgs: postData.postSwiperData,
 countDownDay: '',
 countDownHour: '',
 countDownMinute: '',
 countDownSecond: '',
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var id = options.id; //页面跳转传过来的值
 },
 onReady: function() {
 var that = this;

 countdown(that);
 }
})

function countdown(that) {
 var NowTime = new Date().getTime();
 var EndTime = endTime;
 var total_micro_second = EndTime - NowTime || [];
 console.log('当前时间'+NowTime+'\n剩余时间:' + total_micro_second);
 // 渲染倒计时时钟
 that.setData({
 countDownDay: dateformaDay(total_micro_second),
 countDownHour: dateformaHour(total_micro_second),
 countDownMinute: dateformaMinute(total_micro_second),
 countDownSecond: dateformaSecondMinute(total_micro_second),
 });
 // if (total_micro_second <= 0) {
 // that.setData({
 // clock: "已经截止"
 // });
 // //return;
 // }
 setTimeout(function() {
 total_micro_second -= 1000;
 countdown(that);
 }, 1000)
}

// 时间格式化输出
function dateformaDay(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 天数
 var day = Math.floor(second / 3600 / 24);
 return day;
}

function dateformaHour(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 小时
 var hr = Math.floor(second / 3600 % 24);
 return hr;
}

function dateformaMinute(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 分钟
 var min = Math.floor(second / 60 % 60);
 return min;
}

function dateformaSecondMinute(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 秒
 var sec = Math.floor(second % 60);
 return sec;
}

wxml

<!-- 倒计时 start -->
 <view style='display:flex;flex-direction:column;'>
 <span style="font-size:10px;color:white;margin-top:5px;">距活动结束还剩</span>
 <view class='time-container'>
 <text class='time-number'>{{countDownDay}}</text>
 <span class='time-text'>天</span>
 <text class='time-number'>{{countDownHour}}</text>
 <span class='time-text'>时</span>
 <text class='time-number'>{{countDownMinute}}</text>
 <span class='time-text '>分</span>
 <text class='time-number '>{{countDownSecond}}</text>
 <span class='time-text '>秒</span>
 </view>
 </view>
<!-- 倒计时 end -->

wxss

.time-container {
 display: flex;
 flex-direction: row;
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right: 10px;
 align-items: center;
}

.time-number {
 background: white;
 color: red;
 width: 18px;
 height: 18px;
 font-size: 12px;
 border-radius: 3px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.time-text {
 font-size: 10px;
 color: white;
 margin: 3px;
}

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

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

Javascript 相关文章推荐
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
微信小程序实现列表左右滑动
Nov 19 #Javascript
详解JavaScript 中的批处理和缓存
Nov 19 #Javascript
Javascript中window.name属性详解
Nov 19 #Javascript
JavaScript实现图片合成下载的示例
Nov 19 #Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 #Vue.js
vue 插槽简介及使用示例
Nov 19 #Vue.js
微信小程序实现点击导航条切换页面
Nov 19 #Javascript
You might like
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
python验证码识别的示例代码
2017/09/21 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python实现梯度法 python最速下降法
2020/03/24 Python
python语言中有算法吗
2020/06/16 Python
PyTorch-GPU加速实例
2020/06/23 Python
Python如何定义有可选参数的元类
2020/07/31 Python
python实现银行账户系统
2021/02/22 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
企业车辆管理制度
2014/01/24 职场文书
教师个人自我鉴定
2014/02/08 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
领导视察通讯稿
2015/07/18 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android