通過JavaScript來實現(xiàn)售后五星好評

新進小設計 2021-09-03

展開全文

來博客園的第一篇隨筆，本來是想隨便發(fā)一下的，但是后來感覺還是要發(fā)一下有紀念意義的文章，所以還是決定寫一下自己當時發(fā)在別的論壇的原創(chuàng)文章，哈哈。

通過JavaScript來實現(xiàn)五星好評。

這個功能相信各位都不陌生，不論是淘寶還是京東，亦或者是各類微商，都離不開好評這個東西，好評多了，平臺對你的關照也就多了起來。

這個由于是好早以前寫的代碼了，效果圖就不放了，我把所有需要本地的東西都用在線的方式替代了，比如說圖片就用圖床給替代了，別的也沒啥需要替代的了。

話不多說，直接上一下代碼，然后我們簡單的解析一下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body,
        a,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        a,
        b,
        i,
        em,
        ul,
        ol,
        li,
        strong,
        table,
        th,
        tr,
        td,
        img,
        form,
        input,
        button,
        select,
        option,
        textarea {
            margin: 0;
            padding: 0;
        }
        .body {
            text-align: center;
            margin: 10px auto;
            width: 800px;
            height: 64px;
            background-color: aqua;
        }
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            /* border: 1px solid red; */
        }
        span.star {
            background: url(https://s3./2020/11/21/Dl492V.png) no-repeat;
            /* cursor: pointer; */
            /* vertical-align: -2px; */
            
            /*span為行內元素，不能直接設置寬高，轉換成block*/
            
        }

        span.star-off {
            background-position: -40px 0;
        }
        
    </style>
</head>

<body>
    <!-- 圖片精靈技術----網(wǎng)站上有許多的icon圖片，比如說打評分等等，如果每個都單獨做的話，每次請求都會對服務器造成很大的壓力，所以就把所有的
    圖標做在一起了
    -->
    <div class="body">
        <div>
            <span style="width: 150px;">請選擇您的評價:</span>
            <span class="star star-off"></span>
            <span class="star star-off"></span>
            <span class="star star-off"></span>
            <span class="star star-off"></span>
            <span class="star star-off"></span>
            <span id="pingjia"></span>
        </div>
    </div>
    <script>
        //獲取對象
        // var div = document.querySelector("div");
        // console.log(div);
        // var span = document.querySelectorAll(".star")
        // console.log(span);
        var star = document.getElementsByClassName("star");
        var pingjia = document.querySelector("#pingjia");
        var pingjias = ["很差","較差","一般","良好","很好"];
        var len = star.length;
        onoff = true;  //開關，判斷是否點擊，點擊后不執(zhí)行移入移出事件
        for(var i = 0;i < len;i++){
            //綁定鼠標移入 移出 點擊
            star[i].index = i;
            
            star[i].onmouseover = function(){
                
                if(onoff){
                    var num = this.index;
                    pingjia.innerHTML = pingjias[num];
                    for(var i = 0;i <= num;i++){
                    star[i].style.backgroundPosition = "0 0";
                }
                }
            }
            star[i].onmouseout = function(){
                
                if(onoff){
                    var num = this.index;
                    pingjia.innerHTML = "";
                    for(var i = 0;i<=num;i++){
                    star[i].style.backgroundPosition = "-40px 0";
                }
                }
            }
            star[i].onclick =function() {
                    onoff=false;
                    
                    pingjia.innerHTML = "";
                    for(var j = 0;j < len;j++){
                    star[j].style.backgroundPosition = "-40px 0";
                }
                    var num = this.index;
                    pingjia.innerHTML = pingjias[num];
                    for(var i = 0;i <= num;i++){
                    star[i].style.backgroundPosition = "0 0";
            }}
        }
    </script>
</body>

</html>

其實思路非常簡單，就是通過css屬性中的定位來進行圖片的移動，就是這樣，一個星滿一個星空，然后我們通過位移和大小來設置讓他只能顯示一個，之后通過js來判斷用戶的鼠標移動即可實現(xiàn)功能。

首先呢，先讓所有的星星隱藏起來，也就是讓他們顯示的位置移到右面，顯示空星，之后通過js中的onmouseover來判斷鼠標的移動，根據(jù)移動的位置來實現(xiàn)評分的改變，也就是那個innerHtml，通過這個來改變文字效果，再接著也就是增加別的效果了，比如說評分后想要改變之類的，我們先清空一下屬性，然后直接添加新的屬性就行了，因為畢竟計算器的運算遠非人能相比的，所以雖然看著代碼是這個先那個后，但是人眼根本分辨不出來的，然后基本上大部分的功能就實現(xiàn)了。