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


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 Array对象基础知识小结
Nov 16 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
vue中appear的用法
Aug 17 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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
博士208HAF收音机实习报告
2021/03/02 无线电
php中Smarty模板初体验
2011/08/08 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
如何定义一个可复用的服务
2014/09/30 面试题
大学生职业生涯规划范文
2014/01/08 职场文书
一岗双责责任书
2014/04/15 职场文书
小学教师培训方案
2014/06/09 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
闪闪的红星观后感
2015/06/08 职场文书