面對物件五星好評

weixin_44646551發表於2020-11-01
物件

面對物件京東五星好評（利用cookie來儲存資料）

大家好，今天給大家帶來的是京東五心好評案例，及使用cookie儲存好評的資料案例

效果預覽

在這裡插入圖片描述

  1. 當我們滑鼠懸浮再小星星上時候，小星星將會被點亮，之前的星星也會被點亮並且在所懸浮的星星之上出現對應的表情，同時分數也會改變。
  2. 當我們單擊是中星星後，滑鼠一移出會改變星星亮度。且之前的星星在滑鼠移入後不改變，之後的會隨之改變。
  3. 在我們重新開啟頁面時，或者重新整理頁面時，上次評分仍然儲存。

所用資源

  1. 星星圖片在這裡插入圖片描述
  2. 表情圖片在這裡插入圖片描述

程式碼實現。

  1. 首先介紹下所用到的兩個檔案Component.js和Utils.js：
    建立檔案截圖
    Component.js為通用類
export default class Component extends EventTarget{
//這裡繼承了EventTarget是希望其能丟擲事件
    elem;
    constructor(){
        super();//代表父類的構建函式，但是返回的是子類的例項，內部this指向子類的例項
        //相當於 EventTarget.prototype.constructor.cll(this),Es6要求
        this.elem=this.createElem();//建立容器
    }
    createElem(){
        if(this.elem) return this.elem;//如果傳入則不執行下面程式碼
        let div=document.createElement("div");
        //將
        return div;
    }
    appendTo(parent){
        if(typeof parent==="string")parent=document.querySelector(parent);
        parent.appendChild(this.elem);
        //將其插入頁面出
    }
}
  1. Utils.js為自行封裝的一些方法，後面用到哪些方法在做解釋說明

程式碼實現

fiveStar.js檔案：

import Component from "./Component.js"//引入Component.js
export default class fiveStar extends Component {
//繼承Component類以便使用其方法
    static STAR_NUM = 5//設定一個靜態的常量，因為星星有5個所有常量初始值為5
    starCon //存放星星的容器
    face	//笑臉
    date	//cookie的時效
    score    //分數
    pos//用來控制滑鼠移開星星變化的變數和存放cookie
    starArr = []//陣列，儲存每個裝星星的div
    constructor(_lable) {
//通過函式傳參的方式傳入文字資料—如‘商品符合度’
        super();
        this.date = new Date();
        this.date.setMonth(11);//設定date的時間
       //給window新增頁面開啟事件。
        window.addEventListener('load', () => {
           if(isNaN((document.cookie.split('=')[1])-0)){
this.setCookie({'pos':this.pos},this.date)
           };//頁面開啟是我們獲取cookie判斷cookie是否存在，不存在則將其設定為-1
            this.pos = (document.cookie.split('=')[1])-0
            this.chageStar(this.pos)//使其執行chageStar並將cookie值傳入
            this.chageScore(this.pos)//使其執行chageScore將cookie傳入
            this.chageFace(-1)//使其執行chageFace傳入-1
            
  
        })

 			//執行創造結構的函式
        this.createlable(_lable)  
        //因為前面執行了super（）所有擁有了elem'元素，將其作為整個容器給其設定樣式。
           Object.assign(this.elem.style, {
            width: "auto",
            float: "left",
            height: "16px",
            paddingBottom: "10px",
            marginRight: "20px",
            paddingTop: "16px"
        })

        this.createstar()//建立小星星
        this.createscore()//建立分數
    	//建立文字，為圖中的‘商品符合度’位置
    createlable(_lable) {
        let lable = document.createElement("span")
        //將傳入的資料文字插入span標籤
        lable.textContent = _lable
		//再將span標籤插入容器
        this.elem.appendChild(lable)
        Object.assign(lable.style, {
            float: "left",
            height: "16px",
            lineHeight: "16px",
            marginRight: "10px",
            overflow: "hidden",
            whiteSpace: "nowrap",
            textOverflow: "ellipsis",
            font: '12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif',
            color: "#666"
        });

    }
    createstar() {
    //與上方插入文字同理，不作贅述
        this.starCon = document.createElement("div")
        Object.assign(this.starCon.style, {
            float: "left",
            height: "16px",
            position: "relative",
            marginTop: "1px"
        })
        //利用迴圈建立星星
        for (let i = 0; i < fiveStar.STAR_NUM; i++) {
            let star = document.createElement("div")
            Object.assign(star.style, {
                width: "16px",
                height: "16px",
                float: "left",
                backgroundImage: "url(./img/commstar.png)",
            })

            this.starCon.appendChild(star)
            //將建立的星星儲存到已經準備好的陣列裡
            this.starArr.push(star)

        }
        //給星星容器做事件委託，新增事件
        this.starCon.addEventListener('mouseover', e => this.mouseHandler(e))
        this.starCon.addEventListener('click', e => this.mouseHandler(e))
        this.starCon.addEventListener('mouseleave', e => this.mouseHandler(e))
     //建立笑臉
        this.face = document.createElement('div')
        Object.assign(this.face.style, {
            width: "16px",
            height: "16px",
            backgroundImage: "url(./img/face-red.png)",
            position: "absolute",
            top: "-16px",
            display: "none"
        })
        this.starCon.appendChild(this.face)
        this.elem.appendChild(this.starCon)
    }
    createscore() {
    //建立分數
        this.score = document.createElement('div')
        Object.assign(this.score.style, {
            position: "relative",
            width: "30px",
            height: "16px",
            float: 'left',
            top: "1px",
            marginLeft: "10px",
            lineHeight: "16px",
            textAlign: "right",
            color: "#999",
            font: '12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif',
        });
        this.score.textContent = "0分";
        this.elem.appendChild(this.score)
    }
    //事件處理函式使用swich判斷事件型別
    mouseHandler(e) {
        switch (e.type) {
//因為click和mouseover事件有部分程式碼重複。為簡化程式碼不加break做穿透
            case "click":

            case 'mouseover':
                let index = this.starArr.indexOf(e.target);//再儲存有星星的陣列裡查詢事件源星星target的下標位置
                if (index < 0) return
                //判斷事件型別
                if (e.type === "click") {
               // 給pos賦值為index，並且將pos儲存在cookie裡
                    this.pos = index;
                    //此處為自行封裝設定cookie的函式
                    this.setCookie({ 'pos': this.pos }, this.date)
                }
                else {
                    this.chageStar(index)
                    this.chageScore(index)
                    this.chageFace(index + 1)
                }


                break;

            case 'mouseleave':
                this.chageStar(this.pos)
                this.chageScore(this.pos)
                this.chageFace(-1)
                break;

        }
    }
    //事件觸發時改變星星的函式
    chageStar(index) {
    迴圈遍歷所有的星星
        for (let i = 0; i < this.starArr.length; i++) {
            //因為index為單擊或者移入的星星的位置，pos為單擊星星時的位置，故設定一下條件使其自己和前面的星星都變亮
            if (i <= index || i <= this.pos) { this.starArr[i].style.backgroundPositionY = '16px' }



            else { this.starArr[i].style.backgroundPositionY = '0px' }

        }
    }
    chageScore(index) {
       //改變分數，因為標從0開始所以分數加一
        this.score.textContent = index + 1 + '分'
    }
    chageFace(n) {
        //改變表情的位置和不同表情及滑鼠移出星星容器時隱藏
       // 因為圖片是反的，使其順過來
      
        let index = fiveStar.STAR_NUM - n
        this.face.style.left = (n - 1) * 16 + "px"

        this.face.style.backgroundPositionX = (20 * -index) + "px"
        this.face.style.display = "block"
        if (n < 0) {
            
            this.face.style.display = "none"
        }

    }
    setCookie(data, date) {
 //此為設定cookie的函式當未傳入有效期自動設定
        var str = date === undefined ? "" : ";expires=" + date.toUTCString();
        //cookie以物件形式傳入，然後遍歷如果物件有多則使用json.stringigy()方法對其進行深拷貝
        for (var prop in data) {
            var value = data[prop]
            if (typeof value === "object" && value !== null) value = JSON.stringify(value);
            document.cookie = prop + "=" + value + str;
        }
    }

}
  1. 接下來就是html檔案了
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        
        import fiveStar from './js/fiveStar.js'
        //此處可有一個陣列為要傳入的資料，遍歷陣列將資料傳入可批量生成各種型別的五星好評
        let star = new fiveStar('商品符合度')
        star.appendTo("body")
    </script>
</body>

</html>

相關文章