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 相关文章推荐
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
php中处理模拟rewrite 效果
2006/12/09 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
javascript基本语法
2016/05/31 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
进一步探究Python中的正则表达式
2015/04/28 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python实现计算器功能
2019/10/31 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Python3如何判断三角形的类型
2020/04/12 Python
python的pip有什么用
2020/06/17 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
三分钟英语演讲稿
2014/04/24 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
二十年同学聚会致辞
2015/07/28 职场文书