星级特效（购物好评几颗星星）

最新推荐文章于 2021-04-22 16:02:05 发布

呆呆bg

最新推荐文章于 2021-04-22 16:02:05 发布

阅读量220

点赞数

分类专栏： js练习星星好评文章标签：星星好评星级特效

本文链接：https://blog.csdn.net/weixin_45551411/article/details/100546785

版权

js练习同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

星星好评

1 篇文章 0 订阅

订阅专栏

html页面
下面是星星图片可以使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,ul,li{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
				float:left;
				width:27px;
				height: 28px;
				background: url(star.gif) no-repeat 0 0;
			}
			#txt{
				color: red;
				text-indent: 30px;
				line-height: 28px;
			}
		</style>
	</head>
	<body>
		<ul id="box">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div id="txt"></div>
	
	</body>
</html>

	<script type="text/javascript">
			let oUl = document.getElementById("box");
			let aLi = oUl.children;
			let oTxt = document.getElementById("txt");
			let flag = false;
			let index = 0;
			let arr = ["菜鸡","一般","还行","好","很好"]
			for(let i = 0;i<aLi.length;i++){
				aLi[i].onmouseover = function(){
					for(let  j=0;j<aLi.length;j++){
						aLi[j].style.backgroundPosition = "0 0";
					}
					for(let j = 0;j<=i;j++){
						aLi[j].style.backgroundPosition = "0 -28px"
					}
					oTxt.innerHTML = arr[i];
				}
				aLi[i].onmouseout = function(){
					for(let  j=0;j<aLi.length;j++){
						aLi[j].style.backgroundPosition = "0 0";
					}
					oTxt.innerText="";
					if(flag){
						for(var i = 0 ;i<=index;i++){
							aLi[i].style.backgroundPosition = "0 -28px"
						}
						oTxt.innerText = arr[index];
					}
					
				}
				aLi[i].onclick = function(){
					flag = true;
					index = i;
				}
			}
		</script>

呆呆bg

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
星级特效（购物好评几颗星星）

html页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body,ul,li{ padding: 0; margin: 0; }...
复制链接

扫一扫

专栏目录