JavaScript---星星评分

最新推荐文章于 2023-03-29 13:48:18 发布

maidu_xbd

最新推荐文章于 2023-03-29 13:48:18 发布

阅读量579

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/maidu_xbd/article/details/90297250

版权

JavaScript 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>星星评分</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#text {
			text-align: center;
		}

		#pingfen {
			width: 135px;
			margin: 10px auto;
			height: 28px;
		}

		#pingfen li {
			width: 27px;
			float: left;
			height: 28px;
			cursor: pointer;
			background: url(star.gif) no-repeat 0 0;
			list-style: none;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			var Data = ['很差', '较差', '一般', '推荐', '力荐'];
			var oDiv = document.getElementById('pingfen');
			var oLi = oDiv.getElementsByTagName('li');
			var oP = oDiv.getElementsByTagName('p')[0];
			var i = 0;
			for (i = 0; i < oLi.length; i++) {
				// alert(oLi.length);
				oLi[i].index = i;
				oLi[i].onmouseover = function () {
					oP.style.display = 'block';
					for (i = 0; i <= this.index; i++) {
						oLi[i].style.background = "url(star.gif) no-repeat 0 -29px";
					}
					oP.innerHTML = Data[this.index];
				};
				oLi[i].onclick = function () {
					alert('评分成功，得分' + (this.index + 1) + '分');
				}
				oLi[i].onmouseout = function () {
					oP.style.display = 'none';
					for (i = 0; i < oLi.length; i++) {
						oLi[i].style.background = "url(star.gif) no-repeat 0 0";
					}
				};

			}

		}
	</script>
</head>

<body>
	<div id="pingfen">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div id="text">
			<p style="display:none">一般</p>
		</div>
	</div>
</body>

</html>

maidu_xbd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript---星星评分

完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>星星评分</title> <style> * {...
复制链接

扫一扫