微信小程序倒计时实现

微信小程序倒计时实现
a.wxml

<view class="daojishi"><text>{{day}}</text>天<text>{{hour}}</text>时<text>{{min}}</text>分 <text>{{sec}}</text>秒</view>

a.wxss

.daojishi{position: absolute;width:70%;height:60rpx;color:#fff;left:250rpx;margin-top:30rpx;padding-bottom:20rpx;}
.daojishi text{width:60rpx;height:60rpx;background-color: #fecc15;font-size:30px;
color:#ff0000;
}

a.js

Page({data: {countdown: '',endDate2: '2021-12-26 00:00:00'},
onLoad: function (options) {var that = this;that.countTime()},countTime() {var that = this;var date = new Date();var now = date.getTime();var endDate = new Date(that.data.endDate2); //设置截止时间var end = endDate.getTime();var leftTime = end - now; //时间差                              var d, h, m, s, ms;if (leftTime >= 0) {d = Math.floor(leftTime / 1000 / 60 / 60 / 24);h = Math.floor(leftTime / 1000 / 60 / 60 % 24);m = Math.floor(leftTime / 1000 / 60 % 60);s = Math.floor(leftTime / 1000 % 60);ms = Math.floor(leftTime % 1000);ms = ms < 100 ? "0" + ms : mss = s < 10 ? "0" + s : sm = m < 10 ? "0" + m : mh = h < 10 ? "0" + h : hthat.setData({countdown: d + "：" + h + "：" + m + "：" + s + ":" + ms,day:d,hour:h,min:m,sec:s})//递归每秒调用countTime方法，显示动态时间效果setTimeout(that.countTime, 100);} else {console.log('已截止')that.setData({day:0,hour:0,min:0,sec:0})}},
})

微信小程序倒计时实现相关推荐

微信小程序倒计时，购物车，向左滑删除左拉删除
微信小程序倒计时 :https://gitee.com/dotton/CountDown 微信小程序购物车功能,全选,价格叠加:https://www.cnblogs.com/linxin/p/683 ...
【重构】微信小程序倒计时组件
回想在4个月前刚刚进入公司实习时,我封装了一个应用于小程序的倒计时组件. 链接在这里:微信小程序之倒计时组件以现在的视角再去看之前的实现可以说是一坨看不下去的烂代码.所以也借此机会,将之前的组件重构 ...
微信小程序倒计时方法封装
最近在做一个商城小程序的时候在订单部分有用到倒计时,比如说未支付订单在一定时间后自动关闭订单,这个时候在前端页面上就要展示倒计时. 先封装一个把时间戳转化成天时分秒格式数据的方法,这个方法也可以用于单 ...
微信小程序倒计时，小程序60秒倒计时，小程序倒计时防止重复点击
相信大家再做小程序的时候大部分都会碰到获取验证码功能比如说手机号登陆获取验证码一定时间之内不能重复点击案例下载地址 html部分 <view class="signIn" ...
微信小程序倒计时实现
var interval = null //倒计时函数 var currentTime = that.data.currentTime interval = setInterval(function ...
微信小程序 —— 倒计时(展示时钟)
以下所述参考网上众多大佬略写,本人只是菜鸟一枚,记录博客主要怕自己记不住,方便以后参考,有何不足,欢迎补充- 方式方法和网上大多大佬有雷同,因为我也是参考网上各位大佬的- 一.单独一个页面只有一个时展 ...
微信小程序 - 倒计时60秒(获取验证码)
因为写这个功能的时候我也是个新手,所以并没有抽取class和js~ 或许也正是因此,新手看起来会更简单一些 ~ Make a little progress every day ~ 实现效果功能版 ...
微信小程序-倒计时调用相机自动拍照
在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照. 一.首先是视图层index.wxml,视图层主要负责显示组件和图片. <!--index.wxml--& ...
微信小程序---倒计时
1.html <view class="code" bindtap="onClickCheckCode"> {{sms_status}}</v ...

微信小程序倒计时实现

微信小程序倒计时实现相关推荐

最新文章

热门文章