动态倒计时（仿vantUI倒计时）

先看下效果图（动态的，懒得做动图，就截个图大概看下）：

这个效果其实vantUI上有个相似的，vantUI倒计时。我的项目其实引入了vantUI，但是没用这个组件。主要是因为我发现这个组件需要把时分秒给分开（如下图），反正我是不太喜欢这个样子，所以我原生了一个。

实现代码：

<!--html-->
<div id="cdTimerDom">
</div>

//vue项目，这是个数字小于0，前面加0的过滤器，因为下面用到了，所以黏贴出来。
filters: {addZero: function (value) {if(value<10)return '0'+valueelse return value},
},

countDownNext(){const that = thisvar nowtime = new Date().getTime(),  //获取当前时间毫秒数endtime = new Date("2020/12/17").getTime();  //定义结束时间毫秒数var showtime = function () {var lefttime = endtime - nowtime,  //距离结束时间的毫秒数leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数lefts = Math.floor(lefttime/1000%60);  //计算秒数//lefttime判断如果结束时间已过返回00：00:00if(lefttime>0){//leftd判断如果不超过24小时，不显示天数//that.$options.filters.addZero()调用vue中的过滤器，如上filtersreturn leftd>0?that.$options.filters.addZero(leftd) + "天" + that.$options.filters.addZero(lefth) + ":" + that.$options.filters.addZero(leftm) + ":" + that.$options.filters.addZero(lefts):that.$options.filters.addZero(lefth) + ":" + that.$options.filters.addZero(leftm) + ":" + that.$options.filters.addZero(lefts)}else{return '00:00:00'}}setInterval (function () {var cdTimerDom = document.getElementById('cdTimerDom')var time =showtime()//获取要显示的时间字符串var domHtml =''//遍历时间字符串for(var i =0;i<time.length;i++){//判断样式的，不同位置返回不同的样式if(i==2||i==5||i==8){domHtml +=`<div style="width: 15px;background-color: #ffffff;border-radius: 4px;text-align: center;color: #ff662a;margin-right: 1px;"> ${time[i]}</div>`}else{domHtml +=`<div style="width: 13px;background-color: #ff662a;border-radius: 4px;text-align: center;color: #ffffff;margin-right: 1px;"> ${time[i]}</div>`}}cdTimerDom.innerHTML=domHtmlnowtime =nowtime +1000}, 1000);  //反复执行函数本身},

动态倒计时（仿vantUI倒计时）相关推荐

html倒计时10s,js 倒计时10s
允许点击 var wait = 10; function time(o){ if(wait==0){ o.innerHTML = "允许点击"; o.removeAttribute ...
php动态倒计时,php实现倒计时效果
现在很多的团购网站上都有剩余时间的显示.显示剩余时间可以使用javascript来实现,但是我们会发现使用javascript来实现的话不安全,因为javascript获取的是客户端的时间.比方说,这 ...
html5支付宝主页面代码,JavaScript高仿支付宝倒计时页面及代码实现
实现目标一,页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二,倒计时完毕,出现删除订单. 三,单击删除订单,弹出弹框,询问是否要真正删除订单. 四,单击确定,即可删除订单. 如 ...
Android 定时器+倒计时仿淘宝秒杀
目录结构效果图: imageViewHolder public class imageViewHolder extends RecyclerView.ViewHolder {public Image ...
android实现首页倒计时,Android倒计时 Android仿京东倒计时 android电商app源码倒计时源码...
一个简单的计时器提供了一些方法设置margin public void setLinearLayoutMargin(int left, int top, int right, int bottom ...
android 倒计时源码,Android倒计时 Android仿京东倒计时 android电商app源码倒计时源码...
countdown 一个简单的计时器提供了一些方法设置margin public void setLinearLayoutMargin(int left, int top, int right, ...
php 考试系统倒计时,php实现倒计时效果_PHP
现在很多的团购网站上都有剩余时间的显示.显示剩余时间可以使用Javascript来实现,但是我们会发现使用Javascript来实现的话不安全,因为Javascript获取的是客户端的时间.比方说,这 ...
android studio高考倒计时,2019高考倒计时锁屏app-高考倒计时锁屏软件预约v1.0.5-乐游网安卓...
<高考倒计时锁屏软件>是一款非常不错的锁屏软件,当然锁屏只是软件的其一功能,可以自定义自己的个性锁屏,写上自己喜欢的名言锦句和可以让自己奋发的心灵寄语,在最后放手一搏,同时可以提供一些最后 ...
php mysql倒计时_php实现倒计时效果，_PHP教程
php实现倒计时效果, 现在很多的团购网站上都有剩余时间的显示.显示剩余时间可以使用Javascript来实现,但是我们会发现使用Javascript来实现的话不安全,因为Javascript获取的是 ...

动态倒计时（仿vantUI倒计时）

动态倒计时（仿vantUI倒计时）相关推荐

最新文章

热门文章