Gunakan CSS+JS asli untuk membuat jam sederhana. Efeknya adalah sebagai berikut
Untuk mencapai efek ini, ini dibagi menjadi tiga bagian utama: HTML, JavaScript, dan CSS
bagian html
Bagian HTML relatif sederhana, mendefinisikan jam div, yang memiliki asal, jam, menit, tangan kedua, tanggal dan waktu. Adapun skala, angka dan elemen lain pada jam, karena kuantitasnya relatif besar, dihasilkan menggunakan jvascript menggunakan jvascript.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <tautan rel = 'stylesheet' href = 'jalur file css eksternal'/> <title> jam </itement> </head> <body> <v id = "jam"> <!-asal-> </title> </head> <body> <v id = "clock"> <!-Origin-> </Div> </head> <body> <v ID = "jam"> <!-Origin-> <Div> </head> <body> <v id = "jam"> <!-Origin-> <Div> </div> <body> <v id = "clock"> <! <Div ID = "Minute-line"> </div> <div id = "line kedua"> </div> <!-date-> <div id = "date-info"> </div> <!-Time-> <Div> <div id = "jam waktu"> </div> <Div ID = "Minute-Time"> </Div> <Div ID ID = "Second"> </Div> <Div ID = "Minute-Time"> </Div ID <Div ID = "Kali Kedua"> type = 'text/javaScript' src = 'jalur file javascript eksternal'> </script> </body> </html>
Bagian CSS
Sebelum memulai kode, ada beberapa sifat CSS yang perlu dipahami, seperti posisi, perbatasan-radius, transformasi, dll.
atribut posisi
Atribut posisi menentukan jenis posisi elemen, dengan lima nilai: absolute, tetap, relatif, statis, warisan. Standarnya statis, yaitu, tidak ada posisi, dan elemen ditampilkan sesuai dengan aliran dokumen normal; Penggunaan utama di sini mutlak dan relatif
Nilai absulte, atur elemen ke posisi absolut, dan posisikan relatif terhadap elemen atas pertama yang secara tak terduga diposisikan secara statis. Posisi dapat diposisikan melalui atribut 'kiri', 'atas', 'kanan', 'bawah'; Jika semua elemen atas diposisikan secara statis, itu akan diposisikan relatif terhadap posisi elemen tubuh.
Dalam contoh ini, atur jam div terluar ke relatif, dan semua elemen yang lebih rendah diatur ke posisi absolut absolut, dan kemudian tentukan posisinya relatif terhadap jam dengan mengatur nilai -nilai atribut seperti kiri dan atas.
Atribut perbatasan-Radius
Atribut perbatasan-Radius menambahkan perbatasan bulat ke suatu elemen. Anda dapat mengatur ukuran empat sudut bulat. Dalam contoh ini, gunakan atribut ini untuk mengatur elemen jam ke lingkaran
Berikut adalah contoh: 4 elemen div, semua lebar dan tinggi adalah 100px, dan efek dari perbatasan-radius berbeda:
mengubah atribut
Properti transformasi menerapkan rotasi 2D atau 3D ke elemen, yang memungkinkan kita untuk memutar, skala, memindahkan, atau memiringkan elemen. Dalam contoh ini, jam, menit, kedua, skala, dll. Semua diputar menggunakan atribut transformasi; Selain itu, atribut transformasi-asal dapat mengatur posisi titik dasar elemen.
Kode untuk bagian CSS
/*Global*/*{margin: 0; padding: 0;}. jam {lebar: 400px; Tinggi: 400px; Perbatasan: 10px Solid #333; Kotak-Shadow: 0px 0px 20px 3px #444 inset; Border-Radius: 210px; Posisi: kerabat; Margin: 5px Auto; z-index: 10; latar belakang-warna:#f6f6f6;}/* nomor jam*/. clock-num {width: 40px; Tinggi: 40px; Ukuran font: 22px; Teks-Align: tengah; Line-Height: 40px; Posisi: Absolute; z-index: 8; Warna:#555; Font-Family: Fantasy, 'Trebuchet MS';}. Em_num {font-size: 28px;}/* pointer*/. CLOCK-line {Posisi: absolute; z-index: 20;}. Hour-line {width: 100px; Tinggi: 4px; TOP: 198PX; Kiri: 200px; Latar Belakang:#000; Border-Radius: 2px; Transform-Origin: 0 50%; Kotak-Shadow: 1px -3px 8px 3px #aaa;}. Minute-line {width: 130px; Tinggi: 2px; TOP: 199PX; Kiri: 190px; Latar Belakang:#000; Transform-Origin: 7,692% 50%; Kotak-Shadow: 1px -3px 8px 1px #aaa;}. Line kedua {lebar: 170px; Tinggi: 1px; TOP: 199.5px; Kiri: 180px; Latar Belakang-Color:#F60; Transform-Origin: 11.765% 50%; Kotak -Shadow: 1px -3px 7px 1px #bbb;}/* Origin*/. Origin {width: 20px; Tinggi: 20px; Border-Radius: 10px; Latar Belakang:#000; Posisi: Absolute; Atas: 190px; Kiri: 190px; z-index: 14;}/* tanggal-waktu*/. Date-info {width: 160px; Tinggi: 28px; Line-Height: 28px; Teks-Align: tengah; Posisi: Absolute; Atas: 230px; Kiri: 120px; z-index: 11; Warna:#555; font-weight: tebal; font-family: 'microsoft yahei';}. Time-Info {width: 92px; Tinggi: 30px; Line-Height: 30px; Teks-Align: tengah; Posisi: Absolute; Atas: 270px; Kiri: 154px; z-index: 11; Latar Belakang-Color:#555; Padding: 0; Kotak-Shadow: 0px 0px 9px 2px #222 inset;}. Waktu {lebar: 30px; Tinggi: 30px; Teks-Align: tengah; float: kiri; Warna: #fff; font-weight: bold;} #menit waktu {border-left: 1px solid #ffff; Border-Right: 1px solid #ffff;}/* skala*/.-skala jam {width: 195px; Tinggi: 2px; Transform-Origin: 0% 50%; z-index: 7; Posisi: Absolute; TOP: 199PX; Kiri: 200px;}. Skala-Show {Lebar: 12px; Tinggi: 2px; Latar Belakang-Color:#555; float: left;}. skala tersembunyi {lebar: 183px; Tinggi: 2px; float: kiri;}Bagian JavaScript
Tidak ada yang bisa dikatakan tentang bagian JS. Untuk operasi DOM sederhana, fungsi setInterval dieksekusi setiap detik, dan sudut pointer dan waktu tampilan baru saja diubah. Kodenya adalah sebagai berikut
(function(){ window.onload=initNumXY(200, 160, 40,40); var hour_line = document.getElementById("hour-line"); var minute_line = document.getElementById("minute-line"); var second_line = document.getElementById("second-line"); var date_info = document.getElementById("date-info"); var week_day = [ 'Sunday', 'Monday', 'Tue', 'Tue', 'Friday', 'Sunday', 'Sunday', 'Tue', 'Friday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Minggu', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', Sunday 'Sunday' Sunday 'Sunday' Sunday ' Document.getElementById ("jam"); this_day.getMinutes (); (this_day.getmonth () + 1); - 90) + 'Deg)'; this_day.getHours (): this_day.getHours (); this_day.getSeconds ();} setInterval (setTime, 1000); : R - 0,5 * r - 0,5 * h}, {"kiri": r + r - 0,5 * w, "top": r - 0,5 * h}, {"kiri": r + r - 0,5 * w, "top": r - 0,5 h}, {"kiri": r + 0,5 * r * 1,73205 - 0,5 h, "w," w, "r + 0,5 * r * r * 1.73205 - 0.5 * w,” w, "h," r + 0,5 * r + 0,5 : R + 0,5 * r - 0,5 * w, "atas": r + 0,5 * r * 1.732 - 0,5 * h}, {"kiri": r - 0,5 * w, "atas": r + 0,5 * r * 1,732 - 0,5 * h}, {"kiri": r - 0,5 * r - 0,5 * W, "h}, {" kiri ": r - 0,5 * r - 0,5 * W," TOP ": R. : R - 0.5 * r - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h }, { "left" : R - 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h }, { "left" : R - 0.5 * r - 0.5 * h }, { "left" : R - 0.5 * r * 1.73205 - 0,5 * W, "TOP": R - 0,5 * r - 0,5 * H}, {"kiri": r - 0,5 * r - 0,5 * h}, {"kiri": r - 0,5 * r - 0,5 * w, "Top": r - 0,5 * r * 1.73205 - 0.5 * h}, {”kiri”: r - 0...5..5 * 1.73205 - 0.5 * h}, {”kiri”: r - r - r - 0. 1.73205 - 0,5 * H}, {"kiri": r - 0,5 * r - 0,5 * h}, {"kiri": r - 0,5 * r - 0,5 * w, "atas": r - 0,5 * r * 1,73205 - 0,5 * h}, {"kiri": r - 0,5 w, "Top": Document.getElementById ("jam"); } var clock_num = document.getElementsbyClassName ("clock-num"); untuk (var i = 0; i <clock_num.length; i ++) {clock_num [i] .style.left = numxy [i] .top =. I <60; skala [i] .style.transform = "rotate (" + (i * 6 - 90) + "deg)";Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.