本文介绍如何使用JavaScript实现类似淘宝和百度文库的五角星评分组件。通过HTML表格布局五个星星，结合onfocus事件与颜色切换逻辑，动态显示用户评分结果。代码包含获取元素索引、遍历修改样式等核心步骤，适合前端初学者参考学习。
JavaScript实现仿淘宝与百度文库的五角星评分功能
本文分享一个基于JavaScript实现的五角星评分示例，其交互效果类似于淘宝和百度文库的评分系统，供读者参考学习。
效果展示
最终运行效果如下图所示：
HTML结构布局
界面布局采用HTML表格结构，将五个五角星图标分别放置在表格的五列中。下方使用一个<p>标签来动态显示当前的评分结果。具体HTML代码如下：
<body onload="changebg()">
<table border="0" align="center" cellpadding="0" cellspacing="0" id="maintable">
<tr style=" font-size:30px;">
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
</table>
<p align="center" id="result">您评了<label id="score"></label>分</p>
</body>
页面加载初始化
页面加载时，body的onload事件会触发一个初始化方法，相关的JavaScript代码如下：
<script type="text/javascript">
function getindex(arr,element) { //参数：数组，元素；返回兄弟元素的索引
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function changebg() { //为每个td设置获得焦点属性【也可以设置onclick属性】
var maintable = document.getElementById("maintable"); //获取需要设置的表格
var tds = maintable.getElementsByTagName("td"); //获取表格下的所有单元格
document.getElementById("result").style.display = "none"; //设置得分结果为隐藏
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onfocus = getonfocus;
td.style.cursor = "pointer"; //为了设置鼠标放在五角星上呈手型
}
}
function getonfocus(){ //设置td的焦点事件，
var maintable = document.getElementById("maintable");
var tds = maintable.getElementsByTagName("td");
var index = getindex(tds, this); //返回响应事件的索引 用this代表触发此事件的元素
document.getElementById("result").style.display = ""; //得到分数后把结果显示出来
document.getElementById("score").innerText = index + 1;
for (var i = 0; i < index+1; i++) {
tds[i].style.color = "red";
}
for (var i = index+1; i < tds.length; i++) {
tds[i].style.color = "black";
}
}
</script>
核心JavaScript逻辑
核心JavaScript逻辑由三个主要函数组成： ① changebg()：作为body onload事件的绑定函数，负责为每个<td>元素绑定onfocus事件； ② getonfocus()：定义td元素在触发onfocus事件时的具体行为； ③ getindex()：接收两个参数，分别是td元素的集合数组和当前触发事件的td元素（通过this关键字获取）。该函数主要返回当前触发事件元素的索引值，用于确定样式切换的范围：将当前元素及之前的星星显示为红色，之后的星星显示为黑色。
总结
以上就是本文的全部内容，希望这段JavaScript代码能对读者学习程序设计有所帮助。