快捷導(dǎo)航

很酷的星級(jí)評(píng)分系統(tǒng)原生JS實(shí)現(xiàn)

更新時(shí)間：2016年08月25日 16:55:24 作者：蘇福

這篇文章主要weidajiaxiangxi介紹了很酷的星級(jí)評(píng)分系統(tǒng)原生JS實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天我又寫(xiě)了個(gè)很酷的實(shí)例：星級(jí)評(píng)分系統(tǒng)（可自定義星星個(gè)數(shù)、顯示信息）

sufuStar.star();使用默認(rèn)值5個(gè)星星，默認(rèn)信息
var msg = [........]; sufuStar.star(10,msg);自定義星星個(gè)數(shù)為10、顯示信息msg格式參考默認(rèn)值，條數(shù)必須和星星個(gè)數(shù)一致；

自己實(shí)現(xiàn)一些實(shí)例，有個(gè)好處，能增加應(yīng)用各知識(shí)點(diǎn)的熟練度，還能檢驗(yàn)出自己的薄弱項(xiàng)！一經(jīng)發(fā)現(xiàn)，立即翻API文檔惡補(bǔ)！

不知道是不是我太笨，這個(gè)實(shí)例居然寫(xiě)了整整一天！

不廢話了，先說(shuō)下這個(gè)實(shí)例涉及的知識(shí)點(diǎn)：
1.用CSS的border來(lái)畫(huà)個(gè)三角形，并用before來(lái)把它加到其它元素上；
2.學(xué)習(xí)如何用CSS來(lái)定位元素；
3.學(xué)習(xí)事件的代理；
4.如何優(yōu)化性能；
5.String對(duì)象的match方法的應(yīng)用，正則表達(dá)式的應(yīng)用；
6.注冊(cè)事件與事件處理，需要兼容IE的寫(xiě)法；
7.學(xué)習(xí)如何利用‘||'給變量設(shè)置默認(rèn)值；
8.簡(jiǎn)化代碼：將可能要重復(fù)寫(xiě)的代碼拿出來(lái)，單獨(dú)寫(xiě)成一個(gè)函數(shù)；

下面是帶注釋的完整代碼，碰到不懂得就查文檔吧，以我目前的水平只能寫(xiě)成這樣了，若有好的建議，歡迎前輩指出！

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
  margin: 0;
  padding: 0;
 }
 #star{
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  bottom: 0;
  margin: auto;
  width: 80%;
  font-size: 12px;
 }
 #star-div{
  margin:5px;
  font-size: 0;
 }
 #star-div a{
  display: inline-block;
  width: 21px;
  height: 21px;
  background: url(http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat;

 }
 #star-div .on{
  background: url(http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat;
 }
 #star-info{
  position: absolute;
  top: 55px;
  left: -30px;
  display: none;
  width: 155px;
  height: 50px;
  padding: 2px;
  line-height: 17px;
  border-radius: 8px;
  background-color: gold;
  z-index: 5;
 }
 #star-info:before{
  content: '';
  border-bottom: 10px solid gold;
  border-left: 10px solid rgba(0,0,0,0);
  border-right: 10px solid rgba(0,0,0,0);
  position: absolute;
  left: 35px;
  top: -10px;
 }
 #star-span{line-height: 14px}
 #star-info strong,#star-span strong{
  color: red;
 }
 </style>
 <script>
 window.onload = function(){
  var sufuStar = function (){
  //工具函數(shù)
  function gbyId(id){return document.getElementById(id);}

  function addEvent(elem,type,func){ //兼容IE
   if(elem.addEventListener){
   elem.addEventListener(type,func,false)
   }else if(elem.attachEvent){
   elem.attachEvent('on'+type,func)
   }
  }
  function getIndex(event) { //兼容IE
   var e = event || window.event;
   var t = e.target || e.srcElement;
   if (t.tagName.toLowerCase() === 'a') {
   return parseInt(t.innerHTML);
   }
  }
  function showInfo(index,msg){
   var info = gbyId('star-info');
   info.style.display = 'block';
   info.style.left = index*21-51+'px';
   info.innerHTML = "<strong> "+index+'分 '+msg[index-1].match(/(.+)\|/)[1]+'<br />'+'</strong>'+msg[index-1].match(/\|(.+)/)[1];
  }
  function appenStar(elem,nums){
   var frag = document.createDocumentFragment(); //為了提高性能,因使用DocumentFragment一次性append,這樣頁(yè)面只重新渲染一次
   for(var i = 0;i<nums;i++){
   var a =document.createElement('a');
   a.innerHTML = i+1;
   a.href = "javascript:;"; //阻止瀏覽器的點(diǎn)擊鏈接的默認(rèn)行為
   frag.appendChild(a);
   }
   elem.appendChild(frag);
  }
  //主體函數(shù)
  function star(num,myMsg){
   var n = num||5; //當(dāng)num有值則取其值,無(wú)值則取默認(rèn)值5;
   var clickStar=curentStar=0; //clickStar保存點(diǎn)擊狀態(tài)
   var msg = myMsg||[
   "很不滿意|差得太離譜，與賣(mài)家描述的嚴(yán)重不符，非常不滿",
   "不滿意|部分有破損，與賣(mài)家描述的不符，不滿意",
   "一般|質(zhì)量一般，沒(méi)有賣(mài)家描述的那么好",
   "滿意|質(zhì)量不錯(cuò)，與賣(mài)家描述的基本一致，還是挺滿意的",
   "非常滿意|質(zhì)量非常好，與賣(mài)家描述的完全一致，非常滿意"
   ];
   var starContainer = gbyId('star-div');
   appenStar(starContainer,n);
   addEvent(starContainer,'mouseover',over); //采用事件代理模式(通過(guò)<a>標(biāo)簽的父元素starContainer來(lái)代理事件)
   addEvent(starContainer,'mouseout',out);
   addEvent(starContainer,'click',click);
   function over(event){
   if(getIndex(event)){ //若getIndex(event)取不到值,說(shuō)明當(dāng)前觸發(fā)事件的目標(biāo)不是<a>標(biāo)簽
    var index = getIndex(event);
    change(index);
    showInfo(index,msg);
   }
   }
   function out(event){
   change(); //將評(píng)分設(shè)為已點(diǎn)擊狀態(tài)clickStar
   gbyId('star-info').style.display = 'none'
   }
   function click(event) {
   if (getIndex(event)) {
    var index = getIndex(event);
    clickStar = index; //保存點(diǎn)擊狀態(tài)
    gbyId('star-info').style.display = 'none';
    gbyId('star-span').innerHTML = "<strong>" + index + '分 ' + msg[index - 1].match(/(.+)\|/)[1] + '</strong>'+'<br />'+ msg[index - 1].match(/\|(.+)/)[1];
   }
   }
   function change(index){
   curentStar = index||clickStar;
   for(var i=0;i<n;i++){
    starContainer.children[i].className = i<curentStar ? 'on' : ''
   }
   }
  }
  return {
   star:star
  }
  }(); //這里的()表示函數(shù)立即執(zhí)行,這樣變量sufuStar才能調(diào)用匿名函數(shù)的返回值star

  //調(diào)用執(zhí)行: sufuStar.star(num,myMsg),參數(shù)可為空,參數(shù)num,myMsg將設(shè)為默認(rèn)值
  sufuStar.star();
 }
 </script>
</head>
<body>
<div id="star">
 <span>點(diǎn)擊星星打分:</span>
 <div id="star-div">
 </div>
 <span id="star-span"></span>
 <p id="star-info">
 </p>
</div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: