Artikel ini berbagi fungsi penilaian yang mirip dengan Perpustakaan Taobao dan Baidu, dan implementasi JS adalah untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Efeknya ditunjukkan pada gambar:
Lima bintang lima runcing ditempatkan di lima kolom meja. Berikut ini adalah <p> yang digunakan untuk menampilkan hasil skor; kodenya adalah sebagai berikut:
<body onload = "changebg ()"> <Table align = "center" cellPadding = "0" cellPacing = "0" id = "maidable"> <tryty = "font-size: 30px;"> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td </td </ttr> </able> <p align = "center" id = "hasil"> label </ttr> </able> <p align = "center" id = "hasil"> label "> label"> label "> </TLACE = POLET = PENGADAAN =" ID "ID ="> Label ">
Acara Onload Body terikat pada suatu metode, dan kode JS adalah sebagai berikut:
<script type = "text/javascript"> function getIndex (arr, elemen) {// argumen: array, elemen; Kembalikan indeks elemen saudara untuk (var i = 0; i <arr.length; i ++) {if (arr [i] == elemen) {return i; }} return -1; } function changebg () {// Setel setiap TD untuk mendapatkan atribut fokus [Anda juga dapat mengatur atribut ontClick] var maidained = document.geteLementById ("maidable"); // Dapatkan tabel yang perlu ditetapkan var tds = dirawat.getElementsbyTagname ("td"); // Dapatkan semua sel dalam dokumen tabel.getElementById ("hasil"). Style.display = "none"; // Atur hasil skor ke tersembunyi untuk (var i = 0; i <tds.length; i ++) {var td = tds [i]; td.onfocus = getonfocus; td.style.cursor = "pointer"; // Untuk mengatur mouse menjadi berbentuk tangan pada fungsi pentagram}} getonfocus () {// Atur acara fokus TD, var dirawat = document.getElementById ("macet"); var tds = macet.getElementsbyTagname ("td"); indeks var = getIndex (TDS, ini); // Kembalikan indeks acara respons ini mewakili elemen yang memicu dokumen acara ini.getElementById ("hasil"). Style.display = ""; // Setelah mendapatkan skor, tampilkan hasil dokumen.getElementById ("skor"). Innertext = index + 1; untuk (var i = 0; i <index+1; i ++) {tds [i] .style.color = "red"; } untuk (var i = index+1; i <tds.length; i ++) {tds [i] .style.color = "black"; }} </script>Kode JS terutama terdiri dari tiga fungsi;
①: changebg (); fungsi yang mengikat acara onload tubuh; Untuk mencapai pengikatan acara OnFocus untuk setiap elemen TD;
②: getonfocus (); implementasi spesifik dari acara OnFocus dari elemen TD;
③: getIndex (); Ada dua parameter, satu adalah array koleksi elemen TD, dan yang lainnya adalah elemen TD dari acara yang sesuai. Perhatikan penggunaan kata kunci ini. Ini terutama mengembalikan indeks elemen acara yang sesuai. Untuk menampilkan warna sebelum elemen acara respons sebagai merah, elemen selanjutnya ditampilkan sebagai hitam;
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.