拍卖倒计时

总结：最近进行的一项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" 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>