使用angular $interval服务实现购物网站秒杀活动时间倒计时

news/2024/5/19 9:47:04/文章来源:https://blog.csdn.net/luo609630199/article/details/82802200

最近在做一个购物网站的秒杀活动,其中涉及到了一个时间的倒计时.

所谓“秒杀”,就是网络卖家发布一些超低价格的商品,所有买家在同一时间网上抢购的一种销售方式。通俗一点讲就是网络商家为促销等目的组织的网上限时抢购活动。由于商品价格低廉,往往一上架就被抢购一空,有时只用一秒钟。

秒杀商品通常有两种限制:库存限制、时间限制。

 数据库字段

​​

 

这个功能我们使用的技术是angular $interval服务在前端实现的

代码:

     //查询正在参与秒杀的商品$scope.findOne=function () {var id= $location.search()['id'];seckillGoodsService.findOneFromRedis(id).success(function (response) {$scope.entity=response;//计算当前时间到结束时间的总秒数secondAll=Math.floor((new Date(response.endTime).getTime()-new Date().getTime())/1000);timer= $interval(function () {secondAll=secondAll-1;if (secondAll==0){$interval.cancel(timer)alert("秒杀活动已结束!")}else {$scope.timeString=convertTimeString(secondAll);}},1000);});}把秒转换为 天小时分钟秒格式  XXX天 10:22:33convertTimeString=function (secondAll) {var days=Math.floor(secondAll/(60*60*24));//天数var hours=Math.floor((secondAll-days*60*60*24)/(60*60));//小时数var minutes=Math.floor((secondAll-days*60*60*24-hours*60*60)/60);//分钟var seconds=secondAll-days*60*60*24-hours*60*60-minutes*60;//秒var timeString="";if (days>0){timeString=days+"天"}return timeString+hours+":"+minutes+":"+seconds}

页面引用

 

 最终的效果如图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_822501.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么扒站建站_深扒国内建站服务:网站建设哪家服务好?

企业如果想通过互联网来打响品牌,吸引更多客户,一个自己的官方网站是少不了的。如今各种建站服务商也有很多,但是服务质量良莠不齐,这该怎么选择呢?今天就跟大家深扒一下网站建设哪家服务好,让你明白企业到…

python与seo应用_python网络爬虫与SEO搜索引擎优化介绍

1. 什么是爬虫?首先应该弄明白一件事,就是什么是爬虫,为什么要爬虫,博主百度了一下,是这样解释的:网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网…

PHP网站留言要加验证码,php – 需要一些帮助来添加一些验证码联系表单

嗨,我是PHP的新手,我想要一些帮助.我已经创建了一个联系表单,我想添加一些验证码.我已经创建了一些gif图像,其中包含添加了一些噪音的数字,并将no1命名为code_01.gif,no2等命名为code_02.gif等.我已经将其中的一些设置在我的表单上,静态地用于显示目的,如此:我想添加…

大型网站架构演变和知识体系

之前也有一些介绍大型网站架构演变的文章,例如LiveJournal的、ebay的,都是非常值得参考的,不过感觉他们讲的更多的是每次演变的结果,而没有很详细的讲为什么需要做这样的演变,再加上近来感觉有不少同学都很难明白为什么…

网站安全解决方案

网站安全解决方案1.项目背景根据国家计算机网络应急技术处理协调中心(简称CNCERT/CC)2008年上半年的统计报告,中国大陆被篡改网站的数量相比往年处于明显上升趋势,共监测到中国大陆被篡改网站总数达到35113 个,同比增加…

借双慧眼识别钓鱼欺诈网站

借双慧眼识别钓鱼欺诈网站 钓鱼欺诈网站,又称仿冒网站。这些网站的内容主要是复制那些正常网站的内容,使得网民粗一看几乎和正常网站一模一样,区别仅限于浏览器的地址。 曾有新闻报道有骗子在北京街头做了个假ATM机,这ATM机和市民…

curl网站开发指南

作者: 阮一峰 日期: 2011年9月 4日 我一向以为,curl只是一个编程用的函数库。 最近才发现,这个命令本身,就是一个无比有用的网站开发工具,请看我整理的它的用法。 curl网站开发指南 阮一峰 整理 curl是一种…

如何修改MOSS网站名(主机标头)

修改MOSS网站名(主机标头) 编写人:顾劲松 一、问题现状描述 在MOSS中创建的网站时,如果不指定网站的标头,MOSS会使用主机名作为网站标头。例如,我们在服务器myhigerweb上安装部署的MOSS网站,从I…

推荐16个国外的源码下载网站

如今,网上有很多的源代码下载网站,分析和学习别人的代码也是提高自己编程能力的方法之一。今天本文向大家推荐16个国外的代码下载网站。 The Script Library PHP Junkyard Hotscripts Script Dungeon Gscripts CgiScript Perl scripts Java scripts Scri…

缩短网站域名的DNS解析时间

如上图所示,普通用户打开一个网页的时间主要由四部分组成:网站域名通过 DNS 服务器解析到IP地址的时间通过IP地址和服务器建立HTTP连接的时间服务器接受连接请求后进行计算的时间网页内容通过HTTP协议传输到用户的时间在上图中,DNS域名解析时…

40个精美的作品网站设计案例欣赏(下篇)

对于网页设计师来说,制作一个作品集可能是一件非常有挑战的事情。为了吸引注意力,作品集必须展示出你的能力,这有点像制作简历,要让人们看到你所擅长的,突出的部分。如果你正想设计个人作品网页,下面这些案…

mysql展示表中信息_MySQL中数据表操作详解 - 用SHOW/ DESCRIBE语句显示数据表的信息_数据库技术_Linux公社-Linux系统门户网站...

使用MySQL,目前你可以在三种基本数据库表格式间选择。当你创建一张表时,你可以告诉MySQL它应该对于表使用哪个表类型。MySQL将总是创建一个.frm文件保存表和列定义。视表类型而定,索引和数据将在其他文件中存储。你能用ALTER TABLE语句在不同…

“历史上的今天”web网站

今天我们来做一个网站,历史上的今天,相信大家都不陌生,我们可以百度搜一下,有很多这样的网站。 看了上面的截图,我们来实现自己的,此网站是以一种时间轴的方式来实现的。看一下效果图,为了更好的…

浅谈服务器或网站被植入病毒代码的原因

一般来说,服务器或者网站被植入病毒代码有以下三种原因: 1、虚拟主机网站代码有问题,存在安全漏洞造成的。 如果服务器上大部分用户的网站都正常,只有少量用户网站被黑,那么就很可能是少量用户网站被黑的网站代码有问题…

服务器升级中不能修改,windows电脑显示无法完成更新,正在撤销更改_网站服务器运行维护...

如何查看windows电脑日志_网站服务器运行维护查看windows电脑日志的方法是:1、首先,打开控制面板;2、然后,找到【管理工具】选项,点击进入;3、最后,点击【事件查看器】选项,选择【打…

我设计的网站的分布式架构

互联网的网站和大部分企业管理软件一样都是使用B/S架构模型,但是大型的公共网站B/S架构会更加复杂,对架构人员的要求更高,今天我想在自己博客里聊聊我设计的网站的B/S技术架构。 不管是B/S架构的企业管理系统还是网站技术架构可以抽象为如下简…

JavaWeb基于Jsp+Servlet的动物领养网站(原创毕业设计项目)

项目类型:JAVA WEB项目项目名称:JavaWeb基于JspServlet的动物领养网站用户类型:双角色(管理员爱心人士)设计模式:JspServlet开发工具:Eclipse 数据库:MysqlNavicat数据库表&#xff…

基于Nginx的负载均衡网站架构

操作环境:VMware Fusion 操作系统:Centos6 实验架构设计图及实现: 实验说明: Nginx服务器作为Web前端,当接收到用户的Web访问请求时,将请求转发 给内部真正的WEB服务器。 Nginx具有两个网卡,一…

【原创】Javaweb篮球俱乐部网站(Web网站毕业设计)

JavaWeb技术开发,后端采用JspServlet。前端使用的是Bootstrap的一个网站模板。通过3种角色使用,实现了包括了球员信息管理、球队信息管理、赛事信息发布、赛事订阅等多个不同的模块。 项目类型:JavaWeb源码 用户类型:3个角色(管理…

【原创】基于Web的学习资料共享网(JavaWeb学习资料网站)

项目介绍:通过2种角色使用,实现了包括了学习资料发布、学习资料下载、搜索学习资料、用户管理等多个不同的模块。Javaweb后端采用JspServlet。前端使用的是Layui的一个网站模板。 项目类型:JavaWeb源码 用户类型:2个角色(管理员用…