微信小程序之15分钟倒计时（附带天数和时钟的实现方法在文章中）

这是制作的订单支付前倒计时，如果客户在规定时间内没能支付，则系统自动删除，这样就以便有些商品冗余，当然了，这里只有分钟和秒钟，天数和时钟我写在了最底下，最后代码的显示第七行，可以看一下，然后带入到相应的地方。

这是实现的效果，每秒钟都在onload（）里面被调用，然后自动动态倒计时。

其实难度不是很大，有一些代码防止你们看不懂，我会在下面注解出来的。

首先还是wxml

<view class='demo-text2'><text>倒计时：{{countdown}}</text></view>

其次是wxss

.demo-text2 {font-size: 28rpx;color: #ff7ba8;
}

我就加了一个颜色，哈哈哈哈~，你们可以根据自己的意思加字和东西，很好加的。

最后就是最重要的js里，注释我会写在最下面的。

Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = thisthat.countDown();},//倒计时countDown() {var that = thisvar starttime = '2019/07/30 09:04:19'var start = new Date(starttime.replace(/-/g, "/")).getTime()var endTime = start + 15 * 60000var date = new Date(); //现在时间var now = date.getTime(); //现在时间戳var allTime = endTime - nowvar m, s;if (allTime > 0) {m = Math.floor(allTime / 1000 / 60 % 60);s = Math.floor(allTime / 1000 % 60);that.setData({countdown: m + "：" + s,})setTimeout(that.countDown, 1000);} else {console.log('已截止')that.setData({countdown: '00:00'})}},
}）

  首先，是开始的时间，注意，千万不要是现在时间，不然一直是15分钟，无法改变的。如果你想要用获取的时间，把我上面的时间改成在onload（）里获取的时间就好了，this.data.你的时间属性。var starttime = '2019/07/30 09:04:19'var start = new Date(starttime.replace(/-/g, "/")).getTime()       //时间转时间戳   这里有个重点，replace(/-/g, "/")里面的/符号是根据starttime 的日期时间的符号改变的，如果是  “—”  ，就把里面  /  改成  —  就好了。var endTime = start + 15 * 60000    表示之前的时间加15分钟，如果想30分钟，改一下就好了，随你们用。第二点，如果获取到了时间就不用使用上面的时间转时间戳了。因为后面是用时间戳计算的，如果是用时间计算，比较麻烦，建议用时间戳。第三点，因为我这里只有分钟和秒钟，如果你需要时钟和天数的话，d代表day（天数），h代表（时钟）加入下面代码。var d,h,m, s;d = Math.floor(allTime/ 1000 / 60 / 60 / 24);h = Math.floor(allTime/ 1000 / 60 / 60 % 24);countdown: d + "：" +  h + "：" + m + "：" + s,countdown: '00:00:00:00'加在对应的位置一看就知道吧，哪里相同加哪里。setTimeout(that.countDown, 1000);指定的毫秒数后调用函数，后面的数字是指定毫秒。注：如果需要小时显示几天的倒计时，请勿除于24，否则会显示为当天的24小时，此代码需要改为h = Math.floor(allTime/ 1000 / 60 / 60);

好了，这就是倒计时的所有代码了，有问题的请留言。

微信小程序之15分钟倒计时（附带天数和时钟的实现方法在文章中）相关推荐

微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法
微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法参考文章: (1)微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法 (2)https://www.cnblogs.com/ ...
视频教程-微信小程序商城15天从零实战课程-微信开发
微信小程序商城15天从零实战课程 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥499.00 立即订阅 ...
微信小程序商城15天从零实战视频课程-收货地址列表
微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua js代码 // pages/addr/addr.j ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序开发uni-app-8分钟上手开发
本篇文章uni-app微信小程序开发-8分钟上手开发 -首先到微信小程序官网登录/注册微信小程序微信小程序官网 uni-app + 微信小程序注册微信小程序这里要注意: 激活邮箱之后,选择主体类 ...
微信小程序开发15 项目实战基于云开发开发一个在线商城小程序
在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识.在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识 ...
微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法
微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法遇到的问题: 第一个坑: 使用wx.chooseLocation获取地址,当输入地址时,有时候第一个搜索结果没有省市区信息 ...
HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法发布时间:2020-12-31 11:01:19 来源:亿速云阅读:126 作者:小新这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
php小程序session取不到,微信小程序实现Session功能及无法获取session问题的解决方法...
因为小程序原生不支持Cookie,因此也不支持Session. 网上找到的的一些方法有缺陷,而且很多累赘,估计没有实际测试过,在此直接给出实测可用的代码. 大概思路就是借助小程序本地储存+网络请求的h ...

微信小程序之15分钟倒计时（附带天数和时钟的实现方法在文章中）

微信小程序之15分钟倒计时（附带天数和时钟的实现方法在文章中）相关推荐

最新文章

热门文章