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


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实现的完美渐变弹出层效果代码
Apr 02 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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开启gzip页面压缩实例代码
2010/03/11 PHP
php自定义错误处理用法实例
2015/03/20 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
在windows系统中实现python3安装lxml
2016/03/23 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python中enumerate函数代码解析
2017/10/31 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
会计助理岗位职责
2014/02/17 职场文书
安全协议书
2014/04/23 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
小平您好观后感
2015/06/09 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫