JS效果-原生JS-模仿商城五星评价_js写商城图片评论模块-CSDN博客

这篇博客分享了作者初次接触JS时，通过妙味课堂的实例课程学习并实现了一个具有良好交互性的五星评价功能。实现过程中，准备了三种颜色的五角星图片，并通过代码实现了动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个五星评价交互性很好，是我刚开始接触js写的，当时在学习妙味课堂的js实例课程，觉得很有趣，便琢磨了一下，没想到写出来了，准备工作很简单，三种不同颜色（灰黑红）的五角星图片各五张~

话不多说，看代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>五星评价</title>
	<style type="text/css">
	.div1{
		/*width: 400px;*/
		/*height: 200px;*/
		/*background-color: #333;*/
		float: left;
	}
	img{
		width: 32px;
	}
	.div2{
		/*width: 200px;*/
		height: 36px;
		/*background: #eee;*/
		float: left;
		margin-left: 30px;
	}
	span{
		font-size: 18px;
		line-height: 36px;
	}
	#text{
		font-size: 14px;
		color: #678090;
	}
	</style>
	<script type="text/javascript">
	window.onload = function(){
		var aImg = document.getElementsByTagName('img');
		var oSpan = document.getElementById('word');
		var oText = document.getElementById('text');
		var oAA = true;
		var oIndex;
		for(var i=0; i<aImg.length; i++){
			aImg[i].index = i;
		}
		for(var i=0; i<aImg.length; i++){
			aImg[i].onmouseover =