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 相关文章推荐
Maps Javascript
Jan 22 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
JavaScript函数基础详解
Feb 03 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 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
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
JS如何生成动态列表
2020/09/22 Javascript
django foreignkey(外键)的实现
2019/07/29 Python
python修改字典键(key)的方法
2019/08/05 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
python元组的概念知识点
2019/11/19 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
鲜果饮品店创业计划书
2014/01/21 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
廉政承诺书范文
2015/04/28 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
《观潮》教学反思
2016/02/17 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python