您的位置：首页 > Web前端 > JavaScript

asp.net+javascript倒计时

2013-12-22 21:18 405 查看

asp.net+javascript倒计时

经常我们会使用商品秒杀倒计时等时间计算功能，很多时候直接使用客户端时间计算，如果客户端时间不准，给客户带来一些困扰。

为此重新写了一个倒计时模块，顺便做个备案。

功能实现思路：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航