前端案例-五星好评

思路分析

1. 设置鼠标样式：当鼠标放到星星上时，修改鼠标的样式
2. 定义元素：通过表格的td元素来存放星星
3. 绑定事件：绑定每一个星星的鼠标悬停事件
4. 判断悬停位置：鼠标所在位置的左侧(包含当前位置)，设置为选中；右侧设置为不选中

实现步骤

1. 定义table标签与对应的tr、td元素，用来设置☆的位置
2. 得到所有的td元素(☆)
3. 遍历td元素
4. 设置鼠标的样式
5. 设置每一个td的鼠标悬停事件
6. 得到当前鼠标所在td的位置
7. 设置当前鼠标位置左侧的td值为★，右侧为☆

HTML代码

 <table border="0" align="center">
	<tr>
	    <td id="1">☆</td>
		<td id="2">☆</td>
		<td id="3">☆</td>
		<td id="4">☆</td>
		<td id="5">☆</td>
	</tr>
</table>

JS版本 

<script type="text/javascript">
		// 得到所有的td元素(☆)
		var tds = document.getElementsByTagName("td");
		// 遍历td元素
		for (var i = 0; i < tds.length; i++) {
			// 设置鼠标的样式
			tds[i].style.cursor = "pointer";
			// 给每一个td绑定鼠标悬停事件
			tds[i].onmouseover = function() {
				// 得到当前鼠标悬停的位置(td的id属性值)
				var index = this.id;
				
				// 将当前位置左侧的星星变黑
				for (var i = 0; i < index; i++) {
					tds[i].innerHTML = "★";
				}
				// 将当前位置右侧的星星变黑
				for (var j = tds.length; j > index; j--) {
					tds[i].innerHTML = "☆";
				}
			}
		}
</script>

jQuery版本 

 <script type="text/javascript">
		 	// 得到所有的td元素
			var tds = $("td");
			// 遍历td元素
			tds.each(function(){
				// 设置鼠标的样式
				$(this).css("cursor","pointer");
				// 给每一个td元素绑定鼠标悬停事件
				$(this).mouseover(function(){
					// 得到当前鼠标所在的td位置(id属性值)
					var index = $(this).attr("id");
					
					// 判断当前位置左侧的星星，设置为黑色(包含当前位置)
					for (var i = 0; i < index; i++) {
						$(tds[i]).html("★")
					}
					
					// 判断当前位置右侧的星星，设置为白色
					for (var j = tds.length; j > index; j--) {
						$(tds[i]).html("☆");
					}
				});
			});
</script>

应用场景

1. 电商网站：在用户购买商品后，可以通过五星好评来评价商品的质量、服务等方面，帮助其他用户了解商品的优劣，提升用户购买决策的准确性。

2. 旅游网站：用户可以通过五星好评来评价旅游景点、酒店等服务的质量，帮助其他用户选择合适的旅游目的地和住宿地点。

3. 社交媒体平台：用户可以通过五星好评来评价朋友圈中的动态、文章等内容的质量，帮助其他用户了解内容的可信度和有用性。

4. 应用商店：用户可以通过五星好评来评价手机应用的质量、功能等方面，帮助其他用户选择合适的应用程序。

5. 餐饮网站：用户可以通过五星好评来评价餐厅的菜品质量、服务态度等方面，帮助其他用户选择合适的餐厅。

•         五星好评可以应用于各种需要用户评价和推荐的场景，帮助其他用户做出更好的选择。