haiyangzhibing的专栏

摘要:最近做一个Web拍卖软件。拍卖最关的核心就是实时竞价,这里采用微软的ASP.NET SignalR来进行实时的显示竞价。

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

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

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

从服务器得到每一个商品的总秒数就不用再讲了,我们现在只关注客户端,我们的开发环境是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" onclick="getItembyID(‘@item.ItemID’)">Follow</button><button type="button" class="btn btn-danger" data-toggle="button" onclick="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>



如果前世五百次眸回,才换来今生的擦肩而过。

haiyangzhibing的专栏

相关文章:

你感兴趣的文章:

标签云: