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


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 相关文章推荐
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
js实现圆盘记速表
Aug 03 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
React事件处理的机制及原理
Dec 03 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
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
用python计算文件的MD5值
2020/12/23 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
幼儿园五一活动方案
2014/02/07 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
会议欢迎标语
2014/06/30 职场文书
个人总结与自我评价
2014/09/18 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书