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

it2022-05-06  7

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

这是实现的效果,每秒钟都在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 = this that.countDown(); }, //倒计时 countDown() { var that = this var starttime = '2019/07/30 09:04:19' var start = new Date(starttime.replace(/-/g, "/")).getTime() var endTime = start + 15 * 60000 var date = new Date(); //现在时间 var now = date.getTime(); //现在时间戳 var allTime = endTime - now var 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);

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


最新回复(0)