elemen sorotan jQuery berdasarkan masa tarikh semasa

Ini adalah fungsi jQuery kecil yang saya tulis untuk menambah kelas yang dipilih ke elemen berdasarkan tarikh dan masa semasa (menggunakan timestamp tarikh). Idea ini adalah untuk menetapkan sesi semasa yang kini ditunjukkan, seperti yang ditunjukkan dalam tangkapan skrin di bawah.

$. DateTimeHighlightNow () fungsi

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

Penggunaan:

Kod HTML anda harus kelihatan seperti ini:

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

Penggunaan selanjutnya adalah untuk menjalankan acara setiap 1 minit (atau lebih) untuk penyegaran automatik:

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

walaupun pemikiran lebih lanjut

PHP Timestamp dilaksanakan di sisi pelayan (jam sistem pelayan anda).
JavaScript Timestamp dilaksanakan pada sisi klien (jam sistem PC anda).
Pemeriksaan yang lebih baik untuk menukar tetapan zon waktu pelanggan ke pelayan untuk menyerlahkan sesi semasa (ini adalah sesuatu yang saya dapat melihat ke dalam pelaksanaan dalam masa terdekat jadi tunggu untuk itu).

Soalan Lazim (Soalan Lazim) Mengenai Kesan Sorotan JQuery

Bagaimana saya boleh menggunakan kesan sorotan jQuery untuk menekankan elemen tertentu di laman web saya? Selepas itu, anda boleh menggunakan kaedah .efect () dengan kesan "sorotan". Kaedah ini mengambil tiga parameter: nama kesan, objek pilihan, dan tempoh kesannya. Sebagai contoh, untuk menyerlahkan div dengan id "mydiv", anda akan menggunakan kod berikut:

$ ("#mydiv"). Kesan ("sorotan", {}, 3000); Ini akan menyerlahkan div selama 3 saat. Pilihan warna dalam objek Pilihan. Sebagai contoh, untuk menukar warna sorotan menjadi merah, anda akan menggunakan kod berikut:

$ ("#mydiv").

Bagaimana saya boleh menghentikan kesan sorotan sebelum selesai? Kaedah ini mengambil dua parameter: parameter clearqueue dan parameter jumptoend. Jika Clearqueue ditetapkan kepada benar, semua animasi dalam barisan akan dikeluarkan. Jika Jumptoend ditetapkan kepada benar, animasi semasa akan disiapkan dengan segera. Sebagai contoh, untuk menghentikan kesan sorotan pada div dengan id "mydiv", anda akan menggunakan kod berikut:

$ ("#mydiv"). STOP (benar, benar);

Bolehkah saya menggunakan kesan sorotan pada pelbagai elemen sekaligus? Sebagai contoh, untuk menyerlahkan semua Divs dengan kelas "Sorotan", anda akan menggunakan kod berikut:

$ (". Sorotan"). Kesan ("Sorotan", {}, 3000);

Bagaimana saya boleh membuat kesan sorotan berulang?

Anda boleh membuat kesan sorotan berulang dengan menggunakan fungsi setInterval. Fungsi ini mengambil dua parameter: fungsi yang akan dilaksanakan dan selang masa dalam milisaat. Sebagai contoh, untuk membuat kesan sorotan pada div dengan id "mydiv" ulangi setiap 5 saat, anda akan menggunakan kod berikut:

setInterval (function () { $ ("#mydiv" ) .efect ("sorotan", {}, 3000); }, 5000);
Ya, anda boleh menggunakan kesan sorotan dengan kesan lain dengan mengikat mereka bersama -sama. Sebagai contoh, untuk menggunakan kesan sorotan dan kesan lantunan pada div dengan id "mydiv", anda akan menggunakan kod berikut:

$ ("#mydiv"). Kesan ("sorotan", { }, 3000) .efect ("Bounce", {}, 3000);

Bagaimana saya boleh menggunakan kesan sorotan pada hover? Kesan pada hover dengan menggunakan kaedah .hover (). Kaedah ini mengambil dua fungsi sebagai parameter: satu untuk apabila tetikus memasuki elemen dan satu untuk apabila tetikus meninggalkan elemen. Sebagai contoh, untuk menggunakan kesan sorotan pada div dengan id "mydiv" apabila tetikus melayang di atasnya, anda akan menggunakan kod berikut:

$ ("#mydiv"). Hover (fungsi () { $ (this) .effect ("sorotan", {}, 3000);
});

Ya, anda boleh menggunakan kesan sorotan pada klik dengan menggunakan kaedah .click (). Kaedah ini mengambil fungsi sebagai parameter yang akan dilaksanakan apabila elemen diklik. Sebagai contoh, untuk menggunakan kesan sorotan pada div dengan id "mydiv" apabila ia diklik, anda akan menggunakan kod berikut:

$ ("#myDiv"). Klik (fungsi () { $ (this) .efect ("sorotan", {}, 3000);
});
Anda boleh menggunakan kesan sorotan pada input borang dengan menggunakan kaedah .focus () dan .blur (). Kaedah .focus () dicetuskan apabila medan input mendapat tumpuan, dan kaedah .blur () dicetuskan apabila medan input kehilangan fokus. Sebagai contoh, untuk menggunakan kesan sorotan pada medan input dengan id "myInput", anda akan menggunakan kod berikut:

$ ("#myInput"). Focus (function () { $ (ini) .efect ("sorotan", {}, 3000);

}). blur (function () {

$ (ini) .effect ("sorotan", {color: "#ff0000"}, 3000); ); kaedah .ready (). Kaedah ini dicetuskan apabila DOM dimuatkan sepenuhnya. Sebagai contoh, untuk menggunakan kesan sorotan pada div dengan id "mydiv" apabila halaman dimuat, anda akan menggunakan kod berikut:

$ (document) .ready (function () {
$ $ ("#mydiv"). Kesan ("sorotan", {}, 3000);
});

Atas ialah kandungan terperinci elemen sorotan jQuery berdasarkan masa tarikh semasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!