拍卖倒计时

it2025-08-09  21

      总结:最近进行的一项Web拍卖软件。核心拍卖最关键的是实时竞价,这里使用微软的 ASP.NET SignalR  要显示实时竞价。

                 类似于京东的夺宝岛,淘宝的拍卖,每个商品都有自己的倒计时,和我做这个拍卖的倒计时的原理和思路是一样的

                 1. server端 得到   离开拍或者结束的 TotalSecond(总秒数)

                 2. client  得到总秒数,利用javascript 里面的 setInterval 每秒进行递减,直到减到0为止

 

                  从server得到每个商品的总秒数就不用再讲了。我们如今仅仅关注client,我们的开发环境是 Asp.net Mvc5

                  我直接粘代码

              

     @{ ViewBag.Title = "List Item"; int salesId = ViewBag.SalesID; } @model IEnumerable<Auction.ViewModels.VMB_Item> <div class="row"> <div class="col-md-12"> <div id="itemListTable"></div> <div class="row"> @foreach (var item in Model) { <div class="col-xs-3" style="margin-top:5px;margin-left:5px"> <div class="container" style="text-align:center"> <hr /> <div class="time-item"> <span id=@("day_show"+item.ItemID)>0 day</span> <strong id=@("hour_show" + item.ItemID)>0 :</strong> <strong id=@("minute_show" + item.ItemID)>0 :</strong> <strong id=@("second_show" + item.ItemID)>0 </strong> </div> <button type="button" class="btn btn-danger" data-toggle="button" οnclick="getItembyID('@item.ItemID')">Follow</button> <button type="button" class="btn btn-danger" data-toggle="button" οnclick="addWatchItem('@item.ItemID')">WATCH</button> </div> </div> <script type="text/javascript"> ///倒计时 $(function () { var totalSeconds = @((item.EndTime-DateTime.Now).TotalSeconds); var intDiff = parseInt(totalSeconds);//倒计时总秒数量 timer(intDiff,@item.ItemID); }); </script> } </div> </div> </div> <script type="text/javascript"> function timer(intDiff,itemid) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0;//时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; $("#day_show"+itemid).html(day + " day"); $('#hour_show'+itemid).html('<s id="h"></s>' + hour + ':'); $('#minute_show'+itemid).html('<s></s>' + minute + ':'); $('#second_show'+itemid).html('<s></s>' + second + ''); intDiff--; }, 1000); } </script>

                

   



版权声明:本文博客原创文章,博客,未经同意,不得转载。

转载于:https://www.cnblogs.com/bhlsheji/p/4734504.html

最新回复(0)