jQuery时间插件jquery.clock.js用法实例(5个示例)

Rumah

hujung hadapan web

tutorial js

jQuery时间插件jquery.clock.js用法实例(5个示例)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

jquery pemalam masa

本文实例讲述了jQuery时间插件jquery.clock.js用法。分享给大家供大家参考，具体如下：

Example 1:

Basic clock, no options

<html>
<head>
 <title>jclock</title>
 <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script>
 <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script>
 <mce:script type="text/javascript"><!--
  $(function($) {
   $('.jclock').jclock();
  });
// --></mce:script>
</head>
<body>
<div class="jclock"></div>
</body>
</html>

Salin selepas log masuk

Example 2:

Clock, non-UTC, with options

<html>
<head>
 <title>jclock</title>
 <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script>
 <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script>
 <mce:script type="text/javascript"><!--
  $(function($) {
   var options = {
    timeNotation: '12h',
    am_pm: true,
    fontFamily: 'Verdana, Times New Roman',
    fontSize: '20px',
    foreground: 'yellow',
    background: 'red'
   }
   $('.jclock').jclock(options);
  });
// --></mce:script>
</head>
<body>
<div class="jclock"></div>
</body>

Salin selepas log masuk

Example 3:

Clock, UTC

<html>
<head>
 <title>jclock
 <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script>
 <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script>
 <mce:script type="text/javascript"><!--
  $(function($) {
   var options = {
    utc: true
   }
   $('.jclock').jclock(options);
  });
// --></mce:script>
</title></head>
<body>
<div class="jclock"></div>
</body>
</html>

Salin selepas log masuk

Example 4:

Multiple clocks using different time zone offsets

<html>
<head>
 <title>jclock</title>
 <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script>
 <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script>
 <mce:script type="text/javascript"><!--
  $(function($) {
   var optionsEST = {
    utc: true,
    utc_offset: -5
   }
   $('#jclock1').jclock(optionsEST);
   var optionsCST = {
    utc: true,
    utc_offset: -6
   }
   $('#jclock2').jclock(optionsCST);
   var optionsIndia = {
    utc: true,
    utc_offset: 5.5
   }
   $('#jclock3').jclock(optionsIndia);
  });
// --></mce:script>
</head>
<body>
<p>EST: <span id="jclock1"></span></p>
<p>CST: <span id="jclock2"></span></p>
<p>India: <span id="jclock3"></span></p>
</body>
</html>

Salin selepas log masuk

Example 5:

Styled clocks (first clock uses jquery.corner.js)

<html>
<head>
 <title>jclock</title>
 <mce:style type="text/css"><!--
  body {
   font: Verdana,Arial,sans-serif;
   /* An explicit background color is required for Safari. */
   /* Otherwise your corner chunks will come out black!  */
   background: #f8f0e0;
  }
  div.corner, div.nocorner {
   width: 10em;
   padding: 20px;
   margin: 1em;
   background: #f00;
   color: #000;
   text-align: center;
   font: verdana, arial, sans-serif;
  }
--></mce:style><style type="text/css" mce_bogus="1">  body {
   font: Verdana,Arial,sans-serif;
   /* An explicit background color is required for Safari. */
   /* Otherwise your corner chunks will come out black!  */
   background: #f8f0e0;
  }
  div.corner, div.nocorner {
   width: 10em;
   padding: 20px;
   margin: 1em;
   background: #f00;
   color: #000;
   text-align: center;
   font: verdana, arial, sans-serif;
  }
 </style>
 <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2.1.min.js"></mce:script>
 <mce:script type="text/javascript" src="jquery.jclock.js" mce_src="jquery.jclock.js"></mce:script>
 <mce:script type="text/javascript" src="jquery.corner.js" mce_src="jquery.corner.js"></mce:script>
 <mce:script type="text/javascript"><!--
  $(function($) {
   var options = {
    timeNotation: '12h',
    am_pm: true,
    fontFamily: 'Verdana, Times New Roman',
    fontSize: '20px',
    foreground: 'yellow',
    background: 'red'
   }
   $('.jclock').jclock(options);
   $('.corner').corner("30px");
  });
// --></mce:script>
</head>
<body>
<p><div class="corner"><div class="jclock"></div></div></p>
<p><div class="nocorner"><div class="jclock"></div></div></p>
</body>
</html>

Salin selepas log masuk

希望本文所述对大家jQuery程序设计有所帮助。

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

1 bulan yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

1 bulan yang lalu By DDD

R.E.P.O. Tetapan grafik terbaik

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7396

Tutorial Java

1630

Tutorial CakePHP

1358

Tutorial Laravel

1268

Tutorial PHP

1217

Tunjukkan Lagi

Related knowledge

Berapakah kos papan tanda lampu tahap 10 Douyin? Berapa hari yang diperlukan untuk mencipta tanda kipas tahap 10? Mar 11, 2024 pm 05:37 PM

Pada platform Douyin, ramai pengguna tidak sabar-sabar untuk mendapatkan pensijilan tahap, dan tanda cahaya tahap 10 menunjukkan pengaruh dan pengiktirafan pengguna pada Douyin. Artikel ini akan menyelidiki harga papan lampu tahap 10 Douyin dan masa yang diperlukan untuk mencapai tahap ini untuk membantu pengguna memahami proses tersebut dengan lebih baik. 1. Berapakah kos papan tanda lampu Douyin tahap 10? Harga papan tanda lampu 10 peringkat Douyin akan berbeza-beza bergantung pada turun naik pasaran dan penawaran dan permintaan Harga umum berjulat dari beberapa ribu yuan hingga sepuluh ribu yuan. Harga ini termasuk kos tanda lampu itu sendiri dan kemungkinan bayaran perkhidmatan. Pengguna boleh membeli papan tanda cahaya tahap 10 melalui saluran rasmi Douyin atau agensi perkhidmatan pihak ketiga, tetapi mereka harus memberi perhatian kepada saluran undang-undang semasa membeli untuk mengelakkan transaksi palsu atau penipuan. 2. Berapa hari yang diperlukan untuk mencipta tanda kipas tahap 10? Mencapai tahap 10 tanda cahaya

Apakah direktori pemasangan sambungan pemalam Chrome? Mar 08, 2024 am 08:55 AM

Apakah direktori pemasangan sambungan pemalam Chrome? Dalam keadaan biasa, direktori pemasangan lalai pelanjutan pemalam Chrome adalah seperti berikut: 1. Lokasi direktori pemasangan lalai pemalam chrome dalam windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2 chrome dalam windows7 Lokasi direktori pemasangan lalai pemalam: C:\Users\username\AppData\Local\Google\Chrome\User.

Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini Mar 13, 2024 pm 04:34 PM

Apabila pengguna menggunakan penyemak imbas Edge, mereka mungkin menambahkan beberapa pemalam untuk memenuhi lebih banyak keperluan mereka. Tetapi apabila menambah pemalam, ia menunjukkan bahawa pemalam ini tidak disokong. Bagaimana untuk menyelesaikan masalah ini? Hari ini, editor akan berkongsi dengan anda tiga penyelesaian. Kaedah 1: Cuba gunakan pelayar lain. Kaedah 2: Flash Player pada penyemak imbas mungkin sudah lapuk atau tiada, menyebabkan pemalam tidak disokong Anda boleh memuat turun versi terkini dari tapak web rasmi. Kaedah 3: Tekan kekunci "Ctrl+Shift+Delete" pada masa yang sama. Klik "Kosongkan Data" dan buka semula penyemak imbas.

Berapa lamakah masa yang diambil untuk membersihkan Cincin Elden? Mar 11, 2024 pm 12:50 PM

Pemain boleh mengalami plot utama permainan dan mengumpul pencapaian permainan apabila bermain di Elden's Circle Ramai pemain tidak tahu berapa lama masa yang diambil untuk membersihkan Elden's Circle Proses pelepasan pemain adalah 30 jam. Berapa lama masa yang diambil untuk membersihkan Cincin Elden Jawapan: 30 jam. 1. Walaupun masa pelepasan 30 jam ini tidak merujuk kepada pas laju seperti induk, ia juga meninggalkan banyak proses. 2. Jika anda ingin mendapatkan pengalaman permainan yang lebih baik atau mengalami plot yang lengkap, maka anda pasti perlu meluangkan lebih banyak masa pada tempoh tersebut. 3. Jika pemain mengumpul kesemuanya, ia akan mengambil masa kira-kira 100-120 jam. 4. Jika anda hanya mengambil garisan utama untuk memberus BOSS, ia akan mengambil masa lebih kurang 50-60 jam. 5. Jika anda ingin mengalami semuanya: 150 jam masa asas.

Bagaimana untuk menetapkan masa untuk menerbitkan karya di Xiaohongshu? Adakah masa untuk menerbitkan karya itu tepat? Mar 24, 2024 pm 01:31 PM

Xiaohongshu, platform yang penuh dengan kehidupan dan perkongsian pengetahuan, membolehkan semakin ramai pencipta untuk menyatakan pendapat mereka secara bebas. Untuk mendapatkan lebih banyak perhatian dan suka pada Xiaohongshu, selain kualiti kandungan, masa penerbitan juga penting. Jadi, bagaimana untuk menetapkan masa untuk Xiaohongshu menerbitkan karya? 1. Bagaimana untuk menetapkan masa untuk menerbitkan karya di Xiaohongshu? 1. Fahami masa aktif pengguna Pertama, adalah perlu untuk menjelaskan masa aktif pengguna Xiaohongshu. Secara umumnya, 8 malam hingga 10 malam dan tengah hari hujung minggu ialah masa apabila aktiviti pengguna tinggi. Walau bagaimanapun, tempoh masa ini juga berbeza bergantung pada faktor seperti kumpulan penonton dan geografi. Oleh itu, untuk lebih memahami tempoh aktif pengguna, adalah disyorkan untuk menjalankan analisis yang lebih terperinci tentang tabiat tingkah laku kumpulan yang berbeza. Dengan memahami kehidupan pengguna

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: &lt

Bilakah Ark of Destiny Dreams akan keluar? Mar 14, 2024 pm 03:00 PM

Ramai pemain ingin bertanya bila Ark of Destiny Sleepy Dream akan dikeluarkan Sleepy Dream pada 13 Mac. Terdapat juga pejuang profesional baharu Jia Nan, benua Rowan, Senjata Wira Pilihan Tuhan, BOSS baharu dan kandungan lain perincian Mari kita lihat kandungan pengenalan kepada masa pelancaran Ark of Destiny Sleepy Dreams ini. Panduan panduan Destiny Ark Bilakah Destiny Ark Sleepy Dream akan dikeluarkan Jawapan: 13 Mac Keperluan tahap item 1-Tahap 3 memerlukan tahap item untuk mencapai: 1540. Tahap 4 memerlukan tahap item untuk mencapai: 1560. , Tanda Mimpi, Jatuh putus asa. Lelaki pejuang profesional serba baharu 1. Ciri-ciri: Tenaga Syura, kumpul tenaga Syura untuk masuk [Negeri Tinju Raja] 2. Sifat profesional: Profesion jarak dekat 3. Senjata profesional: perisai lengan berat. New Continent Rowan 1. Bagaimana untuk membukanya

Gunakan jQuery untuk mengubah suai kandungan teks semua teg Feb 28, 2024 pm 05:42 PM

Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:

See all articles