高并发秒杀项目——商品详情页高并发秒杀项目

高并发秒杀项目——秒杀倒计时

- 秒杀倒计时
- 前端页面处理

我们已经实现秒杀商品的列表页，当想要查看具体的秒杀信息时，点击每一个“详情”，就可以展现商品的详情页面以及秒杀倒计时。 【高并发秒杀项目——商品详情页】
秒杀倒计时获取了商品的秒杀开始时间和结束时间，如果秒杀没有开始，那么计算还剩多少时间开始

@RequestMapping("/to_detail/{goodsId}") public String detail(Model model, MiaoshaUser user, @PathVariable("goodsId") long goodsId) { model.addAttribute("user", user); GoodsVo goods = goodsService.getGoodsVoByGoodsId(goodsId); model.addAttribute("goods", goods); //转化为毫秒 long startAt = goods.getStartDate().getTime(); long endAt = goods.getEndDate().getTime(); long now = System.currentTimeMillis(); int miaoshaStatus = 0; //秒杀状态 int remainSeconds = 0; //距离开始秒杀还有多少秒if (now < startAt){//秒杀还没开始，倒计时 miaoshaStatus = 0; remainSeconds = (int)((startAt - now)/1000); }else if (now > endAt){ //秒杀结束 miaoshaStatus = 2; remainSeconds = -1; }else {//秒杀中 miaoshaStatus = 1; remainSeconds = 0; } model.addAttribute("miaoshaStatus", miaoshaStatus); model.addAttribute("remainSeconds", remainSeconds); return "goods_detail"; }

这里定义一个状态miaoshaStatus来表示一个秒杀的状态，0代表秒杀还未开，1代表秒杀正在进行，2代表秒杀已经结束，秒杀还未开始的情况还要计算出倒计时，然后将miaoshaStatus和remainSeconds传到前端页面。
前端页面处理将获取到的miaoshaStatus和remainSeconds（即秒杀状态和剩余时间变量）传到前端页面。定义一个属性来接收remainSecode ，并定义标签判断秒杀的状态，通过这个值来显示是否开始秒杀，秒杀正在进行中，以及秒杀结束。

秒杀开始时间 :if="${miaoshaStatus eq 0}">秒杀倒计时：="countDown" th:text="${remainSeconds}">秒 :if="${miaoshaStatus eq 1}">秒杀进行中 :if="${miaoshaStatus eq 2}">秒杀已结束

秒杀按钮需要做特别处理，控制秒杀按钮的的可以点击与不可点击两种情况，没开始的时候按钮，不可点击，开始后显示按钮，此时可以点击，但是结束也不可点击。并且从倒计时状态到正在进行秒杀状态的时候要动态切换文案。

$(function () { countDown(); }); function countDown() { var remainSeconds = $("#remainSeconds").val(); //在隐藏域中取 var timeout; if (remainSeconds > 0){ //秒杀还没开始，倒计时按钮不能点 $("#buyButton").attr("disabled", true); timeout = setTimeout(function () { $("#countDown").text(remainSeconds - 1); //input标签用的是th:value文案随着改 $("#remainSeconds").val(remainSeconds - 1); //span标签用的是th:text countDown(); //不断回调countDown方法 }, 1000); //过1秒之后，setTimeout就会执行 }else if(remainSeconds == 0){//秒杀进行中 $("#buyButton").attr("disabled", false); if (timeout){ clearTimeout(timeout); //自带的清除函数 } $("#miaoshaTip").html("秒杀进行中"); //等到remainSeconds减到0时，改文案 }else { //秒杀已经结束 $("#buyButton").attr("disabled", true); $("#miaoshaTip").html("秒杀已结束"); } }

效果