-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);

$dti3 以降の時間を %%H%%:%%M%%:%%S%% として表示したいのは、これが 24 時間未満の場合です。それ以外の場合は、日数だけをテキストで表示します。すなわち:

日付から 23 時間は「23:00:00」と表示されますが、25 時間は「1 日以上」、49 時間は「2 日以上」と表示されます。

これにはどこかで if else ステートメントが必要になると思いますが、私はJSコーダーではありません（まだ取り組んでいます！）ので、これを達成するための最良の方法はわかりません。

どんな助けでも大歓迎です、

どうもありがとう。

4

1 に答える 1

2

ここにいくつかの提案があります。

まず、この種のコードを開発するときは、PHP と JavaScript を完全に分離してください。それらについて同時に考えようとさえしないでください。2 つの言語は、お互いについて何も知りません。JavaScript コードは、ブラウザーで利用できるものだけを「見る」ことができます。それは PHP ではありません。

テスト ページのソースを表示すると、PHP が含まれていないことがわかります。PHPコードが生成するものは何ですか。そして、JavaScript コードを作成してデバッグするときに、それを見て考えなければならないのは、ブラウザーにダウンロードされた実際の Web ページであり、それを生成する PHP コードではありません。

次に、JavaScript を初めて使用する場合は、既存のコードを試して、過去の時刻を希望どおりにフォーマットすることから始めることを検討してください。私が最初に使用する時間フォーマット ライブラリのいくつかは、 moment.jsとtimeago jQuery プラグインです。これら両方のソース コードを調べて役立つヒントを見つけてください。どちらも目的どおりに動作しない場合は、どちらが近いかを確認し、必要に応じて変更してみてください。(他にも一見に値する同様のライブラリがあると思われます。これらは私がよく知っているほんの一部です。)

もちろん、このコードを自分で書いても問題はありませんが、他の人が同様の問題にどのように取り組んだかを知ることは非常に役立ちます。

ところで、過去の時間を「時間前」形式で秒まで表示する場合は、ページにコードを追加して、それらの時間を毎秒更新することをお勧めします。更新しなくても「4時間前」とか「3時間45分前」とかで済んでしまいますが、「2時間30分17秒前」と言うなら1時間前に更新したほうがいいです。リアルタイムでないと、人々には適切に見えません。(2:30:17 のような形式なのか、ここで使用した長い形式なのかについて話しているのではありません。強調するために長い形式を使用しました。秒を表示すると、これがリアルタイム表示であるという期待が大幅に高まります。)

ここで、JavaScript コードに関するいくつかのヒントを紹介します。

  • var変数を作成するすべての場所を前に置く必要があります。たとえば、関数s = ...の先頭の は である必要があります。それ以外の場合、変数はグローバル変数であり、それは望ましくありません。calcage()var s = ...s
  • newJavaScript の慣例では、コンストラクター (キーワードと共に使用することを意図した関数) でのみ先頭文字を大文字にします。変数名と通常の関数名はnamesLikeThisではなくを使用しNamesLikeThisます。これはルールではなく慣習にすぎませんが、それに従うことをお勧めします。
  • typeofは関数ではなく演算子であり、現代の慣習では のような式では括弧を省略しますtypeof(BackColor)=="undefined"。==代わりに、演算子の前後に空白を追加してください: typeof backColor == "undefined".
  • インデントをきれいにしてください。それは現在いたるところにあり、コードをたどるのが本来よりもはるかに難しくなっています。使用できる JavaScript コードの美化ツールは数多くありますが、作業を進めていくうちに適切に使用する習慣を身につけることができます。特に、インデントや同様の機能を適切にサポートするコード エディターを使用する場合は、まったく難しくありません。現在使用しているエディタは何ですか?
  • 関数putspan()は を使用しdocument.write()、この関数が呼び出される場所は他のセットアップ コードの途中に埋もれています。これを行うには、おそらくもっと良い方法があります。たとえば、これらの過去の時間の表示を 1 つではなく 2 つページに表示したい場合はどうすればよいでしょうか。
于 2013-06-18T23:00:31.420 に答える