Penghitung Waktu dan Penghitung Cerdas – Plugin Hitung Mundur jQuery Mega

  • Whatsapp
Penghitung Waktu dan Penghitung Cerdas - Plugin Hitung Mundur jQuery Mega

Source Code : Penghitung Waktu dan Penghitung Cerdas – Plugin Hitung Mundur jQuery Mega

Bacaan Lainnya

Smart Timer And Counter adalah plugin jQuery yang dapat digunakan untuk menambahkan timer dan jam ke halaman web. Plugin sangat dapat dikonfigurasi dan diperluas melalui skin kustom (komponen visual), mode (logika jam/pengatur waktu) dan bahasa (label terjemahan).

Forum DukunganIkuti di TwitterIkuti di Envatoberlangganan Newsletter

Semua gaya dilakukan menggunakan CSS (dan Kanvas untuk kulit Melingkar), dan semua gaya yang disertakan adalah CSS murni tanpa gambar yang digunakan. Kontrol responsif, menggunakan kueri media untuk mengubah ukuran penghitung, dan dapat dipecah menjadi beberapa baris di layar yang lebih kecil.

Plugin diuji dengan browser Android saat ini, iPhone dan iPad Safari dan Chrome, semua browser desktop modern (IE8 dan IE9 tidak akan menampilkan sebagian besar gaya yang terkait dengan beberapa skin yang lebih kompleks). Ini membutuhkan dukungan JavaScript dan jQuery untuk bekerja.

Kemungkinan penataan tanpa akhir

Kulit: Lingkaran Dan Bulat

Mode Jam dan Penghitung, Tata Letak Kustom

Plugin dapat berfungsi sebagai jam atau sebagai penghitung. Jika digunakan sebagai jam, Anda dapat menampilkan tanggal/waktu saat ini, atau Anda dapat memulai dari tanggal mana pun. Mode jam dapat menunjukkan waktu dalam format 24 jam (default) atau dalam format 12 jam (dengan lencana AM/PM). Penghitung dapat menghitung mundur ke tanggal berapa pun, menghitung mundur beberapa detik atau menghitung hingga batas detik apa pun. Plugin dapat menampilkan kombinasi yang berbeda dari elemen waktu dan tanggal, pembagi dan label.

Daftar Kontrol Mode
  • Tata Letak: menggabungkan urutan untuk ‘tahun, ‘bulan’, ‘hari’, ‘jam’, ‘menit’, ‘detik’.
  • Jangka pembagi garis: beberapa pembagi tersedia untuk membagi elemen tanggal / waktu.
  • Jumlah Digit: menyesuaikan jumlah digit untuk setiap elemen tanggal / waktu.
Daftar Metode Penghitung
  • Tanggal: itu harus di set di masa mendatang menggunakan objek Data JavaScript. Plugin akan menghitung sampai nol untuk mencapai tanggal yang ditetapkan.
  • Berlalu: itu harus di set sebelumnya menggunakan objek Data JavaScript. Plugin menghitung berapa banyak waktu yang telah berlalu sejak tanggal yang lalu.
  • Detik: menghitung ke nol dari jumlah detik yang ditentukan.
  • Target: menghitung dari nol hingga jumlah detik yang ditentukan.

Modul hitung naik dan turun berbasis angka

Plugin juga dapat menggunakan format berbasis angka untuk menghitung naik atau turun dengan sangat fleksibel. Ini memungkinkan jumlah digit kustom, tempat desimal, desimal dan pemisah ribuan, langkah kustom (bahkan diacak dari rentang yang ditetapkan). Anda dapat menentukan satu karakter sebelum dan sesudah penghitung (seperti tanda mata uang).

Semua skin yang disertakan (dengan pengecualian Circular) bekerja dengan modul angka. Beberapa skin dapat memiliki pengaturan yang sedikit berbeda.

7 Skin Dasar: Basis, Sederhana, Animasi, Melingkar, Kustom, Polos, dan Sebaris

7 Skin Dasar: Basis, Sederhana, Animasi, Melingkar, Kustom, Polos, dan Sebaris
Plugin memiliki 7 skin bawaan untuk menampilkan jam/penghitung. Skin Simple dan Animated masing-masing memiliki 14 gaya (beberapa sama). Kulit animasi menggunakan animasi (SlideIn, SlideOut, Fade, FadeIn, FadeOut) untuk mengubah angka. Kulit sebaris dapat digunakan pada tag SPAN untuk menambahkan penghitung sebaris dengan teks dengan perubahan gaya minimal.

Daftar Skin yang Tersedia
  • Sederhana: cara sederhana menampilkan angka, dengan 14 gaya yang telah ditentukan.
  • animasi: animasi untuk mengubah angka, dengan 14 gaya standar dan 5 animasi.
  • Di barisan: untuk elemen di dalam teks, dengan 6 gaya yang telah ditentukan.
  • Bundar: menggunakan Canvas untuk membuat dial melingkar, kustomisasi warna tak terbatas.
  • Adat: diperpanjang dari Animated Skin, kontrol bebas atas warna dan gaya.
  • Polos: kulit yang lebih sederhana dengan kontrol bebas atas warna dan beberapa kontrol untuk gaya.
  • Mendasarkan: kulit bonus tanpa termasuk gaya, dengan perilaku yang sama seperti kulit Sederhana.

Balik Kulit

Animasi Balik Timer
Kulit flip sepenuhnya dapat disesuaikan, dan memungkinkan Anda untuk menggunakan warna khusus untuk angka, latar belakang dan label, menggunakan bayangan, menentukan dimensi, mengubah jenis dan ukuran font.

Animasi Balik Angka
Skin bekerja dengan modul penghitung waktu dan angka di plugin Smart Timer And Counter. Itu bisa membalik beberapa digit dalam waktu yang bersamaan.

4 Kulit LED: Segmen, Batang, Matriks 3×5 dan 5×7

Kulit: 7 Segmen
Ini adalah tampilan LED 7 Segmen klasik, dan mendukung ukuran yang berbeda (berat dari 2 hingga 20 piksel) dengan lebar dan tinggi khusus untuk segmen, warna khusus, transisi, dan efek kemiringan pada tingkat apa pun. Pengaturan radius batas tidak didukung untuk skin ini.

Kulit: Dot Matrix 5x7
Kulit ini membuat matriks dengan 3×5 atau 5×7 titik untuk setiap nomor. Anda dapat menyesuaikan ukuran (nilai bobot titik apa pun), warna khusus, radius batas untuk titik, transisi, dan efek kemiringan dengan tingkat apa pun.

8 Kulit Datar: Panel, Berlian, Ubin, Kotak, Batang, Persegi Panjang, Lingkaran, Bulat

8 Kulit Datar: Panel, Berlian, Ubin, Kotak, Batang, Persegi Panjang, Lingkaran, Bulat
Kulit tambahan berdasarkan bentuk dasar. Skin ini hanya untuk modul Counter, tidak dapat digunakan dengan modul Numbers.

Daftar Skin yang Tersedia
  • Panel
  • berlian
  • ubin
  • Bar
  • alun-alun
  • persegi panjang
  • lingkaran
  • Putaran

Kulit Kustom memungkinkan kustomisasi gratis

Kulit Kustom memungkinkan kustomisasi gratis
Untuk menggunakan skin ini, skin animasi juga perlu dimuat. Kulit ini tidak memiliki kulit yang telah ditentukan. Tapi, Anda dapat mengatur warna kustom, latar belakang, bayangan, efek dari pengaturan plugin. Ini memungkinkan Anda menyesuaikan warna dan gaya dengan mudah. Juga, Anda dapat mengubah warna secara independen untuk setiap elemen penghitung.

Kulit Biasa memungkinkan penyesuaian yang mudah

Kulit Biasa memungkinkan penyesuaian yang mudah
Ini adalah kulit yang sangat sederhana yang memungkinkan penyesuaian warna, font, dan elemen lainnya.

Circular Skin menggunakan Canvas untuk menampilkan dial melingkar

Circualar Skin menggunakan Kanvas untuk menunjukkan dial melingkar
Berdasarkan perpustakaan jQuery Knob pihak ketiga, memungkinkan penyesuaian penuh ukuran dan warna (bahkan menggunakan transparansi) untuk panggilan nomor.

Kustomisasi dan integrasi yang mudah dengan dokumentasi terperinci

Kustomisasi dan integrasi yang mudah dengan dokumentasi terperinci
Plugin memiliki berbagai pengaturan untuk skin, mode, bahasa. Sangat mudah untuk menyesuaikan dan digunakan dengan proyek berbasis jQuery. Dokumentasi berisi penjelasan rinci tentang semua pengaturan, daftar nilai, daftar gaya dan banyak lagi. Paket plugin memiliki banyak demo.

Banyak acara dan metode yang tersedia untuk kontrol ekstra

Banyak acara dan metode yang tersedia untuk kontrol ekstra
Banyak acara tersedia untuk melampirkan kode Anda sendiri untuk mengontrol hal-hal di luar penghitung waktu (bilah kemajuan, peristiwa di halaman) dengan metode untuk mendapatkan status hitungan atau jam saat ini, penghitung waktu berhenti atau mulai dan banyak lagi. Contoh dalam paket menunjukkan cara mengontrol bilah kemajuan untuk hitung mundur.

Fitur plugin lainnya

  • Dukungan untuk terjemahan menggunakan objek bahasa untuk mengubah label elemen.
  • Lampirkan kode Anda sendiri di acara panggilan balik untuk menangani mulai, berhenti, selesai…
  • Banyak pengaturan untuk dikendalikan tampilan counter: pembagi, spasi, label…
  • Termasuk metode untuk mulai, hentikan, setel ulang, atau modifikasi elemen objek lawan.
  • Termasuk 7 file dokumentasi PDF dengan informasi tentang plugin.
  • Termasuk 26 file demo dengan hampir 100 demo.

Persyaratan sistem

  • jQuery 1.7 atau lebih baru
  • Bekerja dengan jQuery 2.x dan 3.x

Dokumentasi

Plugin berisi panduan pengguna dan pengembang PDF di dalam paket plugin, di direktori ‘docs’. Lihat dokumen ini untuk mendapatkan informasi tentang opsi plugin, penggunaan, dan lainnya. Untuk memulai dengan plugin, buka file ‘index.html’ di browser untuk mendapatkan informasi tentang penggunaan plugin, dan daftar demo untuk membantu Anda memulai penggunaan plugin. Anda juga dapat menemukan setiap contoh di direktori ‘demo’.

Pemberitahuan Versi 4

Versi 4.0 dari plugin berisi semua skin yang sebelumnya milik addons. Karena itu, beberapa nama file telah diubah, jadi ketika Anda beralih ke versi baru pastikan untuk memeriksa file mana yang Anda butuhkan dan jika beberapa di antaranya telah berubah nama.

Changelog

Versi 4.1 / 2020.06.12.

  • Diperbarui: Diuji dengan jQuery 3.5.1
  • Diperbarui: refactoring beberapa event handler jQuery
  • Diperbarui: berbagai peningkatan pada inti plugin
  • Diperbarui: menghapus beberapa contoh variabel yang tidak digunakan
  • Memperbaiki: beberapa contoh nilai kecepatan animasi yang salah digunakan

Versi 4.0 / 2019.04.23.

  • Ditambahkan: Semua skin tambahan termasuk dalam paket utama
  • Ditambahkan: Semua demo ekstra untuk semua skin
  • Ditambahkan: Dropdown digunakan untuk kontrol navigasi demo
  • Ditambahkan: Paket instalasi tambahan untuk berbagai skin tambahan
  • Diperbarui: Peningkatan minfikasi CSS menggunakan mesin CSSO
  • Diperbarui: JavaScript hanya diperkecil, tidak lagi menggunakan packer
  • Diperbarui: Contoh demo dan petunjuk pemasangan yang ditingkatkan
  • Diperbarui: Banyak peningkatan pada inti JavaScript
  • Diperbarui: Berbagai perubahan pada nama file untuk konsistensi yang lebih baik
  • Diperbarui: Demo file CSS dan JS dipindahkan ke lokasi sendiri
  • Diperbarui: Bekerja dengan jQuery 3, diuji dengan jQuery 3.4
  • Diperbarui: Beberapa nama file distribusi dan paket diubah
  • Memperbaiki: Beberapa konstruksi terkait bahasa minor
  • Memperbaiki: Beberapa skin dasar tidak di-minfied
Situs PluginPlugin ChangelogVideo Di YouTubeAjukan Pertanyaan

Pos terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *