Idées pour créer des effets de classement par étoiles Taobao avec les compétences JavaScript

Idées pour créer des effets de classement par étoiles Taobao avec les compétences JavaScript_javascript

WBOY

Libérer： 2016-05-16 15:30:56

original

1392 Les gens l'ont consulté

L'éditeur vient également de commencer à apprendre JavaScript et a estimé que l'effet de notation par étoiles Taobao était excellent, alors j'ai eu l'idée d'en écrire un moi-même. J'aimerais d'abord partager avec vous l'effet de mise en œuvre :

Ci-joint le code source que j'ai écrit

<!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>

Copier après la connexion

Au début, j'en utilisais deux pour des boucles comme celle-ci :

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

Copier après la connexion

Les maîtres ont peut-être remarqué que le span en HTML a perdu sa fonction après la boucle for, ce qui signifie qu'il ne peut être évalué qu'une seule fois...

J'ai donc suivi cette idée et j'ai pensé à utiliser un tableau pour résoudre ce problème, qui consiste à stocker chaque étoile dans l'effet de classement par étoiles dans le tableau. J'ai écrit le code ci-dessus, mais l'affiche a également fait une petite erreur, ce qui m'a vraiment dérangé. depuis longtemps....
array[0]=document.getElementById("oneStar").innerText;
Grâce au tableau défini de cette manière... le résultat peut être imaginé. Le code suivant ne peut pas du tout changer la note. Plus tard, j'ai réalisé qu'une telle définition attribue directement le contenu de l'élément avec l'ID onestar au tableau, ce qui signifie que le tableau consiste en J'ai un pointeur vers le tableau.... Naturellement, je ne peux pas changer la valeur de l'élément correspondant, j'ai finalement compris....
. Ensuite j'ai ajouté quelques effets CSS
Le produit fini ressemble à ceci :

<!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>

Copier après la connexion

Ce qui précède est l'idée d'utiliser JavaScript pour créer un effet de notation par étoiles Taobao. Le langage est très simple et facile à comprendre. J'espère qu'il sera utile à l'apprentissage de chacun. Explorons davantage la magie de JavaScript avec l'éditeur et. progresser ensemble.