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 相关文章推荐
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
小程序关于请求同步的总结
May 05 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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
默默简单的写了一个模板引擎
2007/01/02 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
Js基础学习资料
2010/11/23 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
webpack构建换肤功能的思路详解
2017/11/27 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
Python 学习笔记
2008/12/27 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python实现键盘输入的实操方法
2019/07/16 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
喷漆工的岗位职责
2014/03/17 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS