微信小程序实现单个或多个倒计时功能微信小程序实现单个或多个倒计时功能
微信小程序 实现单个/多个倒计时显示
单个倒计时
多个倒计时
思路：思路：首先获取到每个倒计时的结束时间，然后把结束时间跟当前时间转换成时间戳，结束时间减去当前时间再除以
1000（因为时间戳是毫秒级）就是该结束时间距离当前时间的秒数了，然后根据公式计算出时分秒，最后使用定时器每秒跑
一次就实现成功啦~
两种倒计时思路差不多，多个倒计时多了遍历数组步骤，遍历拿到数组中每个对象结束时间来计算时间
好啦！说完思路先上效果图看看
单个倒计时单个倒计时
上代码，上代码！！！重点来啦
wxml:
// 单个倒计时-----wxml
<view class="countdown">
<view class="item">
倒计时：
<view class="txt-time">{{txtTime.hou}}</view>:
<view class="txt-time">{{txtTime.min}}</view>:
<view class="txt-time">{{txtTime.sec}}</view>
</view>
</view>
css:
// 单个倒计时-----wxss
.countdown .item {
display: flex;
justify-content: center;
align-items: center;
height: 200rpx;
width: 90%;
margin: 0 5%;
资源评论
weixin_38748055
- 粉丝: 4
- 资源: 960
