JQuery Highlight -Element basierend auf dem aktuellen Datumszeitpunkt

Dies ist eine kleine JQuery -Funktion, die ich geschrieben habe, um einem Element, das auf dem aktuellen Datum und Uhrzeit basiert, eine ausgewählte Klasse hinzuzufügen (mit dem Zeitstempel des Datums). Die Idee ist, eine aktuelle Sitzung festzulegen, die derzeit angezeigt wird, wie im folgenden Screenshot gezeigt.

$. DateTimeHighlightNow () Funktion

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

Verwendung:

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

Ihr HTML -Code sollte ungefähr so ​​aussehen: Eine weitere Verwendung könnte darin bestehen, das Ereignis alle 1 Minute (oder so) für die automatische Aktualisierung durchzuführen:

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

Noch weitere Gedanken

• PHP -Zeitstempel wird auf der Serverseite ausgeführt (Ihre Server -Systemuhr).
• JavaScript-Zeitstempel wird auf der clientseitigen (Ihre PC-Systemuhr) ausgeführt.
• Eine weitere Überprüfung, um die Zeitzoneneinstellungen der Clients in die Server umzuwandeln, um die aktuelle Sitzung hervorzuheben (dies ist etwas, das ich in naher Zukunft implementieren kann, also bleiben Sie darauf auf dem Laufenden).

häufig gestellte Fragen (FAQs) zu JQuery Highlight Effect

Wie kann ich den JQuery -Highlight -Effekt verwenden, um ein bestimmtes Element auf meiner Webseite hervorzuheben? Danach können Sie die .effect () -Methode mit dem „Highlight“ -Effekt verwenden. Diese Methode erfordert drei Parameter: den Namen des Effekts, das Optionsobjekt und die Dauer des Effekts. Um beispielsweise eine DIV mit der ID „myDiv“ hervorzuheben, verwenden Sie den folgenden Code:

$ ("#mydiv"). Effekt ("Highlight", {}, 3000);
Dies wird die DIV für 3 Sekunden hervorheben.

Kann ich die Farbe des Highlight -Effekts in jQuery ändern? Die Farboption im Optionsobjekt. Um beispielsweise die Highlight -Farbe in Rot zu ändern, würden Sie den folgenden Code verwenden:

$ ("#mydiv"). Effekt ("Highlight", {Farbe: "#ff0000"}, 3000);

Wie kann ich den Highlight -Effekt stoppen, bevor er beendet ist? Diese Methode erfordert zwei Parameter: den Parameter Clearqueue und den Parameter Jumptoend. Wenn ClearQueue auf True eingestellt ist, werden alle Animationen in der Warteschlange entfernt. Wenn Jumptoend auf True eingestellt ist, wird die aktuelle Animation sofort abgeschlossen. Um beispielsweise den Highlight -Effekt auf eine DIV mit der ID „mydiv“ zu stoppen, würden Sie den folgenden Code verwenden:

$ ("#mydiv"). Stop (wahr, wahr);

Kann ich den Highlight -Effekt auf mehrere Elemente gleichzeitig verwenden? Um beispielsweise alle Divs mit der Klasse „Highlight“ hervorzuheben, verwenden Sie den folgenden Code:

$ (". Highlight"). Effekt ("Highlight", {}, 3000);

Wie kann ich den Highlight -Effekt wiederholen? Diese Funktion erfordert zwei Parameter: die Funktion, die ausgeführt wird, und das Zeitintervall in Millisekunden. Um beispielsweise den Highlight -Effekt auf eine DIV mit der ID „myDiv“ alle 5 Sekunden zu erzielen, verwenden Sie den folgenden Code:

setInterval (function () {
$ ("#mydiv". ) .effect ("Highlight", {}, 3000);
}, 5000);

Kann ich den Highlight -Effekt mit anderen Effekten verwenden?

Ja, Sie können den Highlight -Effekt mit anderen Effekten verwenden, indem Sie sie miteinander verketten. Um den Highlight -Effekt und den Bounce -Effekt auf eine DIV mit der ID „MyDiv“ zu verwenden, verwenden Sie den folgenden Code:

$ ("#mydiv"). Effekt ("Highlight", { }, 3000) .effect ("Bounce", {}, 3000); Auswirkung auf die Schwebefläche unter Verwendung der .hover () -Methode. Diese Methode nimmt zwei Funktionen als Parameter an: eine für die, wenn die Maus in das Element eingeht und eine, wenn die Maus das Element verlässt. Um beispielsweise den Highlight -Effekt auf eine DIV mit der ID „mydiv“ zu verwenden, wenn die Maus über sie hinweg schwebt, würden Sie den folgenden Code verwenden:

$ ("#mydiv"). Hover (Funktion () () () () () () () {
$ (this) .effect ("Highlight", {}, 3000);

Ja, Sie können den Highlight -Effekt auf Klicken mit der Methode .click () verwenden. Diese Methode nimmt eine Funktion als Parameter an, die ausgeführt wird, wenn das Element geklickt wird. Um beispielsweise den Highlight -Effekt auf ein DIV mit der ID „mydiv“ zu verwenden, wenn sie klicken, verwenden Sie den folgenden Code:

$ ("#mydiv"). Click (function () {

$ (this) .effect ("Highlight", {}, 3000);
Sie können den Highlight -Effekt auf Formulareingabe verwenden, indem Sie die Methoden .focus () und .blur () verwenden. Die .focus () -Methode wird ausgelöst, wenn das Eingangsfeld Fokus erhält, und die .blur () -Methode wird ausgelöst, wenn das Eingabefeld den Fokus verliert. Um beispielsweise den Highlight -Effekt auf ein Eingabefeld mit der ID „myInput“ zu verwenden, verwenden Sie den folgenden Code:

$ ("#myInput"). Focus (function () {
$ $ (this) .effect ("Highlight", {}, 3000); "#ff0000"}, 3000);

}); Die .ready () -Methode. Diese Methode wird ausgelöst, wenn das DOM voll geladen ist. Um beispielsweise den Highlight -Effekt auf eine DIV mit der ID „myDiv“ zu verwenden, wenn die Seite geladen wird, verwenden Sie den folgenden Code:

$ (Dokument) .ready (function () {

$ ("#mydiv"). Effect ("Highlight", {}, 3000);
});

Das obige ist der detaillierte Inhalt vonJQuery Highlight -Element basierend auf dem aktuellen Datumszeitpunkt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!