Idea untuk mencipta kesan penarafan bintang Taobao dengan kemahiran JavaScript

Idea untuk mencipta kesan penarafan bintang Taobao dengan kemahiran JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 15:30:56

asal

1402 orang telah melayarinya

Editor juga baru mula belajar JavaScript, dan merasakan kesan penarafan bintang Taobao adalah hebat, jadi saya mendapat idea untuk menulisnya sendiri, saya ingin berkongsi dengan anda kesan pelaksanaan terlebih dahulu:

Lampirkan kod sumber yang saya tulis

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script language="JavaScript" type="text/javascript">
  function star(n)
  {
   var array=new Array();
   array[0]=document.getElementById("oneStar");
   array[1]=document.getElementById("twoStar");
   array[2]=document.getElementById("threeStar");
   array[3]=document.getElementById("fourStar");
   array[4]=document.getElementById("fiveStar");
   for(var i=0;i<=n;i++)
   {
    array[i].innerText="★";
   }
   for( var j=4;j>n;j--)
   {
    array[j].innerText="☆";
   }
   document.getElementById("evaluate").innerText="您的评价是"+(n+1)+"星";
  }
 </script>
 <title>评星</title>
</head>
<body>
<strong>请您对我们作出评价:</strong>
<span id="star">
 <span style="cursor: pointer " onclick="star(0)"id="oneStar" >☆</span>
 <span style="cursor: pointer " onclick="star(1)" id="twoStar" >☆</span>
 <span style="cursor: pointer " onclick="star(2)" id="threeStar" >☆</span>
 <span style="cursor: pointer " onclick="star(3)" id="fourStar" >☆</span>
 <span style="cursor: pointer " onclick="star(4)" id="fiveStar" >☆</span>
</span><span id="evaluate"></span>

</body>
</html>

Salin selepas log masuk

Pada mulanya, saya menggunakan dua gelung seperti ini:

 for(var i=0;i<=n;i++)
   {
    document.getElementById("fiveStar").innerText="★";
   }
   for( var j=4;j>n;j--)
   {
    document.getElementById("fiveStar").innerText="☆";
   }

Salin selepas log masuk

Guru mungkin perasan bahawa span dalam HTML telah kehilangan fungsinya selepas gelung for, yang bermaksud ia hanya boleh dinilai sekali...
Jadi saya mengikuti idea ini dan berfikir untuk menggunakan tatasusunan untuk menyelesaikan masalah ini, iaitu untuk menyimpan setiap bintang dalam kesan penarafan bintang dalam tatasusunan saya menulis kod di atas, tetapi poster itu juga membuat kesilapan kecil, yang sangat mengganggu saya untuk masa yang lama....
array[0]=document.getElementById("oneStar").innerText;
Melalui tatasusunan yang ditakrifkan dengan cara ini... hasilnya boleh dibayangkan Kod berikut tidak boleh mengubah penarafan sama sekali Kemudian saya menyedari bahawa definisi sedemikian secara langsung memberikan kandungan elemen dengan ID onestar, yang bermaksud bahawa tatasusunan terdiri daripada saya mendapat penunjuk ke tatasusunan.... Sememangnya, saya tidak boleh menukar nilai elemen yang sepadan akhirnya saya dapat mengetahuinya....
Kemudian saya menambah beberapa kesan CSS
Produk siap kelihatan seperti ini:

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>淘宝评分效果</title>
 <style type="text/css">
  ul, li {margin: 0; padding: 0; border: 0;}
  .shop-rating {
   height: 25px;
   overflow: hidden;
   zoom: 1;
   padding: 2px 0;
   position: relative;
   z-index: 999;
   font:12px Arial;
   color:#000;
   line-height:1.2em
  }
  .shop-rating span {
   height: 23px;
   display: block;
   line-height: 23px;
   float: left;
  }
  .shop-rating span.title {
   width: 125px;
   text-align: right;
   margin-right: 5px;
  }
  .shop-rating ul {
   float: left;
  }
  .shop-rating .result {
   margin-left: 20px;
   padding-top: 2px;
  }
  .shop-rating .result span {
   color: #ff6d02;
  }
  .rating-level,
  .rating-level a {
   background: url(http://files.jb51.net/demoimg/201007/o_star.png) no-repeat scroll 1000px 1000px;
  }
  .rating-level {
   background-position: 0px 0px;
   width: 120px;
   height: 23px;
   position: relative;
   z-index: 1000;
  }
  .shop-rating .result em {
   color: #f60;
   font-family: arial;
   font-weight: bold;
  }
  .rating-level li {
   display: inline;
  }
  .rating-level a {
   line-height: 23px;
   height: 23px;
   position: absolute;
   top: 0px;
   left: 0px;
   text-indent: -999em;
   *zoom: 1;
   outline: none;
  }
  .rating-level a.one-star {
   width: 20%;
   z-index: 6;
  }
  .rating-level a.two-stars {
   width: 40%;
   z-index: 5;
  }
  .rating-level a.three-stars {
   width: 60%;
   z-index: 4;
  }
  .rating-level a.four-stars {
   width: 80%;
   z-index: 3;
  }
  .rating-level a.five-stars {
   width: 100%;
   z-index: 2;
  }
  .rating-level .current-rating, .rating-level a:hover {background-position:0 -28px}
  .rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating{background-position:0 -116px;}
  .rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating{background-position:0 -28px;}
 </style>
</head>
<body>
<div class="shop-rating">
 <span class="title">你对我人品的评价:</span>
 <ul class="rating-level" id="stars2">
  <li><a href="javascript:void(0);" class="one-star" star:value="20">20</a></li>
  <li><a href="javascript:void(0);" class="two-stars" star:value="40">40</a></li>
  <li><a href="javascript:void(0);" class="three-stars" star:value="60">60</a></li>
  <li><a href="javascript:void(0);" class="four-stars" star:value="80">80</a></li>
  <li><a href="javascript:void(0);" class="five-stars" star:value="100">100</a></li>
 </ul>
 <span id="stars2-tips" class="result"></span>
 <input type="hidden" id="stars2-input" name="b" value="" size="2" />
</div>
<script>
 var TB = function() {
  var T$ = function(id) { return document.getElementById(id) }
  var T$$ = function(r, t) { return (r || document).getElementsByTagName(t) }
  var Stars = function(cid, rid, hid, config) {
   var lis = T$$(T$(cid), 'li'), curA;
   for (var i = 0, len = lis.length; i < len; i++) {
    lis[i]._val = i;
    lis[i].onclick = function() {
     T$(rid).innerHTML = '<em>' + (T$(hid).value = T$$(this, 'a')[0].getAttribute('star:value')) + '分</em> - ' + config.info[this._val];
     curA = T$$(T$(cid), 'a')[T$(hid).value / config.step - 1];
    };
    lis[i].onmouseout = function() {
     curA && (curA.className += config.curcss);
    }
    lis[i].onmouseover = function() {
     curA && (curA.className = curA.className.replace(config.curcss, ''));
    }
   }
  };
  return {Stars: Stars}
 }().Stars('stars2', 'stars2-tips', 'stars2-input', {
  'info' : ['人品极差', '人品不咋地', '人品一般吧', '人品不错', '人品极好啊'],
  'curcss': ' current-rating',
  'step': 20
 });
</script>
</body>
</html>

Salin selepas log masuk

Di atas adalah idea menggunakan JavaScript untuk mencipta kesan penarafan bintang Taobao Bahasa ini sangat mudah dan mudah difahami. Saya harap ia akan membantu pembelajaran semua orang maju bersama.