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

2017-08-28 00:04 出处:360java.com 作者:360java  阅读()
今有如下需求: 现已实现的功能:Ajax实时读取数据库数据,显示倒计时功能。每秒读一次数据库。 待实现功能:出于性能方面考虑,不能这样做。但是界面上的倒计时功能也要体现出

  今有如下需求:

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

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

< >
最佳答案

  首先,非常感谢大家对此问题的关心。最终是一位同事帮忙解决的。目前这问题已经解决了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 到你的项目中。 

分享到:
本文标签: ASP.NET, ASP.NET Ajax, javascrip

相关文章

发表评论(共条评论)愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) java学习 360java 360java.com, All Rights Reserved.

苏ICP备16022210号