首页 新闻 会员 周边 捐助

急!!!求高手解答JavaScript实时显示Ajax获取的服务器时间的倒计时功能。

0
悬赏园豆:50 [已解决问题] 解决于 2012-05-10 17:05

  今有如下需求:

     现已实现的功能:Ajax实时读取数据库数据,显示倒计时功能。每秒读一次数据库。

     待实现功能:出于性能方面考虑,不能这样做。但是界面上的倒计时功能也要体现出“实时”性。所以客户端倒计时效果是实时变化的。目前提供的思路是:Ajax每15秒(这个时间可以自行设置)与数据库中的时间同步一次(目的减少服务器压力),但是客户端要用JavaScript来实时显示同步出来的服务器时间。请问js或jquery该怎么实现?或者哪位朋友有更好的建议?谢谢!

icyme的主页 icyme | 初学一级 | 园豆:77
提问于:2012-05-03 22:30
< >
分享
最佳答案
0

  首先,非常感谢大家对此问题的关心。最终是一位同事帮忙解决的。目前这问题已经解决了80%。现将关键代码贴上。(代码看着可能有点让你蛋疼,请谅解。)

前台:

<script type="text/javascript">

var pd, wan = "a", ini = 0, jian = 1;
var tian = 99999, miao = 99999, fen = 99999, shi = 99999;
var diji = 0;
function ExecuteTime() {
if (ini == 0) {
wan = CompetitionMobileWeb.CompetitionMobileDJS.GetTime().value;  //获取后台倒计时方法,并赋给一个变量
if (wan.indexOf("天") > 0) {
tian = parseInt(wan.split("离比赛结束还有:")[1].toString().split("天")[0].toString());
if (wan.indexOf("时") > 0) {
shi = parseInt(wan.split("天")[1].toString().split("时")[0].toString());
}
else {

}
fen = parseInt(wan.split("时")[1].toString().split("分")[0].toString());
miao = parseInt(wan.split("分")[1].toString().split("秒")[0].toString());
}
else {
if (wan.indexOf("时") > 0) {

shi = parseInt(wan.split("离比赛结束还有:")[1].toString().split("时")[0].toString());
fen = parseInt(wan.split("时")[1].toString().split("分")[0].toString());
miao = parseInt(wan.split("分")[1].toString().split("秒")[0].toString());
}
else {
if (wan.indexOf("分") > 0) {
fen = parseInt(wan.split("离比赛结束还有:")[1].toString().split("分")[0].toString());
miao = parseInt(wan.split("分")[1].toString().split("秒")[0].toString());
}
else {
if (wan.indexOf("秒") > 0) {
miao = parseInt(wan.split("离比赛结束还有:")[1].toString().split("秒")[0].toString());
}
}
}
}

var messageExceedTime = "比赛结束";
//调用时需加上命名空间
var message = CompetitionMobileWeb.CompetitionMobileDJS.GetTime().value;  //获取后台倒计时方法
//倒计时
document.getElementById("timeover").innerHTML = message;

if (message == messageExceedTime) {
return;
}

ini = ini + 1;
jian = 1;
diji++;
}
else {

if (miao - 1 < 0) {
if (fen == 99999) {
miao = 99999;
}
else {
miao = 59;
if (fen - 1 < 0) {
if (shi == 99999) {
fen = 99999;
}
else {
fen = 59;
if (shi - 1 < 0) {
if (tian == 99999) {
shi = 99999;
}
else {
shi = 23;
if (tian - 1 < 0) {
tian = 99999;
}
else {
tian = tian - 1;
}
}
}
else {
shi = shi - 1;
}
}
}
else {
fen = fen - 1;
}
}
}
else {
miao = miao - 1;
}

var tian1 = tian == 99999 ? "" : tian + "天";
var shi1 = shi == 99999 ? "" : shi + "时";
var fen1 = fen == 99999 ? "" : fen + "分";
var miao1 = miao == 99999 ? "" : miao + "秒";
//alert(shi1);
var bianliang = "离比赛结束还有:" + tian1 + shi1 + fen1 + miao1;

if (bianliang == "离比赛结束还有:") {
bianliang = "比赛结束";
}
document.getElementById("timeover").innerHTML = bianliang;
++ini;
if (ini == 6) {
ini = 0;
}

}
setTimeout("ExecuteTime()", 1000);
}

</script>

 

<body onload="ExecuteTime()">
<form runat="server" id="form1" >

<div id="timeover"></div>

</form>

</body>

 

后台:

protected void Page_Load(object sender, EventArgs e)
{

//CompetitionMobileDJS这个是你的页面名称,前台调用的时候需要这样使用: 命名空间.类名.方法名

//如  前台的这个 var message = CompetitionMobileWeb.CompetitionMobileDJS.GetTime().value;  
AjaxPro.Utility.RegisterTypeForAjax(typeof(CompetitionMobileDJS));  
if (!IsPostBack)
{

}
}

DateTime dtm;
static DateTime Endtime = DateTime.Now.AddSeconds(3610);
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
public string GetTime()
{
dtm = DateTime.Now;

if (dtm.CompareTo(Endtime) >= 0)
{
return "比赛结束";
}
else
{
TimeSpan ts = Endtime - dtm;
string returnvalue = string.Empty;
if (ts.Days > 0)
{
returnvalue += ts.Days.ToString() + "天";
}
if (ts.Hours >= 0)
{
returnvalue += ts.Hours.ToString() + "小时";
}
if (ts.Minutes >= 0)
{
returnvalue += ts.Minutes.ToString() + "分";
}
if (ts.Seconds >= 0)
{
returnvalue += ts.Seconds.ToString() + "秒";
}

return "离比赛结束还有:" + returnvalue;
}
}

 

此外,你需要引入Ajax.dll、AjaxPro.dll 到你的项目中。 

icyme | 初学一级 |园豆:77 | 2012-05-10 17:02
其他回答(4)
0

那种团购秒杀什么的都是Get请求过一次页面就在本地js上一直

setInterval了没必要15秒就和服务器对一次时间吧。。。反正计算机只有每5秒的平均才真正接近实际时间的1秒没必要搞那么复杂

收获园豆:15
Nature Q | 园豆:342 (菜鸟二级) | 2012-05-03 23:08

兄弟,这个对时间很有要求的,只能核对服务器时间,因为客户端时间是可以修改的。

支持(0) 反对(0) icyme | 园豆:77 (初学一级) | 2012-05-03 23:10
0

为什么要读数据库呐?客户端的时间能改,服务器时间他们改不了。后台方法里的取服务器时间,用ajax调用后台方法,不用读数据库。没压力。

收获园豆:5
自由用户 | 园豆:155 (初学一级) | 2012-05-04 08:22

好吧,兄弟说的正确,不用每次都读取数据库,数据库只读一次就可以。然后,ajax要实时同服务器通讯,这样服务器压力也不小吧?现在需求是每15秒与服务器时间同步一下,但是在客户端显示时间时,要“实时”显示,而这个实时效果我打算用js来实现。但是我不知道如何实现。

支持(0) 反对(0) icyme | 园豆:77 (初学一级) | 2012-05-04 08:30
0

没有必要这么频繁的和服务器对时,而且http不是对时的协议,不能保证时间上的准确性,至于说客户端改时间的问题,这个只需要在服务器端核对请求的时间就好了。一定要精准对时的话,那你需要用NTP。

收获园豆:10
sinhbv | 园豆:2579 (老鸟四级) | 2012-05-04 08:43
0

是只需要 打開頁面的時候,初始化一個倒計時就可以了。只需要提交的時候,再去和服務器比較。要小於等於服務器的時間。

收获园豆:15
無限遐想 | 园豆:3740 (老鸟四级) | 2012-05-04 09:33

老大,这个不需要提交什么数据,只做显示功能。而且必须要与服务器同步,  我们可以延长与服务器同步的间隔时间,比如说15秒同步一次,然后在这15秒内呢,客户端的倒计时仍能“正常”显示(每秒都变化),而不是“静止的”,过了15秒后再变化。(这种效果能否用js实现)。谢谢

支持(0) 反对(0) icyme | 园豆:77 (初学一级) | 2012-05-04 09:38

@Technology: 你倒計時 完了。不是要做處理嗎?不需要提交到服務器嗎?

支持(0) 反对(0) 無限遐想 | 园豆:3740 (老鸟四级) | 2012-05-04 09:41

@Technology: 你要15秒同步一次 是怕他15秒内就会有很大的误差么。setinterval settimeout的误差真心没那么大。。  小查了一下http://blog.chinabyte.com/a/2636162.html这个应该能解除你的顾虑

支持(0) 反对(0) Nature Q | 园豆:342 (菜鸟二级) | 2012-05-04 10:48
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册