Rumah > Artikel > hujung hadapan web > js untuk mencapai kemahiran effect_javascript rating bintang

js untuk mencapai kemahiran effect_javascript rating bintang

WBOYasal: 2016-05-16 16:04:531209semak imbas

Contoh dalam artikel ini menerangkan cara untuk mencapai kesan penarafan bintang dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Banyak laman web mempunyai kesan penarafan bintang seperti gambar di bawah Hari ini kita akan melihat cara menggunakan js untuk mencapai kesan penarafan.

Penjelasan terperinci tentang kesan
1. Apabila tetikus dialihkan, bintang menyala dan teks di bawah dipaparkan. Apabila tetikus dialihkan keluar, bintang akan menjadi kelabu dan teks di bawah tidak akan dipaparkan.
2. Gerakkan tetikus ke atas bintang, dan semua bintang sebelum ia akan menyala.
3. Gerakkan tetikus ke bintang dan klik, keputusan pemarkahan akan dipaparkan.

Kodnya adalah seperti berikut

<!doctype html>
<html>
<head>
 <meta charset="gbk"> 
 <title>切换</title>
 <style>
.wrapper{width:300px; margin:10px auto; font:14px/1.5 arial;}
/*tab*/
#star{overflow:hidden;}
#star li{
float:left;
width:20px;
height:20px;
margin:2px;
display:inline;
color:#999;
font:bold 18px arial;
cursor:pointer
}
#star .act{
color:#c00
}
#star_word{
width:80px;
height:30px;
line-height:30px;
border:1px solid #ccc;
margin:10px;
text-align:center;
display:none
}
</style>
<script>
window.onload = function(){
 var star = document.getElementById("star");
 var star_li = star.getElementsByTagName("li");
 var star_word = document.getElementById("star_word");
 var result = document.getElementById("result");
 var i=0;
 var j=0;
 var len = star_li.length;
 var word = ['很差','差','一般',"好","很好"]
 for(i=0; i<len; i++){
 star_li[i].index = i;
 star_li[i].onmouseover = function(){
  star_word.style.display = "block";
  star_word.innerHTML = word[this.index];
  for(i=0; i<=this.index; i++){
   star_li[i].className = "act";
  }
 }
 star_li[i].onmouseout = function(){
  star_word.style.display = "none";
  for(i=0; i<len; i++){
   star_li[i].className = "";
  }
 }
 star_li[i].onclick = function(){
  result.innerHTML = (this.index+1)+"分";
 }
 }
}
</script>
</head>
<body>
<div class="wrapper">
打分结果 
<span id="result"></span>
<ul id="star">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<div id="star_word">一般</div>
</div> 
</body> 
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js untuk mencapai pelbagai kesan gerakan pada kemahiran page_javascript yang samaArtikel seterusnya：js untuk mencapai pelbagai kesan gerakan pada kemahiran page_javascript yang sama

Artikel berkaitan

Lihat lagi