• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

清宇诺诺

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

秒杀倒计时的一个效果()

 
//定义k=1,
<li class="special" start="@items.Product.SpecialBeginTime" end="@items.Product.SpecialEndTime" show_id="colock@(k)">
                    <a report-eventid="MHome_HandSeckill" report-eventparam="" page_name="index" href="javascript:;" class="seckill-link J_ping">
                        <img src="@items.Product.MainImage" class="seckill-photo" border="0" width="100%">
                        <p>@(items.Product.Title.GetSeparateSubString() > 13 ? items.Product.Title.Substring(0, 13) + "..." : items.Product.Title)</p>
                    </a>
                    <div class="colockbox seckill-timer" id="colock@(k++)" style="font-size: 10px;">
                        <p class="hour seckill-time">00</p> <p class="txt">时</p>

                        <p class="minute seckill-time">00</p> <p class="txt">分</p>
                        <p class="second seckill-time">00</p> <p class="txt">秒</p>
                    </div>
                    <p><font style="color: red">¥@((items.Product.Price - items.Product.KnockAmount).ToString("F2"))</font><s style="font-size: 10px;">¥@items.Product.Price.ToString("F2")</s>
                    </p>
                    <p><input class="input23456" type="button" value="即将开始"></p>
                </li>

  //即将秒杀
    $(function () {
        $(".special").each(function () {
            var start_time = $(this).attr("start");
            var end_time = $(this).attr("end");
            var show_id = $(this).attr("show_id");
            var now_time = new Date().getTime();
            countDown(now_time, start_time, "#" + show_id);
        });

    });
    function countDown(start_time, end_time, id) {
        var day_elem = $(id).find('.day');
        var hour_elem = $(id).find('.hour');
        var minute_elem = $(id).find('.minute');
        var second_elem = $(id).find('.second');
        var start_time = new Date(start_time).getTime();
        var end_time = new Date(end_time).getTime(),//月份是实际月份-1
            sys_second = (end_time - start_time) / 1000;
        var timer = setInterval(function () {
            if (sys_second > 1) {
                sys_second -= 1;
                var day = Math.floor((sys_second / 3600) / 24);
                var hour = Math.floor((sys_second / 3600) % 24) + day * 24;
                var minute = Math.floor((sys_second / 60) % 60);
                var second = Math.floor(sys_second % 60);
                $(hour_elem).text(hour < 10 ? "0" + hour : hour);//计算小时
                $(minute_elem).text(minute < 10 ? "0" + minute : minute);//计算分钟
                $(second_elem).text(second < 10 ? "0" + second : second);//计算秒杀
            } else {
                clearInterval(timer);
            }
        }, 1000);
    }

样式自己可以调整,本例说的就是可以同时多个倒计时一起运行。仅做记录。

posted on 2015-11-13 15:28  清宇诺诺  阅读(318)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3