Bagaimana untuk mencipta jam analog menggunakan HTML, CSS dan JavaScript?

Dalam tutorial ini, kami akan mereka bentuk jam analog dengan bantuan HTML dan CSS dan menjadikannya berfungsi menggunakan JavaScript, yang akan memaparkan masa semasa dalam format jam, minit dan saat.

Pendekatan

• Kami akan menggunakan objek Tarikh dan dengan beberapa pengiraan kami akan memaparkan jam , saat dan minit .

• Kita akan mendapat masa sistem daripada objek JavaScript

  Date() yang mempunyai fungsi seperti getHours(), getSecond() dan getMinutes().

• Selepas mendapat

  kami akan menggunakan format jam , minit dan saat untuk menukar putaran kesemua jam tiga tangan, minit dan saat.

Jam analog memaparkan masa melalui tiga jarum yang bergerak secara berterusan dan menandakan dari 1 hingga 12 semasa memaparkan masa. . nama kelas "sizeOfAnalog" dengan nama hour_clock, minutes_clock, seconds_clock.

CSS

Kami akan menambah CSS dalaman serta JavaScript dalaman dalam kod HTML. Gunakan teg

untuk menggunakan CSS dalaman dan <script></script> untuk menggunakan JavaScript dalaman.

JavaScript

Dalam bahagian JavaScript, kami melakukan kerja logik utama. Kami akan menggunakan objek JavaScript Date() dan fungsinya getHours(), getSecond(), dan getMinutes() untuk mendapatkan masa semasa dalam jam, minit dan saat. Setelah kami mempunyai format jam, minit dan saat, kami akan menggunakan putaran yang menukar ketiga-tiga jarum jam, minit dan saat.

Langkah

Langkah 1

- Kami menggunakan

"latar belakang: url(clock.png) no-repeat;"

kod untuk menggunakan imej latar belakang jam pada skrin, tiada ulangan di sini adalah untuk mengelakkan imej daripada berulang.

Langkah 2 - Sekarang kita akan mendapat masa semasa menggunakan objek Date() dan kita juga boleh mendapatkan jam, minit dan saat semasa masing-masing daripada objek Date. Sekarang kita akan mendapat jam, minit dan saat dari kod HTML dan menukar putaran tangan kepada 360 darjah.

Langkah 3 - Seperti yang kita tahu, selepas 360 darjah darjah akan dianggap sebagai satu putaran. Jadi jika anda ingin mendapatkan jumlah 12 jam dari 360 ​​darjah ini, anda boleh melakukannya menggunakan (360/12), yang akan memberi anda 30 darjah dalam satu jam.

Langkah 4 - Sama seminit seperti yang kita perlukan 360 minit jumlah 60 minit jadi boleh dilakukan menggunakan (360/60) = 6 darjah diperlukan seminit.

Langkah 5 - Dalam bahagian JavaScript menggunakan setInterval()

kita boleh menjalankan jam yang ditetapkan setiap 1000ms (milisaat) kerana 1 saat bersamaan dengan 1000ms.

Jadi, kami menggunakan baharu untuk mencipta objek tarikh Date()

Dapatkan jam antara 0 dan 23

getHours()

Dapatkan minit antara 0 dan 59

getMinutes() 59 Saat antara getSeconds()

Langkah 6

- Sebaik sahaja kami mempunyai ketiga-tiga nilai, kami akan memutar setiap tangan dan jam analog kami akan mula menunjukkan masa.

Contoh (Program Penuh)

Di bawah ialah kod lengkap untuk mencipta jam analog menggunakan HTML, CSS dan JavaScript.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk mencipta jam analog menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!