快捷導(dǎo)航

原生Javascript實(shí)現(xiàn)五角星評(píng)分

更新時(shí)間：2022年09月01日 11:26:08 作者：Shay_Liu

這篇文章主要為大家詳細(xì)介紹了原生Javascript實(shí)現(xiàn)五角星評(píng)分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

利用原生Javascript實(shí)現(xiàn)五角星評(píng)分,可以打半分.話不多說(shuō)先上代碼。

html部分

<div class="setStarRate">
        <div class="star">
            <span id="star">
                <li>
                    <a href="javascript:void(0)" οnclick="rateStar(1)"></a>
                    <a href="javascript:void(0)" οnclick="rateStar(2)"></a>
                </li>
                <li>  
                 <a href="javascript:void(0)" οnclick="rateStar(3)"></a>
                  <a href="javascript:void(0)" οnclick="rateStar(4)"></a> 
               </li>
               <li>
                    <a href="javascript:void(0)" οnclick="rateStar(5)"></a>
                    <a href="javascript:void(0)" οnclick="rateStar(6)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)" οnclick="rateStar(7)"></a>
                    <a href="javascript:void(0)" οnclick="rateStar(8)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)" οnclick="rateStar(9)"></a>
                    <a href="javascript:void(0)" οnclick= "rateStar(10)"></a>
                </li>
            </span>
        </div>
        <div class="grade">
            <span id="getStarRate">0.0</span>
    </div>
</div>

CSS部分:

<style>
? ? .grade span {
? ? ? ? margin-left: 15px;
? ? ? ? line-height: 30px;
? ? }
?
? ? span {
? ? ? ? width: 50%;
? ? ? ? height: 70%;
? ? ? ? padding: 0;
? ? ? ? margin: 0 25%;
? ? }
?
? ? span li {
? ? ? ? width: 20px;
? ? ? ? height: 20px;
? ? ? ? display: inline-block;
? ? ? ? background: url("") no-repeat;//這里輸入灰色狀態(tài)星星的圖片鏈接
? ? }
?
? ? span li a {
? ? ? ? height: 20px;
? ? ? ? width: 10px;
? ? ? ? display: inline-block;
? ? ? ? display: block;
? ? ? ? float: left;
? ? }
</style>

js部分

function rateStar(index) {
? ?var star = document.getElementById('star');
? ?var items = star.getElementsByTagName("li");
? ? ?  index = parseInt(index) - 1; //因?yàn)橐粋€(gè)星星由2個(gè)a標(biāo)簽組成的,所以減掉1
? ? ? ?  var tem = -1;
? ? ? ? ?//遍歷所有的li標(biāo)簽
? ? ? ? ? ?for (var i = 0; i < items.length; i++) {
? ? ? ? ? ?  if (index > i * 2) { //當(dāng)index大于i*2的時(shí)候,就填充i個(gè)數(shù)量的滿格星星
? ? ? ? ? ?  items[i].style.background = "url() no-repeat";
? ? ? ? ? ?? items[i].style.backgroundSize = "100% 100%";
? ? ? ? ? ? ?} else {
? ? ? ? ? ? ?if (tem == -1) {
? ? ? ? ? ? ? ? ? ? ?tem = i;
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?items[i].style.background = "url() no-repeat"; //填充灰色狀態(tài)的星星
? ? ? ? ? ? ? ? ? ?items[i].style.backgroundSize = "100% 100%";
? ? ? ? ? ? ? }
? ? ?   ?}
? ? ?   ? //判斷index是否等于偶數(shù)
? ? ? ? ? ?if (index == parseInt(tem) * 2) {
? ? ? ? ? //當(dāng)前l(fā)i元素的背景設(shè)置成半格星星狀態(tài)
? ? ? ? ?items[tem].style.background = "url() no-repeat";
? ? ? ? ?items[tem].style.backgroundSize = "100% 100%";
? ? ? ??}
? ? document.getElementById('getStarRate').innerHTML = (parseInt(index) + 1) * 0.5;
},

運(yùn)行結(jié)果: