vue实现商城秒杀倒计时功能


Posted in Javascript onDecember 12, 2019

vue实现商城秒杀倒计时功能,效果图如下所示:

vue实现商城秒杀倒计时功能

template代码

<div>
  <div class="component-wrapper" id="flash-sale">
   <div class="sale-header">
    <div class="countdown-zone">
     <div class="countdown-prefix">限?r快??</div>
     <div class="countdown pure-css-countdown active">
       <div class="digits-wrapper hours">11</div>
       <div class="digits-seperator">月</div>
       <div class="digits-wrapper minutes">02</div>
       <div class="digits-seperator">日</div>
       <div class="digits-seperator">——</div>
       <div class="digits-wrapper seconds">11</div>
       <div class="digits-seperator">月</div>
       <div class="digits-wrapper">03</div>
       <div class="digits-seperator">日</div>
     </div>
    </div>
   </div>
  </div>
 </div>

script代码

export default {
  data() {
    return {
   hou:0,
   min:0,
   sec:0,
   ssec:0,
   endTime:'',
   disprArr:[],
    }
  },
  created(){
    let that=this
    that.time()
  },
  methods:{
    time(){
   var that=this
   var interval = setInterval(function timestampToTime(){
   
   var date=(new Date(结束的时间戳)) - (new Date());
   //new Date当前的时间戳,也可以换成自定义的时间戳
   if (date > 0) {
     let time = date / 1000;
     // 获取时、分、秒,毫秒
     that.hou = parseInt((time % (60 * 60 * 24)) / 3600)<10?('0'+parseInt((time % (60 * 60 * 24)) / 3600)):parseInt((time % (60 * 60 * 24)) / 3600)
     that.min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60)<10?('0'+parseInt(((time % (60 * 60 * 24)) % 3600) / 60)):parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
     that.sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60)<10?('0'+parseInt(((time % (60 * 60 * 24)) % 3600) % 60)):parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
     that.ssec= parseInt(((date % (60 * 60 * 24)) % 3600) / 60)%10
    } else {
     //活动已结束,全部设置为'00'
     // console.log("aaa")
      that.day="00",
      that.hou="00",
      that.min="00",
      that.sec="00"
    }
  },100)
  }
  },
};

总结

以上所述是小编给大家介绍的vue实现商城秒杀倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript 类与静态类的实现(续)
Apr 02 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 #Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 #Javascript
vue-property-decorator用法详解
Dec 12 #Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 #Javascript
JavaScript Reflect Metadata实现详解
Dec 12 #Javascript
JS动态显示倒计时效果
Dec 12 #Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
Yii2单元测试用法示例
2016/11/12 PHP
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
vuejs指令详解
2017/02/07 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
python实现合并两个数组的方法
2015/05/16 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python环境变量设置方法
2016/08/28 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python async with和async for的使用
2019/06/20 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
创业计划书的写作技巧及要点
2014/01/31 职场文书
仓库管理计划书
2014/05/04 职场文书
关于运动会的口号
2014/06/07 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
老人与海读书笔记
2015/06/26 职场文书
电工生产实习心得体会
2016/01/22 职场文书
创业计划书之酒店
2019/08/30 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
MySQL分区以及建索引的方法总结
2022/04/13 MySQL