jQueryは、現在の日付時間に基づいて要素を強調表示します-jsチュートリアル-php.cn

jQueryは、現在の日付時間に基づいて要素を強調表示します

Lisa Kudrow

リリース： 2025-02-26 08:42:11

オリジナル

712 人が閲覧しました

jQueryは、現在の日付時間に基づいて要素を強調表示します

これは、現在の日付と時刻に基づいて選択されたクラスを要素に追加するために書いた少しのjQuery関数です（日付タイムスタンプを使用）。以下のスクリーンショットに示すように、現在表示されている現在のセッションを設定することです。 jQueryは、現在の日付時間に基づいて要素を強調表示します

$。dateTimeHighlightnow（）function

<span>/**
</span><span>  * $.dateTimeHighlightNow()
</span><span>  * Author: Sam Deering
</span><span>  * Adds/removes a selected class on elements based on the current date and time.
</span><span>  * usage: $('.program p').dateTimeHighlightNow();
</span><span>  */
</span>jQuery<span>.fn.dateTimeHighlightNow = function()
</span><span>{
</span>    <span>return this.each(function()
</span>    <span>{
</span>        <span>var datetimestamp = Math.round(new Date().getTime() / 1000)
</span>            elem <span>= $(this),
</span>            start <span>= elem.attr('start'),
</span>            finish<span>= elem.attr('finish');
</span>
            <span>log('datetimestamp = '+datetimestamp);
</span>
        <span>if (start < datetimestamp && finish > datetimestamp)
</span>        <span>{
</span>            elem<span>.addClass('selected');
</span>            <span>log(elem);
</span>        <span>}
</span>        <span>else
</span>        <span>{
</span>            elem<span>.removeClass('selected');
</span>        <span>}
</span>
    <span>});
</span><span>};</span>

ログイン後にコピー

使用法：

<span>$('.program p').dateTimeHighlight();</span>

ログイン後にコピー

あなたのHTMLコードは次のように見えるはずです： jQueryは、現在の日付時間に基づいて要素を強調表示します

さらに使用することは、自動更新のために1分（またはそれ以上）ごとにイベントを実行することができます。

<span>/* monitor for auto change of current active session based on date/time */
</span><span>setInterval(function()
</span><span>{
</span>    <span>//run every minute
</span>    <span>$('.program p').dateTimeHighlight();
</span><span>}, 60000);</span>

ログイン後にコピー

さらにさらに考え

PHPタイムスタンプはサーバー側で実行されます（サーバーシステムクロック）。

jQueryハイライトエフェクトを使用するには、最初にJQueryライブラリをHTMLファイルに含める必要があります。その後、「ハイライト」効果を備えた.effect（）メソッドを使用できます。この方法では、効果の名前、オプションオブジェクト、および効果の持続時間の3つのパラメーターが必要です。たとえば、ID「MyDiv」でDIVを強調表示するには、次のコードを使用します。これにより、divを3秒間ハイライトします。

jqueryのハイライト効果の色を変更できますか？オプションオブジェクトの色オプション。たとえば、ハイライトカラーを赤に変更するには、次のコードを使用します。

$（ "＃mydiv"）。effect（ "highlight"、{color： "＃ff0000"}、3000）;

.stop（）メソッドを使用して、ハイライト効果を終了する前にハイライト効果を停止するにはどうすればよいですか？このメソッドは、ClearQueueパラメーターとJumptoendパラメーターの2つのパラメーターを使用します。 Clearqueueがtrueに設定されている場合、キュー内のすべてのアニメーションが削除されます。 JumptoendがTrueに設定されている場合、現在のアニメーションはすぐに完了します。たとえば、ID「myDiv」を備えたDIVのハイライト効果を停止するには、次のコードを使用します：

$（ "＃mydiv"）。 🎜>複数の要素のハイライト効果を一度に使用できますか？

はい、クラスセレクターまたは.each（）メソッドを使用して、複数の要素のハイライト効果を一度に使用できます。たとえば、クラスの「ハイライト」ですべてのDIVを強調表示するには、次のコードを使用します。

ハイライトエフェクトを繰り返すにはどうすればよいですか？

SetInterval関数を使用して、ハイライト効果を繰り返すことができます。この関数は、実行する関数とミリ秒単位での時間間隔の2つのパラメーターを取ります。たとえば、5秒ごとにID「myDiv」を繰り返してdivのハイライト効果を作成するには、次のコードを使用します。）.effect（ "highlight"、{}、3000）;
}、5000）;

他の効果でハイライト効果を使用できますか？

はい、それらを一緒にチェーンすることで、他の効果とともにハイライト効果を使用できます。たとえば、ID「myDIV」を使用してDIVにハイライト効果とバウンス効果を使用するには、次のコードを使用します。 }、3000）.effect（ "Bounce"、{}、3000）;

Hoverのハイライト効果をどのように使用できますか？ .hover（）メソッドを使用して、ホバーの効果を強調表示します。このメソッドは、2つの機能をパラメーターとして使用します。1つは、マウスが要素に入るとき、もう1つはマウスが要素を離れるときです。たとえば、マウスがその上に浮かんだときにID「myDiv」を備えたDIVのハイライト効果を使用するには、次のコードを使用します。 { $（this）.effect（ "highlight"、{}、3000）;

}）;

クリックにハイライト効果を使用できますか？

はい、.click（）メソッドを使用して、クリックのハイライト効果を使用できます。このメソッドは、要素がクリックされると実行されるパラメーターとして関数を採用します。たとえば、ID「myDiv」をクリックするとDIVにハイライト効果を使用するには、次のコードを使用します。 🎜> $（this）.effect（ "highlight"、{}、3000）;

}）;

フォーム入力のハイライト効果を使用するにはどうすればよいですか？

.focus（）および.blur（）メソッドを使用して、フォーム入力のハイライト効果を使用できます。 .focus（）メソッドは、入力フィールドがフォーカスを取得するとトリガーされ、.blur（）メソッドは、入力フィールドがフォーカスを失ったときにトリガーされます。たとえば、ID「MyInput」を使用して入力フィールドにハイライト効果を使用するには、次のコードを使用します。（this）.effect（ "highlight"、{}、3000）;
}） "＃ff0000"}、3000）;
}）;