一、构造函数写评分系统
效果:当鼠标滑过的时候星星会亮,并显示评语,当鼠标移出的时候,评语消失,星星不亮,当点击星星的时候,被点击的星星及它前面的星星都会显示
下面展示一些 内联代码片
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: #666;
font: 12px/2 Arial;
}
#star {
margin: 10px auto;
/* border: 1px solid red; */
width: 800px;
position: relative;
/*设置定位给p标签参考*/
}
ul {
list-style-type: none;
/* border: 1px solid green; */
margin: 0px 10px;
/*必须设置外边距才能上去*/
}
ul,
span {
float: left;
}
ul li {
float: left;
background: url('images/star.png') no-repeat;
text-indent: -9999px;
/* 隐藏a标签中的文本 */
width: 24px;
margin: 0px;
}
#star li.on {
background-position: 0 -28px;
}
/*
span {
/* border: 1px solid yellow;
} */
p {
/*后面要根据鼠标变动,更改p,所以要设置定位*/
/* border: 1px solid blue; */
position: absolute;
top: 20px;
width: 200px;
display: none;
}
p em {
color: #f60;
display: block;
font-style: normal;
}
strong {
color: #f60;
padding-left: 20px;
}
</style>
</head>
<body>
<div id="star">
<span>点击星星就能打分</span>
<ul>
<li>
<a href="javascript:;">1</a>
</li>
<li>
<a href="javascript:;">2</a>
</li>
<li>
<a href="javascript:;">3</a>
</li>
<li>
<a href="javascript:;">4</a>
</li>
<li>
<a href="javascript:;">5</a>
</li>
</ul>
<span></span>
<p>选择解释</p>
<script>
function setScore(){
this.msg = [
"很不满意|差得太离谱,与卖家描述的严重不符,非常不满",
"不满意|部分有破损,与卖家描述的不符,不满意",
"一般|质量一般,没有卖家描述的那么好",
"满意|质量不错,与卖家描述的基本一致,还是挺满意的",
"非常满意|质量非常好,与卖家描述的完全一致,非常满意"
];
//获取节点
this.ul = document.querySelector('ul');
this.liObj = document.querySelectorAll('ul>li');
this.pObj = document.querySelector('p');
this.spanObj = this.ul.nextElementSibling;
//设置基础数据
//保存滑过数目的数据
this.score = 0;
//定义一个函数,函数里面包括给li绑定的时间
this.loopBind();
//
}
//创建loopBinder函数,将函数添加到原型对象中
setScore.prototype.loopBind = function(){
// console.log(this);
//给li绑定鼠标滑过事件
//循环遍历li里的元素,给每个li绑定事键
this.liObj.forEach((li,key)=>{
li.onmouseover = this.overFn.bind(this,key);
li.onmouseout = this.outFn.bind(this,key);
li.onclick = this.clickFn.bind(this,key);
})
}
//创建鼠标滑过函数
setScore.prototype.overFn = function(k){
// console.log(this);这时指向setScore函数
// this.pObj.style.display = 'block'
//获取当前事件源li,
let tar = event.target;
// console.log(tar);
this.pObj.style.display = 'block';
//当鼠标移动的时候让li跟随鼠标移动
this.pObj.style.left =tar.offsetLeft-25+'px';
//把文字写入p标签
let temMsg = this.msg[k].split('|');
// console.log(temMsg);
//把文字写入p标签里
this.pObj.innerHTML = `<strong>${temMsg[0]}</strong></br>${temMsg[1]}`;
//并让保存的记录数加1
//当p滑过的时候让星星亮
this.starShow(k+1);
// console.log(k);
}
//给鼠标创建一个点击函数,当点击的时候可以显示评价
setScore.prototype.clickFn = function(k){
//当点击的时候让p消失
this.pObj.style.display = 'none';
//点击的时候让span出现
let temMsg = this.msg[k].split('|');
this.spanObj.innerHTML = `<strong>${temMsg[0]}</strong>${temMsg[1]}`;
//给记录数重新赋值
this.score = k+1;
}
//创建一个鼠标移出的时间,当鼠标移出的时候让p消失,星星不良
setScore.prototype.outFn= function(k){
this.pObj.style.display = 'none';
//调用让星星亮的函数
this.starShow();
}
//创建让星星亮的函数
setScore.prototype.starShow = function(k){
// console.log(k);
//设置一个数据用来保存key和score的值
let tem = k || this.score;
// 循环控制li的状态
for(let i= 0;i<this.liObj.length;i++){
this.liObj[i].className = tem>i?'on':'';
}
}
new setScore();
</script>
</div>
</body>
</html>
效果展示: