zoukankan      html  css  js  c++  java
  • 秒杀倒计时的一个效果()

     
    //定义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);
        }

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

  • 相关阅读:
    Debate
    图形算法
    OpenGL Notes
    How to Write an Ethics Paper
    Thesis
    addWindowListener -> WindowAdapter -> windowClosing
    Thesis
    Bootcamp: An error occurred while partitioning the disk
    What Is XML Schema
    What Is XML
  • 原文地址:https://www.cnblogs.com/WZH75171992/p/4962279.html
Copyright © 2011-2022 走看看