原生JS活动倒计时实现思路

由于一个活动页面里面有多个活动，所以用map去操作每一个对象，只有一个活动的话就不需要遍历了，活动分为距离活动开始和距离活动结束两个倒计时，自己可按需求增减代码。还有就是IOS不兼容时间用“-”连接，所以移动端的话要把“-”替换成“/”做一下兼容。

由于一个活动页面里面有多个活动，所以用map去操作每一个对象，只有一个活动的话就不需要遍历了，活动分为距离活动开始和距离活动结束两个倒计时，自己可按需求增减代码。还有就是IOS不兼容时间用“-”连接，所以移动端的话要把“-”替换成“/”做一下兼容。

var timer = setInterval(function() {mapForItem:function() {data.map(function(item) {var startTime = new Date(item.timeStart.replace(/-/g, "/")).getTime() //获取活动开始时间戳var endtTime = new Date(item.timeEnd.replace(/-/g, "/")).getTime() //获取活动结束时间戳var currentTime = new Date().getTime() //获取当前时间戳var surplusTime = startTime - currentTime > 0 ? startTime - currentTime : endtTime - currentTime //计算距离活动开始/结束剩余时间item.hours =  Math.floor(surplusTime / (1000 * 60 * 60)) < 10 ? '0' + Math.floor(surplusTime / (1000 * 60 * 60)) : Math.floor(surplusTime / (1000 * 60 * 60)) //倒数小时surplusTime = surplusTime - (item.hours * 1000 * 60 * 60) //减去小时的时间戳item.minunts = Math.floor(surplusTime / (1000 * 60)) < 10 ? '0' + Math.floor(surplusTime / (1000 * 60)) : Math.floor(surplusTime / (1000 * 60)) //倒数分钟surplusTime = surplusTime - (item.minunts * 1000 * 60) //减去分钟的时间戳item.seconds = Math.floor(surplusTime / 1000) < 10 ? '0' + Math.floor(surplusTime / 1000) : Math.floor(surplusTime / 1000) //倒数秒数if(endtTime - currentTime < 1000) {//当剩余的时间戳小于1000时代表小于1秒，即可清除定时器clearInterval(timer)item.hours = '00'item.minunts = '00'item.seconds = '00'}})},
}, 1000)

原生JS活动倒计时实现思路相关推荐

js php活动倒计时,js活动倒计时实现思路？
没时间看的,直接看下文「倒计时实现代码」 js获取服务器时间使用Ajax(cache: false)去GET当前js文件读取其HTTP的Date头(服务器端时间),根据此头计算客户端与本地时间的 ...
基于Vue.js活动倒计时组件
vue2-countdown vue活动倒计时组件及遇到的坑基于vue2.x的活动倒计时组件主要是最近为了公司做一个倒计时活动才找到了这个组件使用的.于是去github上翻看了文档结果是一年多没更 ...
js 活动倒计时详解
背景前端页面倒计时功能在很多场景中会用到,如运营活动开始倒计时和活动结束倒计时,又如购物网站的秒杀倒计时,抢购倒计时,还有我们手Q春节抢红包倒计时等等--. 最近的话费代付项目中,也涉及倒计时功能, ...
js php活动倒计时,JS活动倒计时代码
主要运用到JS的Date对象~ Title window.οnlοad=function jb(){ var j=setTimeout(jb,1000); //创建时间 var date=new Da ...
原生js春节倒计时@酷酷航
<script type="text/javascript">var time_now_server,time_now_client,time_end,time_ser ...
原生js实现移动动画，变化动画
初生牛犊不怕虎,想用博客来记录自己以前的一些学习经历,对您有帮助的话请留下你们的赞哦! 话不多说进入正题首先我们应该怎么用原生js实现动画,思路是这样的通过某些方法获取到当前元素的样式属性值,例如 ...
原生js 或vue实现60分钟倒计时案例
使用场景类似于订单倒计时,或答题倒计时,代码如下在Vue中封装了如下的方法 data () {return {countdownTxt:'',//要显示的倒计时文案};}, // 定义一个方法方 ...
原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
文章目录功能简介项目准备项目说明方案一:源代码 CSS样式 HTML结构 JS逻辑方案二:源代码 CSS样式 HTML结构 JS逻辑功能简介页面展示该项目功能实现: 无限滚动轮播图 j ...
js实现计时器---解决活动倒计时(还有多少天、时、分、秒)
活动倒计时,是非常重要且常见的形式,例如京东.淘宝等商品活动,优惠或者打折所呈现的形式. 话不多说,上代码!!! <!DOCTYPE html> <html><head ...

原生JS活动倒计时实现思路

原生JS活动倒计时实现思路

原生JS活动倒计时实现思路相关推荐

最新文章

热门文章