Hari ini saya menulis contoh keren lainnya: sistem peringkat bintang (dapat menyesuaikan jumlah bintang dan menampilkan informasi)
sufustar.star (); menggunakan nilai default 5 bintang, informasi default
var msg = [......]; sufustar.star (10, msg); Jumlah bintang khusus adalah 10, informasi tampilan, nilai default referensi format msg, jumlah bintang harus konsisten dengan jumlah bintang;
Menerapkan beberapa contoh sendiri memiliki keuntungan, yang dapat meningkatkan kemahiran Anda dalam menerapkan berbagai titik pengetahuan dan juga menguji kelemahan Anda sendiri! Setelah ditemukan, segera cari dokumentasi API dan menebusnya!
Saya tidak tahu apakah saya terlalu bodoh, tetapi contoh ini ditulis sepanjang hari!
Jangan bicara omong kosong, mari kita bicara tentang poin pengetahuan yang terlibat dalam contoh ini:
1. Gunakan perbatasan CSS untuk menggambar segitiga dan gunakan sebelumnya untuk menambahkannya ke elemen lain;
2. Pelajari cara menggunakan CSS untuk menemukan elemen;
3. Agen untuk belajar acara;
4. Cara mengoptimalkan kinerja;
5. Penerapan metode pencocokan objek string dan aplikasi ekspresi reguler;
6. Mendaftarkan acara dan penanganan acara memerlukan metode penulisan yang kompatibel dengan IE;
7. Pelajari cara menggunakan '||' untuk mengatur nilai default untuk variabel;
8. Sederhanakan kode: Keluarkan kode yang dapat diulang dan tuliskan ke fungsi secara terpisah;
Di bawah ini adalah kode lengkap dengan komentar. Jika Anda tidak mengerti, silakan periksa dokumennya. Dengan level saya saat ini, saya hanya bisa menulisnya seperti ini. Jika Anda memiliki saran yang bagus, jangan ragu untuk menunjukkannya!
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> </iteme> <tyle> *{margin: 0; Padding: 0; } #star {position: absolute; Kiri: 0; Kanan: 0; Atas: 30px; Bawah: 0; margin: otomatis; Lebar: 80%; font-size: 12px; } #star-div {margin: 5px; Ukuran font: 0; } #star-div a {display: inline-block; Lebar: 21px; Tinggi: 21px; Latar Belakang: URL (http://files.cnblogs.com/files/susufufu/star0.gif) no-rePeat; } #star-div .on {background: url (http://files.cnblogs.com/files/susufu/star1.gif) no-repeat; } #star-info {position: absolute; Atas: 55px; Kiri: -30px; Tampilan: Tidak Ada; Lebar: 155px; Tinggi: 50px; padding: 2px; Line-Height: 17px; Border-Radius: 8px; Latar Belakang-Color: Emas; z-index: 5; } #star-info: sebelum {content: ''; Border-Bottom: 10px Solid Gold; Border-left: 10px solid RGBA (0,0,0,0); Border-Right: 10px Solid RGBA (0,0,0,0); Posisi: Absolute; Kiri: 35px; Atas: -10px; } #star-span {line-height: 14px} #star-info strong, #star-span kuat {color: red; } </style> <script> window.onload = function(){ var sufuStar = function (){ //Tool function function gbyId(id){return document.getElementById(id);} function addEvent(elem,type,func){ //Compatible with IE if(elem.addEventListener){ elem.addEventListener(type,func,false) }else if (elem.attachevent) {elem.attachevent ('on'+type, func)}} function getIndex (event) {// kompatibel dengan yaitu var e = event || window.event; var t = e.target || E.Srcelement; if (t.tagname.tolowercase () === 'a') {return parseInt (t.innerHtml); }} function showInfo (index, msg) {var info = gbyid ('star-info'); info.style.display = 'block'; info.style.left = index*21-51+'px'; info.innerHtml = "<strong>"+index+'point'+msg [index-1] .match (/(.+)/ |/) [1]+'<br />+'</strong>'+msgöIndex --1anjang } function appenstar (elem, nums) {var fragment = document.createdocumentfragment (); // Untuk meningkatkan kinerja, karena DocumentFragment digunakan untuk ditambahkan pada satu waktu, halaman hanya akan rerender sekali untuk (var i = 0; i <nums; i ++) {var a = document.createElement ('a'); a.innerhtml = i+1; a.href = "JavaScript :;"; // Perilaku default memblokir browser klik tautan fragment.appendchild (a); } elem.appendChild (frag); } // bintang fungsi fungsi tubuh (num, mymsg) {var n = num || 5; // Ketika NUM memiliki nilai, ambil nilainya, dan jika tidak ada nilai, ambil nilai default 5; var clickstar = currentstar = 0; //clickStar saves click status var msg = myMsg||[ "Very dissatisfied|It is too bad, seriously inconsistent with the seller's description, very dissatisfied", "Dissatisfied|partially damaged, inconsistent with the seller's description, not satisfied", "General|quality is average, not as good as the seller's description", "Satisfied|quality is good, basically consistent with the seller's description, quite puas "," Kualitas yang sangat puas sangat baik, sepenuhnya konsisten dengan deskripsi penjual, sangat puas "]; var starcontainer = gbyid ('star-div'); AppenStar (StarContainer, N); addEvent (starcontainer, 'mouseover', over); // Gunakan mode proxy acara (acara proxy melalui elemen induk dari tag <a>) addEvent (starcontainer, 'mouseout', out); addEvent (starcontainer, 'klik', klik); function over (event) {if (getIndex (event)) {// if getIndex (event) tidak bisa mendapatkan nilainya, itu berarti bahwa target acara pemicu saat ini bukan <a> tag var index = getIndex (event); Ubah (indeks); showInfo (indeks, msg); }} function out (event) {ubah (); // Atur skor ke status klik klik gbyId ('star-info'). Status.display = 'none'} function klik (event) {if (getIndex (event)) {var index = getIndex (event); clickstar = indeks; // simpan status klik gbyid ('star-info'). Style.display = 'none'; gbyid ('star -span'). innerHtml = "<strong>" + index + 'point' + msg [indeks - 1] .match (/(.+)/ |/) [1] + '</strong>' + '<br/>' + msg [indeks - 1] .match (// | (. +)/) [1]; }} function change (index) {currentstar = index || clickstar; untuk (var i = 0; i <n; i ++) {starcontainer.children [i] .className = i <currentstar? 'on': ''}}} return {star: star}} (); // () di sini berarti bahwa fungsi dieksekusi segera, sehingga variabel sufustar dapat memanggil nilai pengembalian bintang fungsi anonim // eksekusi panggilan: sufustar.star (num, mymsg), parameter dapat kosong, parameter num, mymsg akan diatur ke nilai default sufustar.star (); } </script> </head> <body> <v id = "star"> <span> Klik bintang untuk mencetak: </span> <div id = "star-div"> </div> <span id = "star-span"> </span> <p id = "star-info"> </p> </div> </body> </html>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.