星级评分js

Posted 2020-12-17 Smile*^

/**
* 创建一个星星评分的区域
* @param {*} config
*/
function createStar(config) {
//1. 将各种配置保存到变量中，没有传递的，设置默认值
var dom = config.dom;
var maxNumber = config.maxNumber || 5; // 默认5颗星
var value = config.value || 0; // 默认值 0
var text = config.text || ["无评分", "很差", "较差", "还行", "推荐", "力荐"];

var divStarContainer, divStars, label;
var spans = []; // 存放星星元素的数组
//2. 编写初始化函数，按照配置设置元素结构
/**
* 初始化元素结构，不涉及变化的内容
*/
function init() {
divStarContainer = _createElement("div", "star-container", dom);
divStars = _createElement("div", "stars", divStarContainer);
label = _createElement("label", "", divStarContainer);
for (var i = 0; i < maxNumber; i++) {
var span = _createElement("span", "", divStars);
spans.push(span);
}
}

/**
* 辅助函数，帮忙创建元素
* @param {*} tagName 元素名称
* @param {*} className 类名
* @param {*} parent 元素的父元素
*/
function _createElement(tagName, className, parent) {
var tag = document.createElement(tagName);
tag.className = className;
parent.appendChild(tag);
return tag;
}

init();

//3. 编写辅助函数，用于根据某个值设置当前的评分样式
/**
* 根据指定的值，设置整个星星区域的样式
* @param {*} value
*/
function setStars(value) {
// 控制一下边界
if (value < 0) {
value = 0;
}
if (value > maxNumber) {
value = maxNumber;
}
// 设置span的样式
for (var i = 0; i < spans.length; i++) {
if (i < value) {
spans[i].className = "fill";
} else {
spans[i].className = "hollow";
}
}
// 设置文字
label.innerText = text[value];
}

setStars(value);
//4. 完成各种事件的注册
divStars.onmousemove = function (e) {
var val = _getTempValue(e);
// 重新设置星星的数量
setStars(val);
};

divStars.onmouseleave = function () {
// 当鼠标移出的时候，需要还原value值
setStars(value);
};

divStars.onclick = function (e) {
value = _getTempValue(e);
};

// 根据鼠标事件参数e，得到临时的value值
function _getTempValue(e) {
var width = divStars.clientWidth; // 获取所有星星的整个宽度
// e.clientX 获取的是鼠标到视口左边的距离
// divStars.getClientRects()[0].left 获取的是divStars到视口左边的距离
var left = e.clientX - divStars.getClientRects()[0].left;
var val = (left / width) * maxNumber; // 要计算的值
val = Math.ceil(val);
console.log(val);
return val;
}
}