Rumah hujung hadapan web tutorial js jQuery实现电子时钟功能步骤详解

jQuery实现电子时钟功能步骤详解

May 15, 2018 am 09:44 AM
jquery Fungsi jam

这次给大家带来jQuery实现电子时钟功能步骤详解,jQuery实现电子时钟功能的注意事项有哪些,下面就是实战案例,一起来看一下。

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery电子时钟</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <span id="time">haha</span>
    <script type="text/javascript">
    window.onload = function(){
      showTime();
    }
    function showTime(){
    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1;
    var date = myDate.getDate();
    var dayArray = new Array(7);
    dayArray[0] = "星期日";
    dayArray[1] = "星期一";
    dayArray[2] = "星期二";
    dayArray[3] = "星期三";
    dayArray[4] = "星期四";
    dayArray[5] = "星期五";
    dayArray[6] = "星期六";
    var day1 = myDate.getDay();
    var day = dayArray[day1];
    var hour = myDate.getHours();
    var minute = myDate.getMinutes();
    var second = myDate.getSeconds();
    var min = checkTime(minute);
    var sec = checkTime(second);
    var time1 = year + "年" + month + "月" + date + "日";
    var time2 = hour + ":" + min + ":" + sec;
    // document.write(time1+day+time2);
    //用js方法
    // document.getElementById("time").innerHTML = time1+day+time2;
    //用jquery方法
    $('#time').text(time1+day+time2);
    setTimeout("showTime()",500);
    }
    function checkTime(i){
      if(i<10){
        i = "0" + i;
      }
      return i;
    }
    </script>
  </body>
</html>
Salin selepas log masuk

运行效果:

实例小结:

1、注意js文件引用,要在head中声明,在body中展开时,无需重新申明引用信息等;
2、注意Date有关函数,获取时候不要忘记了get和括号;
3、注意window.onload = function(){}的写法;
4、月份要注意数组开始顺序,从一月份开始,下标是0,以此类增;
5、注意时、分、秒函数为复数;
6、day表示获取星期几,但是获取的是数字,可以用数组转换(0表示周日,其它一一对应)
7、setTimeout函数:setTimeOut(A,B),注意setTimeout中out为小写
A:函数体 B:函数执行间隔
8、setTimeout执行过程中,不要使用document.write,否则递归调用未实现;
9、JQuery选择器中使用单引号还是双引号?
理论上单双都可以,在嵌套情况下视具体情况而定。
10、关于jQuery获取标签文本内容:方法1:text();方法2:html();
注意,需要改变文本内容时,正确格式为:$('#time').text("content") 错误格式为:$('#time').text() = "content"

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery遍历XML节点与属性实现步骤

Vue波纹按钮组件使用详解

Atas ialah kandungan terperinci jQuery实现电子时钟功能步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah fungsi apl Doubao? Apakah fungsi apl Doubao? Mar 01, 2024 pm 10:04 PM

Akan terdapat banyak fungsi penciptaan AI dalam apl Doubao, jadi apakah fungsi apl Doubao? Pengguna boleh menggunakan perisian ini untuk membuat lukisan, berbual dengan AI, menjana artikel untuk pengguna, membantu semua orang mencari lagu, dsb. Pengenalan fungsi apl Doubao ini boleh memberitahu anda kaedah operasi khusus Kandungan khusus ada di bawah, jadi lihat! Apakah fungsi apl Doubao Jawapan: Anda boleh melukis, bersembang, menulis artikel dan mencari lagu. Pengenalan fungsi: 1. Pertanyaan soalan: Anda boleh menggunakan AI untuk mencari jawapan kepada soalan dengan lebih pantas, dan anda boleh bertanya apa-apa jenis soalan. 2. Penjanaan gambar: AI boleh digunakan untuk mencipta gambar yang berbeza untuk semua orang Anda hanya perlu memberitahu semua orang keperluan umum. 3. Sembang AI: boleh mencipta AI yang boleh berbual untuk pengguna,

Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi Mar 23, 2024 pm 10:27 PM

Kedua-dua telefon bimbit vivox100s dan x100 adalah model yang mewakili dalam barisan produk telefon mudah alih vivo, masing-masing mewakili tahap teknologi canggih vivo dalam tempoh masa yang berbeza. Artikel ini akan menjalankan perbandingan terperinci antara kedua-dua telefon mudah alih ini dari segi perbandingan prestasi dan analisis fungsi untuk membantu pengguna memilih telefon mudah alih yang sesuai dengan mereka dengan lebih baik. Mula-mula, mari kita lihat perbandingan prestasi antara vivox100s dan x100. vivox100s dilengkapi dengan yang terbaru

Apl jam tiada dalam iPhone: Cara membetulkannya Apl jam tiada dalam iPhone: Cara membetulkannya May 03, 2024 pm 09:19 PM

Adakah apl jam hilang dari telefon anda? Tarikh dan masa masih akan dipaparkan pada bar status iPhone anda. Walau bagaimanapun, tanpa apl Jam, anda tidak akan dapat menggunakan jam dunia, jam randik, jam penggera dan banyak ciri lain. Oleh itu, membetulkan apl jam yang hilang hendaklah berada di bahagian atas senarai tugasan anda. Penyelesaian ini boleh membantu anda menyelesaikan isu ini. Betulkan 1 – Letakkan Apl Jam Jika anda tersilap mengalih keluar apl Jam daripada skrin utama anda, anda boleh meletakkan semula apl Jam pada tempatnya. Langkah 1 – Buka kunci iPhone anda dan mula meleret ke kiri sehingga anda mencapai halaman Pustaka Apl. Langkah 2 – Seterusnya, cari "jam" dalam kotak carian. Langkah 3 – Apabila anda melihat "Jam" di bawah dalam hasil carian, tekan dan tahan dan

Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya? Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya? Mar 21, 2024 pm 08:21 PM

Dengan perkembangan pesat Internet, konsep media kendiri telah berakar umbi dalam hati orang ramai. Jadi, apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya? Seterusnya, kita akan meneroka isu-isu ini satu demi satu. 1. Apakah sebenarnya media kendiri? Kami-media, seperti namanya, bermakna anda adalah media. Ia merujuk kepada pembawa maklumat yang melaluinya individu atau pasukan boleh mencipta, mengedit, menerbitkan dan menyebarkan kandungan secara bebas melalui platform Internet. Berbeza dengan media tradisional, seperti akhbar, televisyen, radio, dan lain-lain, media kendiri lebih interaktif dan diperibadikan, membolehkan semua orang menjadi pengeluar dan penyebar maklumat. 2. Apakah ciri dan fungsi utama media kendiri? 1. Ambang rendah: Peningkatan media kendiri telah menurunkan ambang untuk memasuki industri media Peralatan yang rumit dan pasukan profesional tidak lagi diperlukan.

Apakah fungsi perisian pengurusan akaun Xiaohongshu? Bagaimana untuk mengendalikan akaun Xiaohongshu? Apakah fungsi perisian pengurusan akaun Xiaohongshu? Bagaimana untuk mengendalikan akaun Xiaohongshu? Mar 21, 2024 pm 04:16 PM

Memandangkan Xiaohongshu menjadi popular di kalangan golongan muda, semakin ramai orang mula menggunakan platform ini untuk berkongsi pelbagai aspek pengalaman dan pandangan hidup mereka. Cara mengurus berbilang akaun Xiaohongshu dengan berkesan telah menjadi isu utama. Dalam artikel ini, kami akan membincangkan beberapa ciri perisian pengurusan akaun Xiaohongshu dan meneroka cara mengurus akaun Xiaohongshu anda dengan lebih baik. Apabila media sosial berkembang, ramai orang mendapati diri mereka perlu mengurus berbilang akaun sosial. Ini juga merupakan satu cabaran untuk pengguna Xiaohongshu. Sesetengah perisian pengurusan akaun Xiaohongshu boleh membantu pengguna mengurus berbilang akaun dengan lebih mudah, termasuk penerbitan kandungan automatik, penerbitan berjadual, analisis data dan fungsi lain. Melalui alatan ini, pengguna boleh mengurus akaun mereka dengan lebih cekap dan meningkatkan pendedahan dan perhatian akaun mereka. Di samping itu, perisian pengurusan akaun Xiaohongshu mempunyai

Apa itu Discuz? Definisi dan pengenalan fungsi Discuz Apa itu Discuz? Definisi dan pengenalan fungsi Discuz Mar 03, 2024 am 10:33 AM

"Meneroka Discuz: Definisi, Fungsi dan Contoh Kod" Dengan perkembangan pesat Internet, forum komuniti telah menjadi platform penting untuk orang ramai mendapatkan maklumat dan bertukar pendapat. Di antara banyak sistem forum komuniti, Discuz, sebagai perisian forum sumber terbuka yang terkenal di China, digemari oleh majoriti pembangun dan pentadbir laman web. Jadi, apa itu Discuz? Apakah fungsi yang ada padanya, dan bagaimana ia boleh membantu tapak web kami? Artikel ini akan memperkenalkan Discuz secara terperinci dan melampirkan contoh kod khusus untuk membantu pembaca mengetahui lebih lanjut mengenainya.

Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya Mar 09, 2024 am 08:21 AM

Tip PHP: Cepat melaksanakan fungsi kembali ke halaman sebelumnya Dalam pembangunan web, kita sering menghadapi keperluan untuk melaksanakan fungsi kembali ke halaman sebelumnya. Operasi sedemikian boleh meningkatkan pengalaman pengguna dan memudahkan pengguna menavigasi antara halaman web. Dalam PHP, kita boleh mencapai fungsi ini melalui beberapa kod mudah. Artikel ini akan memperkenalkan cara cepat melaksanakan fungsi kembali ke halaman sebelumnya dan memberikan contoh kod PHP tertentu. Dalam PHP, kita boleh menggunakan $_SERVER['HTTP_REFERER'] untuk mendapatkan URL halaman sebelumnya

Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux Mar 01, 2024 pm 04:18 PM

Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux Dalam sistem pengendalian Linux, GDM (GNOMEDisplayManager) ialah pengurus log masuk grafik yang menyediakan antara muka untuk pengguna log masuk dan log keluar daripada sistem. GDM biasanya merupakan sebahagian daripada persekitaran desktop GNOME, tetapi boleh digunakan oleh persekitaran desktop lain juga. Peranan GDM bukan sahaja untuk menyediakan antara muka log masuk, tetapi juga termasuk pengurusan sesi pengguna, penyelamat skrin, log masuk automatik dan fungsi lain. Fungsi GDM terutamanya merangkumi aspek berikut:

See all articles