jq实现竞拍倒计时
1jq的效果代码
//全局变量用于存储当前时间 var nows; function rightZeroStr(v) { if (v < 10) { return "0" + v; } return v + ""; } //计时 每10秒中为当前时间+10 setInterval(function () { nows =parseInt(nows) + 10; }, 10); //ajax.post 向服务器请求得到当前的服务器时间 function syncTime() { var url = "Handler/Seckil.ashx?t=" + new Date().getTime(); $.post(url, { action: "now" }, function (response) { nows = response.nows || new Date().getTime(); }); } //倒计时 参数arg存放倒计时的标签名称 id 或者class function lxfEndtime(arg) { $(arg).each(function () { var lxfday = $(this).attr("lxfday"); //用来判断是否显示天数的变量 var endtime = new Date($(this).attr("endtime")).getTime(); //取结束日期(毫秒值) var nowtime = nows; //今天的日期(毫秒值) var starttime = new Date($(this).attr("starttime")).getTime(); //开始时间和当时时间作比较 判断是开始 技术还是正在进行中 if (starttime >= nowtime) { $(this).html("活动即将开始") } if (endtime <= nowtime) { $(this).html("活动已经结束"); //如果结束日期小于当前日期就提示过期啦 } if (starttime < nowtime && endtime > nowtime) { var youtime = endtime - nowtime; //还有多久(毫秒值) var seconds = youtime / 1000; var minutes = Math.floor(seconds / 60); var hours = Math.floor(minutes / 60); var days = Math.floor(hours / 24); var CDay = days; var CHour = CDay * 12 + hours % 24; var CMinute = minutes % 60; var CSecond = Math.floor(seconds % 60); //"%"是取余运算，可以理解为60进一后取余数，然后只要余数。 if ($(this).attr("lxfday") == "no") { $(this).html('<span class="countdown" millseconds="1188163453"> <strong class="tcd-h">' + CHour + '</strong>时<strong class="tcd-m">' + CMinute + '</strong>分 <strong class="tcd-s">' + CSecond + '</strong>秒 </span>'); //输出没有天数的数据 } else { $(this).html('<span class="countdown" millseconds="1188163453"><strong class="tcd-d">' + days + '</strong><b>天</b> <strong class="tcd-h">' + CHour + '</strong> <i>:</i> <strong class="tcd-m">' + CMinute + '</strong><i>:</i> <strong class="tcd-s">' + CSecond + '</strong> </span>'); //输出有天数的数据 } } }); setTimeout("lxfEndtime('" + arg + "')", 1000); };
2用到的handler
<%@ WebHandler Language="C#" Class="Seckil" %> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Text; using System.Data; public class Seckil : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/json"; string action = context.Request["action"]; switch (action) {case "now": now(context); return; } context.Response.Write("Hello World"); }public void now(HttpContext context) { Int64 retval = 0; DateTime st = new DateTime(1970, 1, 1); TimeSpan t = (DateTime.Now.ToUniversalTime() - st); retval = (Int64)(t.TotalMilliseconds + 0.5); context.Response.Write("{\"nows\":\"" + retval + "\"}"); } public bool IsReusable { get { return false; } } }
3前台页面代码
<html>
<script src="js/time.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { syncTime(); lxfEndtime(".box font"); }); </script>
<body>
<font color=\"#FF0000\" endtime=\"' + dataitem.EndDate + '\" starttime=\"' + dataitem.StartDate + '\" lxfday=\"no\"></font>
</body>
</html>
