JS+cookie实现购物评价五星好评功能
本文实例为大家分享了JS+cookie实现购物评价五星好评功能的具体代码，供大家参考，具体内容如下
案例实现的是购物评价中五星点评功能.
通过JS面向对象方法实现
利用cookie实现历史点评保存的功能,在下一次打开页面仍保存上一次点评效果.
具体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=["用户体验","物流速度","物流服务","商家态度","商品包装"]
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));
}
//创建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);
}
//创建星星和笑脸的容器 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);
}
//创建分数
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";
}
}
//分数改变方法
changeScore(index){
this.index=index;
this.score.textContent=index+1+"分";
if(index+1===0){
this.score.style.color="#999";
}else{ //否则有分数,文字为红色
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();
}
}
最终实现效果: 下次打开仍会显示该点评效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现cookie的操作
cookie 用于存储 web 页面的用户信息. 一.什么是 Cookie? Cookie 是一些数据, 存储于你电脑上的文本文件中. 当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息. Cookie 的作用就是用于解决 "如何记录客户端的用户信息": 当用户访问 web 页面时,他的名字可以记录在 cookie 中. 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录. Cookie 以名/值对形式存储,如下所示: usernam
-
利用js-cookie实现前端设置缓存数据定时失效
一.背景 业务需要在前端进行数据的缓存,到期就删除再进行获取新数据. 二.实现过程 前端设置数据定时失效的可以有下面2种方法: 1.当数据较大时,可以利用localstorage,存数据时候写入一个时间,获取的时候再与当前时间进行比较 2.如果数据不超过cookie的限制大小,可以利用cookie比较方便,直接设置有效期即可. 3.更多(请大神指点) 利用localstorage实现 localstorage实现思路: 1.存储数据时加上时间戳 在项目开发中,我们可以写一个公用的方法来进行存储的
-
详解javascript如何在跨域请求中携带cookie
目录 1.搭建环境 2.测试同源cookie 3.跨域请求携带cookie 4.总结 5.知识点 1. 搭建环境 1.生成工程文件 npm init 2.安装 express npm i express --save 3.新增app1.js,开启服务器1 端口:3001 const express = require('express') const app = express() const port = 3001 // 设置`cookie` app.get("/login", (r
-
JavaScript中Cookie的使用之如何设置失效时间
目录 1.什么是Cookie? 1.1简介 1.2特点 2.JavaScript操作Cookie 2.1基础操作 2.2设置失效时间 总结 1.什么是Cookie? 1.1简介 主要用于存储访问过的网站数据,存储浏览器的信息到本地计算机中,用于客户端和服务器端的通讯 Cookie 是为了解决“如何记住用户信息”而发明的: 当用户访问网页时,他的名字可以存储在 cookie 中. 下次用户访问该页面时,cookie 会“记住”他的名字. 注意:如果浏览器完全禁止cookie,大多数网站的基本功能都
-
JS前端操作 Cookie源码示例解析
目录 引言 源码分析 使用 源码 分析 set get remove withAttributes & withConverter 总结 引言 前端操作Cookie的场景其实并不多见,Cookie也因为各种问题被逐渐淘汰,但是我们不用Cookie也可以学习一下它的思想,或者通过这次的源码来学习其他的一些知识. 今天带来的是:js-cookie 源码分析 使用 根据README,我们可以看到js-cookie的使用方式: // 设置 Cookies.set('name', 'value'); //
-
JavaScript cookie与session的使用及区别深入探究
目录 1. cookie 1.1 什么是cookie 1.2 KOA中使用cookie 1.3 expires和maxAge 1.4 浏览器端设置和删除cookie 2. session 2.1 什么是session 2.2 koa中使用session 3. cookie和session的区别 4. cookie和session的使用场景 1. cookie 1.1 什么是cookie cookie是解决http无状态的一种方案. 服务端与服务端经过三次握手后建立连接,数据发送完后连接关闭,在之
-
JS+cookie实现购物评价五星好评功能
本文实例为大家分享了JS+cookie实现购物评价五星好评功能的具体代码,供大家参考,具体内容如下 案例实现的是购物评价中五星点评功能. 通过JS面向对象方法实现 利用cookie实现历史点评保存的功能,在下一次打开页面仍保存上一次点评效果. 具体html,js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
-
JavaScript实现商品评价五星好评
本文实例为大家分享了JavaScript实现商品评价五星好评的具体代码,供大家参考,具体内容如下 一.效果展示 二.代码实现 1.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>好评</title> <link rel="stylesheet" type="text/css" href
-
JS实现五星好评效果
用JS实现面向对象方法实现京东的五星好评效果. 鼠标滑过时的显示: 当评价完成后,关闭浏览器重新打开页面,还是上次的评价结果.用cookie实现. 具体实现如下: import Componenet from "./Component.js"; export default class Stars extends Componenet { label; STARS_NUM = 5; starArr = []; score = 0; starsCon; faceIcon; scoreCo
-
JS实现五星好评案例
本文实例为大家分享了JS实现五星好评案例的具体代码,供大家参考,具体内容如下 业务逻辑是我需要先创建出所有我需要用到的标签和样式再写出我们星星对应的行为,分数对应行为,笑脸对应行为,点击对应行为,抽象化出来,方便维护.并且在点击后我们抛出事件,记录下对应的name,分数等信息,保存在cookie中. 在编写过程中,一个是位置问题,很容易出现在没有创建就进行appendChild,第二个就是在添加行为时如何调整星星,笑脸的位置. <!DOCTYPE html> <html lang=&qu
-
JS实现评价的星星功能
刚开始接触写星星评价时,哇!估计脑子刚被驴踢了,竟然想到了最笨的办法-手工画五角星.妈呀! css样式都写了好大一串,还沾沾自喜终于画出来了,然后瞅一瞅旁边的妹子写得怎么样了,哇!人家机智的!直接用符号★就解决了!!!唉,智商捉急呀! 先上图看看吧: 虽然简单,还是有几个注意的地方: 1. 未点击时的hover效果,星星会随鼠标移动亮起来喔. 2. 点击后关闭hover效果. 3. 点击同一颗星星,星星可以随时换色. 具体代码展示: <!doctype html> <html> &
-
原生JS 购物车及购物页面的cookie使用方法
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物页面</title> <style> ul{list-style:none;padding:0;margin:0;} .goods li{display:inline-block;border:1px solid #ddd;pa
-
通过jquery.cookie.js实现记住用户名、密码登录功能
Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jquery.cookie.js: 下载:http://plugins.jquery.com/cookie/ <script type="text/javascript" src="js/jquery.min.js"></script> <sc
-
原生js+cookie实现购物车功能的方法分析
本文实例讲述了原生js+cookie实现购物车功能的方法.分享给大家供大家参考,具体如下: 这里使用js+cookie实现简单的购物车功能. 首先是简单的HTML结构,只是为了演示下功能. <ul> <li><span>a0001</span><span>shdfi</span><span>￥98.00</span> <input type="button" value="加
-
JS与JQuery分别实现淘宝五星好评特效
本文实例为大家分享了JS与JQuery实现淘宝五星好评特效的具体代码,供大家参考,具体内容如下 我们经常用的五星好评是如何来的,主要就是三个Event 中的三个事件分别: onmouseover 指向事件 onmouseout 离开事件 onclick 点击事件 代码展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><
-
javascript实现五星评分功能
本文为大家分享了javascript实现五星评分功能的实例代码,大家可以参考学习一下,具体的实现办法如下 在分享javascript实现五星评价功能的实例代码之前,先看一看效果图: star1.png star1.png 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>53</