经常我们会使用商品秒杀倒计时等时间计算功能，很多时候直接使用客户端时间计算，如果客户端时间不准，给客户带来一些困扰。
为此重新写了一个倒计时模块，顺便做个备案。
功能实现思路：
1、后端代码得到服务器当前时间与到期时间，然后计算出时间差秒数，传递到前台。
2、前端计算出天数、小时、分钟、秒，然后显示到前台，并每秒自动更新一次。
后端代码如下：
View Code
1 using System; 2 using System.Collections.Generic; 3 using System.Web; 4 using System.Web.UI; 5 using System.Web.UI.WebControls; 6 7 public partial class _Default : System.Web.UI.Page 8 { 9 public int timeStamp = 0; 10 protected void Page_Load(object sender, EventArgs e) 11 { 12 13 DateTime nowTime = DateTime.Now; 14 DateTime endTime = new DateTime(2013, 4, 5, 12, 45, 23); 15 16 TimeSpan ts1 = new TimeSpan(nowTime.Ticks); 17 TimeSpan ts2 = new TimeSpan(endTime.Ticks); 18 double ts = ts2.Subtract(ts1).TotalSeconds; 19 timeStamp = Convert.ToInt32(ts); 20 } 21 }
前端代码如下：
View Code
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 </head> 9 <body> 10 <form id="form1" runat="server"> 11 <div id="time"> 12 13 </div> 14 </form> 15 <script type="text/javascript"> 16 (function () { 17 var diffDate = < %= timeStamp % > ; 18 var _time = null; 19 20 function refTime() { 21 if (diffDate <= 0) { 22 document.getElementById("time").innerHTML = "已经过期"; 23 if (_time != null) { 24 clearInterval(_time); 25 } 26 return; 27 } 28 var days = Math.floor(diffDate / (24 * 3600)); 29 var leave1 = diffDate % (24 * 3600); 30 var hours = Math.floor(leave1 / (3600)); 31 var leave2 = leave1 % (3600); 32 var minutes = Math.floor(leave2 / (60)); 33 var leave3 = leave2 % (60); 34 var seconds = Math.round(leave3); 35 var _html = ""; 36 if (days > 0) { 37 _html += days + "天"; 38 } 39 if (hours > 0) { 40 _html += hours + "时"; 41 } 42 if (minutes > 0) { 43 _html += minutes + "分"; 44 } 45 _html += seconds + "秒"; 46 document.getElementById("time").innerHTML = _html; 47 diffDate--; 48 } 49 _time = setInterval(function () { 50 refTime() 51 }, 1000); 52 refTime(); 53 })(); 54 55 </script> 56 </body> 57 </html>