-1

我使用一个小脚本来显示自给定日期时间值（从 PHP 查询传递）以来的时间量。

脚本如下：

<script language="JavaScript">
TargetDate = "<?php echo $dti3; ?>";
FinishMessage = "done"
BackColor = "white";
ForeColor = "black";
CountActive = true;
LeadingZero = true;
DisplayFormat = "%%D%% Days %%H%%:%%M%%:%%S%% ";
</script>
<script type="text/javascript"  language="JavaScript" src="time.js"></script>

和 time.js 是

function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero && s.length < 2)
  s = "0" + s;
 return  s;
 }

 function CountBack(secs) {
 if (secs < 0) {
 document.getElementById("cntdwn").innerHTML = FinishMessage;
 return;
 }
 DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
 DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
 DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
 DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

 document.getElementById("cntdwn").innerHTML = DisplayStr;
 if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

 function putspan(backcolor, forecolor) {
 document.write("<span id='cntdwn'></span>");
 }

if (typeof(BackColor)=="undefined")
 BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "#2A8827";
if (typeof(TargetDate)=="undefined")
 TargetDate = "12/31/2020 05:00:00";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% days, %%H%% hours, %%M%% minutes, %%S%% seconds.";
if (typeof(CountActive)=="undefined")
 CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "no data";
 if (typeof(CountStepper)!="number")
  CountStepper = +1;
if (typeof(LeadingZero)=="undefined")
 LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
 CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 1000;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
 CountBack(gsecs);

如果少于 24 小时，我想将自 $dti3 以来的时间显示为 %%H%%:%%M%%:%%S%%，否则仅显示带有一些文本的天数。IE：

自日期以来的 23 小时显示为：“23:00:00”，但 25 小时显示为：“超过一天”，49 小时显示为“超过两天”等...

我想这将需要一个 if else 语句，但我不是一个 JS 编码器（但 - 我正在努力！）所以我不确定实现这一目标的最佳方法。

任何帮助将非常感激，

非常感谢。

4

1 回答 1

2

这里有一些建议。

首先，当你开发这种代码时，将 PHP 和 JavaScript 完全分开。不要试图同时考虑它们。这两种语言对彼此一无所知。您的 JavaScript 代码只能“看到”浏览器中可用的内容，而不是 PHP。

对您的测试页面进行查看源代码，您将看到其中没有 PHP。什么是你的 PHP 代码生成的。这就是您在编写和调试 JavaScript 代码时应该关注和思考的问题——下载到浏览器的实际网页，而不是生成它的 PHP 代码。

接下来，如果您是 JavaScript 新手，您可能需要考虑从尝试一些现有代码开始，以按照您的意愿格式化过去的时间。我将开始使用的几个时间格式化库是moment.js和timeago jQuery 插件。研究这两个的源代码以获得有用的提示，如果没有一个完全符合您的要求，请查看哪个更接近并尝试根据您的需要进行修改。（可能还有其他类似的库也值得一看；这些只是我熟悉的几个。）

当然，自己编写这段代码也没有错，但它确实有助于了解其他人是如何解决类似问题的。

顺便说一句，如果您以“时间前”格式显示过去的时间到秒，那么您最好在页面中添加一些代码以每秒更新这些时间。如果不更新，您可以说“4 小时前”，也可以说“3 小时 45 分钟前”，但如果您说“2 小时 30 分钟 17 秒前”，则最好在实时，否则对人们来说看起来不正确。（我不是在谈论它的格式是像 2:30:17 还是我在这里使用的更长的形式——我使用更长的形式来强调。当你显示秒时，你会大大增加这是实时显示的期望。）

现在有一些关于 JavaScript 代码的提示。

  • 您需要将var创建变量的每个位置放在前面。例如，函数s = ...开头的calcage()应该是var s = .... 否则你的变量s是一个全局变量，你不希望这样。
  • JavaScript 中的约定是仅在构造函数（旨在与new关键字一起使用的函数）上使用首字母大写字母。变量名和普通函数名使用namesLikeThis，而不是NamesLikeThis。这只是一个惯例，而不是规则，但你最好遵守它。
  • typeof是一个运算符，而不是一个函数，现代惯例是省略表达式中的括号，如typeof(BackColor)=="undefined". 相反，在==运算符周围添加一些空格：typeof backColor == "undefined".
  • 请清理你的缩进。它现在到处都是，使代码更难遵循。您可以使用许多 JavaScript 代码美化器，或者只是养成在进行过程中正确使用的习惯。这一点都不难，尤其是如果您使用对缩进和类似功能提供良好支持的代码编辑器。你现在用什么编辑器？
  • 您的putspan()函数使用document.write()，并且调用此函数的位置隐藏在其他一些设置代码的中间。可能有更好的方法来做到这一点。例如，如果您想在页面中显示两个过去时间，而不仅仅是一个，该怎么办？
于 2013-06-18T23:00:31.420 回答