JS实现评价星级
这次给大家带来JS实现评价星级，JS实现评价星级的注意事项有哪些，下面就是实战案例，一起来看一下。
虽然简单，还是有几个注意的地方：
1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。
2. 点击后关闭hover效果。
3. 点击同一颗星星，星星可以随时换色。
具体代码展示：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<style type="text/css">
.stars{
white-space: nowrap;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.stars li{
display: inline-block;
color:#ADADAD;
font-size: 40px;
}
</style>
<body>
<ul class="stars">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<script src="../../js/common/jquery-git.js"></script>
<script>
$(function() {
//为星星设置hover效果
varisClicked =false;
varbeforeClickedIndex = -1;
varclickNum = 0;//点击同一颗星次数
$('li').hover(
function() {
if(!isClicked) {
$(this).css('color','#F0AD4E');
varindex = $(this).index();
for(vari = 0; i <= index; i++) {
$('li:nth-child('+ i +')').css('color','#F0AD4E');
}
}
},
function() {
if(!isClicked) {
$('li').css('color','#ADADAD');
}
}
);
//星星点击事件
$('li').click(function() {
$('li').css('color','#ADADAD');
isClicked =true;
varindex = $(this).index();
for(vari = 1; i <= index+1; i++) {
$('li:nth-child('+ i +')').css('color','#F0AD4E');
}
if(index == beforeClickedIndex) {//两次点击同一颗星星 该星星颜色变化
clickNum++;
if(clickNum % 2 == 1) {
$('li:nth-child('+ (index + 1) +')').css('color','#ADADAD');
}else{
$('li:nth-child('+ (index + 1) +')').css('color','#F0AD4E');
}
}else{
clickNum = 0;
beforeClickedIndex = index;
}
});
});
</script>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci JS实现评价星级. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
1209
24
Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 pm 02:54 PM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.
WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata
Dec 17, 2023 pm 05:30 PM
WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket
Bagaimana cara menggunakan Xiaomi Mi 14 Ultra AIGC Magic Elimination Pro?
Mar 16, 2024 pm 01:34 PM
Pada masa kini, jenama telefon bimbit utama melancarkan produk baru dengan lebih banyak fungsi yang dibayangkan sebelum ini telah direalisasikan dalam telefon bimbit baharu Baru-baru ini, Xiaomi Mi 14 Ultra telah menjadi sangat popular dan telah menarik perhatian ramai di pasaran. Saya percaya ramai pengguna lebih berminat dengan telefon ini Editor di bawah akan menunjukkan kepada anda cara menggunakan Xiaomi 14UltraAIGC Magic Elimination Pro? Datang dan lihat tutorial khusus! Bagaimana untuk menggunakan penghapusan sihir Xiaomi 14UltraAIGC? Buka Xiaomi 14Ultra, cari dan masukkan perisian album foto pada desktop, pilih gambar yang ingin anda hapuskan, dan masukkan penyuntingan album foto. Pilih pilihan Penghapusan Ajaib dan klik Pro di penjuru kanan sebelah atas untuk memasuki Pro Penghapusan Ajaib dan pilih lokasi pintar yang anda ingin pergi.
Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata
Dec 17, 2023 pm 12:09 PM
Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan
Bagaimana untuk memadam rekod ulasan anda sendiri di Dianping Bagaimana untuk memadam ulasan anda sendiri.
Mar 12, 2024 am 11:52 AM
Kita semua menyukai Dianping, perisian perkhidmatan hayat berkualiti tinggi, yang boleh mempromosikan penggunaan semua orang dan mendapatkan beberapa perkhidmatan pengguna dengan lebih baik di sini Secara umumnya, ia boleh membuatkan semua orang berasa sangat berpuas hati dan semua orang boleh menikmati pelbagai perkhidmatan di sini daripada beberapa kedai dan membolehkan anda mencari dan menyemaknya terlebih dahulu Dalam kebanyakan kes, apabila anda menyemak kedai ini, anda boleh mendapatkan sejumlah besar ulasan penggunaan sebenar daripada pelanggan. Semuanya boleh dijadikan rujukan untuk anda. Lihat beberapa senarai yang mesti dimakan dan mesti dimainkan di sini, yang membolehkan anda mencari tempat yang bagus dan membuat pembelian secara langsung sudah tentu, semua orang berpuas hati dengan beberapa komen anda
Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 am 09:39 AM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.
Bagaimana pula dengan Snapdragon g3x gen2
Mar 04, 2024 am 09:07 AM
Ramai pengguna tidak tahu sangat tentang prestasi Snapdragon g3xgen2, jadi mereka tidak berani untuk membeli produk yang sepadan Mari kita bercakap secara ringkas tentang prestasi Snapdragon g3xgen2. Bagaimana pula dengan Snapdragon g3xgen2 Jawapan: Peningkatan keseluruhan masih besar. Oleh itu, prestasi dari segi kesan pada asasnya sangat mengujakan. 1. Berbanding dengan generasi sebelumnya, pemproses Snapdragon G3xGen2 telah bertambah baik sebanyak 30%, manakala prestasi GPU meningkat dua kali ganda. 2. Pemproses ini boleh menyediakan sokongan untuk peranti pegang tangan dengan keupayaan permainan merentas platform, serta peranti untuk Android, PC dan permainan konsol awan. 3. Menyokong pengesanan sinar, dan juga membolehkan pengguna menyiarkan secara langsung semasa permainan 4. Dengan fungsi sambungan gelombang WiFi7 dan 5G milimeter, anda boleh
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap
Dec 17, 2023 pm 05:13 PM
JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami
