倒计时是我们生活中比不可少的,尤其是搞程序开发的,涉及到电子商务的。都有倒计时的这个技术,首先我给大家分享一下我常常用的倒计时吧:
一、 用ajax写倒计时,ajax写倒计时,大家会发现一个确定就是他不停的想服务器发送请求,如果多了的话,就会对服务器施加压力, 大家如果要看看代码,我可以提供个大家参考,这是vs2005里面的,我以前也讲过vs2005怎么利用ajax不用安装,大家也可以去看看vs005不安装ajax一样用ajax , 这是前面lianxi.aspx里面的:
<div>
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upnl" runat="server">
<ContentTemplate>
<p>
<font>剩余时间:</font><span>00</span>天<asp:Label ID="lblHours" runat="server"></asp:Label>:<asp:Label
ID="lblMinutes" runat="server"></asp:Label>:<asp:Label ID="lblSeconds" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="timer" runat="server" Interval="1000" OnTick="Timer_Tick" />
</div>
后面lianxi.aspx.cs
protected void Timer_Tick(object sender, EventArgs e) { CountdownSpan = endTime - DateTime.Now;//这是服务器端得到的剩余时间 if (CountdownSpan.TotalSeconds > 0) { // lblDays.Text = CountdownSpan.Days.ToString(); lblHours.Text = CountdownSpan.Hours < 10 ? "0" + CountdownSpan.Hours.ToString() : CountdownSpan.Hours.ToString(); lblMinutes.Text = CountdownSpan.Minutes < 10 ? "0" + CountdownSpan.Minutes.ToString() : CountdownSpan.Minutes.ToString(); lblSeconds.Text = CountdownSpan.Seconds < 10 ? "0" + CountdownSpan.Seconds.ToString() : CountdownSpan.Seconds.ToString(); } }
二、 用js写的时间倒计时js文件里面的
function ShowTime() { var nowtime=new Date(); //客户端的开始时间 $(".hddTime").each(function() { var s = $(this).val(); //得到结束时间 var d = new Date(Date.parse(s.replace(/-/g, "/"))); var ticks = parseInt((d.getTime()-nowtime.getTime())/1000); var hh = parseInt(ticks/3600); var mm = parseInt((ticks%3600)/60); var ss = ticks % 60; if (isNaN(ss)) { ss = 00; } if (isNaN(mm)) { ss = 00; } if (isNaN(hh)) { ss = 00; } if (hh >= 0) { $("#hh").text(hh); } if (mm >= 0) { $("#mm").text(mm); } if (ss >= 0) { $("#ss").text(ss); } }) } ShowTime() var sh; sh=setInterval(ShowTime,1000);
前台调用js
<div id="zhensale" runat="server"> <input type="hidden" class="hddTime" id="hddTime" runat="server" /> //服务器传过来的结束时间。 <p id="hh"> 00 </p> <span>小时</span> <p id="mm"> 00 </p> <span>分</span> <p id="ss"> 00 </p> <span class="label">秒</span> </div> </div>
缺点 :这个时间,由于当前时间是直接获取你自己电脑上的时间,这样的话,会使时间根据你的电脑的时间改动而影响服务器要的结果,这是肯定是不行的。
三、 第三种,也就是这里面的最重要的一种,首先我们将服务器的剩余时间传到前台客户端。这个,都不用说了撒,肯定很简单的。我这里是把服务器的当前时间和结束时间传过来的,其实都是一样的原理。这样,再你怎么改变你电脑的时间,对他都没有影响了,是不是。
代码参考:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>倾颜戏羽倒计时</title> <style type="text/css"> * { margin: 0; padding: 0; } #content { width: 300px; margin: 0 auto; padding: 10px; background: #eee; border: 1px solid #999; } #content p span { color: red; font: bold 20px Arial; } #content p a { font: 12px/23px '宋体'; color: #888; } .div1 { display: none; } </style> </head> <body> <div id="content"> <h1> 限时抢购啦!</h1> <p> 还剩<span id="times">20小时23分8秒</span></p> </div> <input id="endtime" value="2011/4/06 12:20:12" visible="false" /> //开始时间,我这里写的是死的,你可以从服务处传过来 <input id="startime" value="2011/4/03 12:20:12" visible="false" /> //结束时间也是和开始时间一样的。 <script language="JavaScript"> var endtime = new Date(document.getElementById("endtime").value); var nowtime = new Date(document.getElementById("startime").value); var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000); //把剩余时间转化成秒。 function fresh() { leftsecond--; d = parseInt(leftsecond / 3600 / 24); h = parseInt((leftsecond / 3600) % 24); m = parseInt((leftsecond / 60) % 60); s = parseInt(leftsecond % 60); document.getElementById("times").innerHTML = h + "小时" + m + "分" + s + "秒"; if (leftsecond <= 0) { document.getElementById("times").innerHTML = "抢购已结束"; clearInterval(sh); } } fresh() var sh; sh = setInterval(fresh, 1000); </script> </body> </html>