Kunci untuk mengimplementasikan efek ini adalah penggunaan objek tanggal dan penyelesaian.
Ada tiga contoh secara total. Struktur HTML adalah sebagai berikut, jadi tidak ada gaya CSS yang ditambahkan.
<body> Waktu saat ini: <p id = "p1"> </p> Countdown ujian masuk perguruan tinggi: <p id = "p2"> </p> Waktu Terbatas terburu -buru: <p id = "p3"> </p> </body>
Terutama memahami implementasi JavaScript
window.onload = function () {var p1 = document.geteLementById ("p1"), p2 = document.geteLementById ("p2"); p3 = document.getElementById ("p3"); showtime1 (); showtime2 (); showtime3 ();}1. Implementasi sederhana dari tampilan waktu saat ini
function showTime1 () {var nowdate = new date (); // Buat objek tanggal nowdate untuk mendapatkan waktu saat ini var tahun = nowdate.getlyear (), // Dapatkan bulan tahun = nowdate.getMonth ()+1, // get bulan, getMonth () mendapat 0-11, dan Anda perlu menambahkan 1 date = nowdate.getdate (), Gets 0-11, dan Anda perlu menambahkan 1 date = nowdate.getdate () Minggu = ["Minggu", "Senin", "Selasa", "Kamis", "Jumat", "Sabtu", h = nowdate.getHours (), m = nowdate.getMinutes (), s = nowdate.getSeconds (), h = checktime (h), // Centang Fungsi digunakan untuk format waktu, menit, detik m = m = checktime (h) (s) waktu sceure digunakan untuk format waktu, menit, detik m = m = cecion m = detik (h) (s) waktu sc) p1.innerHtml = tahun+"tahun"+bulan+"bulan"+tanggal+"hari"+minggu [hari]+h+":"+m+":"+s; setTimeout (showtime1, 1000); // ulangi fungsi itu sendiri}Fungsi checktime adalah sebagai berikut:
function checktime (i) {if (i <10) {i = "0"+i; } return i;}Karena format waktu yang biasanya Anda lihat umumnya 00:00:01, dan gethours, getminutes, getseconds mendapatkan format 0 hingga 9, bukan 00 hingga 09. Oleh karena itu, dalam proses perubahan dari 9 menjadi 10, ada satu digit yang menjadi dua digit, dan juga menjadi 0 ketika muatan 59 detik menjadi 0 atau 59 menit atau 59 menit atau 59 menit atau 59.
Misalnya, 23:59:59 harus berubah menjadi 00:00:00 di detik berikutnya; Jika fungsi checktime tidak digunakan untuk diproses, itu akan berubah menjadi 0: 0: 0, yang akan membuat format sedikit tidak konsisten, dan ada juga mutasi visual dari peningkatan atau mengurangi jumlah kata. (Dua contoh berikutnya tidak menggunakan fungsi checktime untuk memproses waktu, menit dan kedua !!!)
2. Efek hitung mundur dari ujian masuk perguruan tinggi direalisasikan
function showTime2() { var nowtime=new Date(),//get the current time endtime=new Date("2017/6/6");//Define the end time var lefttime=endtime.getTime()-nowtime.getTime(),//The milliseconds from the end time leftd=Math.floor(lefttime/(1000*60*60*24)),//The number of days Leftth = Math.floor (waktu kiri/(1000*60*60)%24), // Jumlah jam kiri = Math.floor (waktu kiri/(1000*60)%60), // Jumlah menit kiri = Math.floor (kiri/1000%60); // Jumlah detik P2.Innerhtml = Leftd = Leftd+":" Leftth+"" Leftth+"Leftth+" Leftth+"Leftth+" Leftd; "Leftd;" Leftd; "Leftd;" Leftd+Leftd; "Leftd (Lefts:" Leftd (Leftd = "Leftd =" Leftd (LIFT, "LIFTE" "LIFTTH (LIFTE" "Left." setTimeout (showtime2, 1000); }Di antara mereka, poin yang lebih penting:
① Tentukan waktu akhir endtime = tanggal baru ("2017/6/6") adalah menggunakan objek tanggal baru dengan parameter, dan tanggal baru () adalah secara langsung mendapatkan waktu saat ini;
② Metode getTime () memperoleh jumlah milidetik dari 1 Januari 1970.
③ Perhitungan hari, jam, menit dan detik, % (operasi modulo). Dapatkan milidetik (sisa milidetik) dari akhir zaman, bagi dengan 1000 untuk mendapatkan detik yang tersisa, bagi dengan 60 untuk mendapatkan menit yang tersisa, dan bagi dengan 60 untuk mendapatkan jam yang tersisa. Dibagi dengan 24 untuk mendapatkan hari yang tersisa. Sisa detik waktu kiri/1000 modul 60 Mendapat jumlah detik, menit tersisa waktu kiri/(1000*60) Modul 60 Mendapat jumlah menit, sisa jam kiri/(1000*60*60) Modul 24 Mendapat jumlah jam.
3. Efek hitung mundur dari pembelian terburu-buru waktu terbatas
Function showTime3 () {var nowtime = new date (), endtime = new Date ("2020/1/1,00: 00: 00"), // Atur akhir waktu kiri = parseInt ((endtime.gettime ()-nowtime.gettime ())/1000), d = math.floor (kiri/60*(60*), heT 60), hlm. m = math.floor (waktu kiri/60%60), s = math.floor (waktu kiri%60); p3.innerHtml = d+"day"+h+"hour"+m+"menit"+s+"kedua"; setTimeout (showtime3, 1000); }Faktanya, ini mirip dengan contoh kedua, perbedaannya adalah bahwa waktu akhir ditetapkan tanggal baru ("2020/1/1,00: 00: 00")
Di bawah ini adalah kode lengkapnya
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> Efek hitung mundur </title> <script type = "text/javascript"> Fungsi checktime (i) {if (i <10) {i = "0"+i; } return i; } window.onload = function () {var p1 = document.geteLementById ("p1"), p2 = document.geteLementById ("p2"); showtime1 (); showtime2 (); showtime3 (); } function showtime1 () {var nowdate = new date (); var tahun = nowdate.getlyear (), // tahun bulan = nowdate.getmonth ()+1, // tanggal bulan = nowdate.getDate (), // day week = ["Minggu", "Senin", "Selasa", "Kamis", "Jumat", "Sabtu"], NowDate.getday (),//GetDay, "Get HODE," Get HOUDE, HODE, HODE, HODE, GET HOUDE (GET HOY, " m = nowdate.getMinutes (), m = checktime (m), s = nowdate.getSeconds (), s = checktime (s); p1.innerHtml = tahun+"tahun"+bulan+"bulan"+tanggal+"hari"+minggu [hari]+h+":"+m+":"+s; setTimeout (showtime1, 1000); } function showtime2 () {var nowtime = new date (), endtime = new date ("2017/6/6"); var lefttime = endtime.getTime ()-nowtime.getTime (), leftd = math.floor (waktu kiri/(1000*60*60*24)), kiri = math.floor (waktu kiri/(1000*60*60)%24), kiri = floor (kiri/waktu kiri/(1000*60)%60), leftm = MATH.FLOOR (Kiri/(1000*60)%60), LIFTS = MATH. p2.innerHtml = leftd+"day"+lefth+":"+leftm+":"+lefts; setTimeout (showtime2, 1000); } function showTime3 () {var nowtime = new date (), endtime = new Date ("2020/1/1,00: 00: 00"), Lefttime = parseInt ((endtime.getTime ()-nowtime.gettime ())/1000), d = math.floor (kiri/(60*60*), h = h = math.floor (kiri/(60*60*), h = h = math. m = math.floor (waktu kiri/60%60), s = math.floor (waktu kiri%60); p3.innerHtml = d+"day"+h+"hour"+m+"menit"+s+"detik"; setTimeout (showtime3, 1000); } </script> </head> <body> Waktu saat ini: <p id = "p1"> </p> Hitung mundur ujian masuk perguruan tinggi: <p id = "p2"> </p> Waktu Terbatas terburu -buru: <p id = "p3"> </p> </body> </html>Implementasi efek khusus JavaScript di atas - contoh sederhana dari waktu saat ini dan efek hitung mundur adalah semua konten yang telah saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.