商品详情页及秒杀倒计时功能

详情页进入：就是前端点击链接，链接中有{goodsId}作为参数，后端@PathVarible 拿到这个id，然后去数据库查询对应的商品信息，并显示的一个功能。

这里有一个比较重要的就是秒杀倒计时功能：

后端获取秒杀开始时间和结束时间，以及系统当前时间，并定义剩余时间变量和秒杀状态，传给前端。

    @RequestMapping(value = "/to_detail2/{goodsId}",produces = "text/html") // 前端传入的参数 goodsId
    @ResponseBody
    public String detail2(HttpServletRequest request,HttpServletResponse response,Model model,MiaoshaUser user,
                         @PathVariable("goodsId") Long goodsId){//通过注解@PathVariable获取路径参数
        /*取缓存*/
        String html = redisService.get(GoodsKey.getGoodsDetail,""+goodsId,String.class);
        if (!StringUtils.isEmpty(html))
        {
            return html;
        }
        //没有缓存，渲染页面
        /*先将user 传进去 用来判断是否登录*/
        model.addAttribute("user",user);
        /*根据传入的Id 通过service 拿到对应的Good信息*/
        GoodsVo goods = goodsService.getGoodsById(goodsId);
        model.addAttribute("goods",goods);

        long startTime = goods.getStartDate().getTime();
        long endTime = goods.getEndDate().getTime();
        long nowTime = System.currentTimeMillis();/* 拿到现在时间的毫秒值*/
        /**这里要做一个秒杀时间的判断 秒杀开始 秒杀结束 秒杀进行
         * */
        int miaoshaStatus = 0;/*用该变量来表示 秒杀的状态 0 表示秒杀未开始 1 开始 2 结束*/
        int remainSeconds = 0; /*表示剩余时间 距离秒杀开始的时间*/
        if (nowTime<startTime){//秒杀未开始
            miaoshaStatus = 0;
            remainSeconds = (int)((startTime-nowTime)/1000);//注意此时是 毫秒值 要除以1000
        }else if (endTime<nowTime){//秒杀结束
            miaoshaStatus = 2;
            remainSeconds = -1;
        }else {//秒杀进行中
            miaoshaStatus = 1;
            remainSeconds = 0;
        }
        model.addAttribute("remainSeconds",remainSeconds);
        model.addAttribute("miaoshaStatus",miaoshaStatus);
//        return "goods_detail";
    }

前端定义个remainSecode 获取后端传过来的值，通过这个值来判断是否开始秒杀，结束，还是进行中，

并在前端定义个方法：没开始的时候 按钮，不可点击，作倒计时，开始后显示按钮，结束也不可点按钮

function countDown() {
    var remianSeconds =$("#remainSeconds").val();
    var timeout;//定义一个timeout 保存Timeout 值
    if (remianSeconds>0){//秒杀未开始
        $("#buyButton").attr("disabled",true);/*还没开始的时候按钮不让点*/
        /*且做一个倒计时*/
        timeout=setTimeout(function () {//setTimeout 为时间到了之后执行 该函数
            $("#countDown").text(remianSeconds-1);//将显示中的值 -1
            $("#remainSeconds").val(remianSeconds-1);// remianSeconds 值减一
            countDown();//在调用该方法 实现循环
        },1000)
    }else if (remianSeconds == 0){//秒杀进行中
        $("#buyButton").attr("disabled",false);
        //当remainSeconds =0
        clearTimeout(timeout);//取消timeout 代码执行
        $("#miaoshaTip").html("秒杀进行中！")//修改其中的内容
    } else {//秒杀结束
        $("#buyButton").attr("disabled",true);
        $("#miaoshaTip").html("结束！！！")//修改其中的内容
    }
}

未开始时有个CountDown反方，有个timefuntion，1000毫秒，即每过一秒，将remianSecond 值减一，并设置到显示text中，然后在调用coutDown,即每过一秒判断一次，显示一次。