zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    1442. Count Triplets That Can Form Two Arrays of Equal XOR
    1441. Build an Array With Stack Operations
    312. Burst Balloons
    367. Valid Perfect Square
    307. Range Sum Query
    1232. Check If It Is a Straight Line
    993. Cousins in Binary Tree
    1436. Destination City
    476. Number Complement
    383. Ransom Note
  • 原文地址:https://www.cnblogs.com/n2d07013/p/2959293.html
Copyright © 2011-2022 走看看