JS+cookie實現(xiàn)購物評價五星好評功能
更新時間：2022年09月01日 12:57:06 作者：weixin_44447804
這篇文章主要為大家詳細介紹了JS+cookie實現(xiàn)購物評價五星好評功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS+cookie實現(xiàn)購物評價五星好評功能的具體代碼，供大家參考，具體內(nèi)容如下
案例實現(xiàn)的是購物評價中五星點評功能.
通過JS面向?qū)ο蠓椒?/strong>實現(xiàn)
利用cookie實現(xiàn)歷史點評保存的功能,在下一次打開頁面仍保存上一次點評效果.
具體html,js代碼如下:
<!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">
? ? function getCookie(){
? ? ? ? ? ? return document.cookie.split(";").reduce((value,item,index)=>{
? ? ? ? ? ? ? ? var arr=item.split("=");
? ? ? ? ? ? ? ? var t=arr[1].trim();
? ? ? ? ? ? ? ? try{
? ? ? ? ? ? ? ? ? ? t=JSON.parse(t);
? ? ? ? ? ? ? ? }catch(e){
? ? ? ? ? ? ? ? ? ? t=t;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? value[arr[0].trim()]=t;
? ? ? ? ? ? ? ? return value;
? ? ? ? ? ? },{})
? ? }
? ? ? ? if(document.cookie.length>0){
? ? ? ? var a=getCookie();
? ? ? ? var keys=Object.keys(a);
? ? ? ? console.log(a)
? ? ? ? console.log(keys)
? ? ? ? }
? ? ? ? var list=["用戶體驗","物流速度","物流服務","商家態(tài)度","商品包裝"]
? ? ? ? import Starr from "./js/Starr.js";
? ? ? ? list.forEach((item,index)=>{
? ? ? ? ? ? let star= new Starr(item);
? ? ? ? ? ? star.appendTo("body");
? ? ? ? ? ? var index=keys.indexOf(item);
? ? ? ? ? ? if(index>-1){
? ? ? ? ? ? ? ? star.prv=a[item]-1;
? ? ? ? ? ? ? ? star.changeScore(a[item]-1);
? ? ? ? ? ? ? ? star.changestar(a[item]-1);
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>JS代碼部分:
import Component from './Component.js';
export default class Starr extends Component{
? ? labelCon;
? ? starCon;
? ? startArr=[];
? ? score;
? ? face;
? ? prv;
? ? index;
? ? static EVERYSCORE={};
? ? static STARTNUM=5;
? ? constructor(_label){
? ? ? ? super();
? ? ? ? this.label=_label;
? ? ? ? Object.assign(this.elem.style,{
? ? ? ? ? ? width: "auto",
? ? ? ? ? ? float: "left",
? ? ? ? ? ? height: "16px",
? ? ? ? ? ? paddingBottom: "10px",
? ? ? ? ? ? marginRight: "20px",
? ? ? ? ? ? paddingTop:"16px"?
? ? ? ? });
? ? ? ? Starr.EVERYSCORE[_label]=0;
? ? ? ? this.creatLabel(_label);
? ? ? ? this.creatStartCon();
? ? ? ? this.creatScore();
? ? ? ? this.starCon.addEventListener("mouseover",e=>this.mouseHandler(e));
? ? ? ? this.starCon.addEventListener("mouseleave",e=>this.mouseHandler(e));
? ? ? ? this.starCon.addEventListener("click",e=>this.mouseHandler(e));
? ? ? ? // this.elem.addEventListener("change",e=>this.changeHandler(e));
? ? }
? ? //創(chuàng)建label容器
? ? creatLabel(label){
? ? ? ? this.labelCon=document.createElement("span");
? ? ? ? Object.assign(this.labelCon.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"
? ? ? ? });
? ? ? ? this.labelCon.textContent=label;
? ? ? ? this.elem.appendChild(this.labelCon);
? ? }
? ? //創(chuàng)建星星和笑臉的容器 starCon
? ? creatStartCon(){
? ? ? ? this.starCon=document.createElement("div");
? ? ? ? Object.assign(this.starCon.style,{
? ? ? ? ? ? float:"left",
? ? ? ? ? ? height:"16px",
? ? ? ? ? ? position:"relative",
? ? ? ? ? ? marginTop:"1px"
? ? ? ? });
? ? ? ? for(var i=0;i<Starr.STARTNUM;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.startArr.push(star)
? ? ? ? }
? ? ? ? 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);
? ? }
? ? //創(chuàng)建分數(shù)
? ? creatScore(){
? ? ? ? this.score = document.createElement("span");
? ? ? ? Object.assign(this.score.style,{
? ? ? ? ? ? position: "relative",
? ? ? ? ? ? width: "30px",
? ? ? ? ? ? height: "16px",
? ? ? ? ? ? top:"-2px",
? ? ? ? ? ? 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);
? ? }
? ? //鼠標事件
? ? mouseHandler(e){
? ? ? ? //進入時
? ? ? ? if(e.type==="mouseover"){
? ? ? ? ? ? this.face.style.display="block";
? ? ? ? ? ? let index=this.startArr.indexOf(e.target);
? ? ? ? ? ? if(index<0)return;
? ? ? ? ? ? this.changeFace(index);
? ? ? ? ? ? this.changeScore(index);
? ? ? ? ? ? if(this.prv>index){
? ? ? ? ? ? ? ? this.changestar(this.prv);
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? this.changestar(index);
? ? ? ? ? ? }
? ? ? ? ? ? //離開時
? ? ? ? }else if(e.type==="mouseleave"){
? ? ? ? ? ? this.face.style.display="none";
? ? ? ? ? ? if(this.prv>=0){
? ? ? ? ? ? ? ? this.changestar(this.prv);
? ? ? ? ? ? ? ? this.changeScore(this.prv);
? ? ? ? ? ? ? ? this.changeFace(this.prv);
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? this.changestar(-1);
? ? ? ? ? ? ? ? this.changeScore(-1);
? ? ? ? ? ? ? ? this.changeFace(0);
? ? ? ? ? ? }
? ? ? ? ? ? //點擊時
? ? ? ? }else if(e.type==="click"){
? ? ? ? ? ? let index=this.startArr.indexOf(e.target);
? ? ? ? ? ? this.prv=index;
? ? ? ? ? ? this.changestar(this.prv);
? ? ? ? ? ? this.changeScore(this.prv);
? ? ? ? ? ? this.changeFace(this.prv);
? ? ? ? ? ? this.getCookie(this.prv+1);
? ? ? ? ? ? Starr.EVERYSCORE[this.label]=index+1;
? ? ? ? }
? ? }
? ? //改變星星顏色方法
? ? changestar(index){
? ? ? ? for(var i=0;i<this.startArr.length;i++){
? ? ? ? ? ? if(i<=index)this.startArr[i].style.backgroundPositionY="-16px";
? ? ? ? ? ? else this.startArr[i].style.backgroundPositionY="0px";
? ? ? ? }
? ? }
? ? //分數(shù)改變方法
? ? changeScore(index){
? ? ? ? this.index=index;
? ? ? ? this.score.textContent=index+1+"分";
? ? ? ? if(index+1===0){
? ? ? ? ? ? this.score.style.color="#999";
? ? ? ? }else{ ? //否則有分數(shù),文字為紅色
? ? ? ? ? ? this.score.style.color="#e4393c";
? ? ? ? }
? ? }
? ? //笑臉變化
? ? changeFace(index){
? ? ? ? this.face.style.left=index*16+"px";
? ? ? ? this.face.style.backgroundPositionX=-(4-index)*20+"px";
? ? }
? ? //設置cookie
? ? getCookie(index){
? ? ? ? var date = new Date();
? ? ? ? date.setFullYear(2021);
? ? ? ? if(!index)index=0;
? ? ? ? document.cookie=this.label+"="+index+";expires="+date.toDateString();
? ? }
}最終實現(xiàn)效果: 下次打開仍會顯示該點評效果
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了JS?可選鏈的三種形勢及好處詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家詳細介紹了原生js實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
Webpack打包css后z-index被重新計算的解決方法
這篇文章主要跟大家分享了Webpack打包css后z-index被重新計算的解決方法，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-06-06
這篇文章主要介紹了JSON與XML的區(qū)別對比及案例應用的講解。本文涉及到XML和JSON優(yōu)缺點講解及對比，非常不錯，具有一定的參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
javascript sudoku 數(shù)獨智力游戲生成代碼
javascript sudoku 數(shù)獨智力游戲生成代碼，喜歡的朋友可以參考下。2010-03-03
這篇文章主要介紹了JS實現(xiàn)的簡單表單驗證功能,涉及javascript針對表單提交內(nèi)容的獲取、判斷、焦點設置等相關操作技巧,需要的朋友可以參考下2017-10-10
JavaScript創(chuàng)建對象的四種常用模式實例分析
這篇文章主要介紹了JavaScript創(chuàng)建對象的四種常用模式,結合實例形式分析了javascript使用工廠模式、構造函數(shù)模式、原型模式及動態(tài)原型模式創(chuàng)建對象的相關操作技巧與注意事項,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了使用js轉(zhuǎn)化毫秒為時間格式的具體實現(xiàn),需要的朋友可以參考下2014-04-04
BootStrap的彈出框(Popover)支持鼠標移到彈出層上彈窗層不隱藏的原因及解決辦法
彈出框（Popover）與工具提示（Tooltip）類似，提供了一個擴展的視圖。本文給大家介紹BootStrap的彈出框(Popover)支持鼠標移到彈出層上彈窗層不隱藏的原因及解決辦法，喜歡的朋友參考下吧2016-04-04
這篇文章主要介紹了js 中將多個逗號替換為一個逗號的代碼,需要的朋友可以參考下2014-06-06