JavaScript写一个星星评分代码

最新推荐文章于 2022-08-15 20:50:10 发布

编程界小明哥

最新推荐文章于 2022-08-15 20:50:10 发布

阅读量1k

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dkm123456/article/details/111322404

版权

javascript 专栏收录该内容

78 篇文章 27 订阅

订阅专栏

 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <style>
        *{margin:0;padding:0;list-style-type:none;}
		body{font:12px/180% Arial, Helvetica, sans-serif;}
		.star_ul li{
			text-align: center;
		    float: left;
		    margin-right: 1px;
		    width: 25px;
		    height: 22px;
		    font-size: 21px;
		    background: #DCDCDC;
		    border-radius: 5px;
		    opacity: 0.8;
		    cursor: pointer;
		}
		.box{
			margin: 10px;
			left: 35%;
		    position: absolute;
		    width: 250px;
		}
		.result{
		    margin-left: 10px;
		}
        </style>
        </head>
        <body>
        	<div class='box'>
			<span style='float:left;'>评分：</span>
			<ul class="star_ul" id='star_ul_id'>
				<li title='很差' id='1'>&#10032;</li>
				<li title='差' id='2'>&#10032;</li>
				<li title='一般' id='3'>&#10032;</li>
				<li title='好' id='4'>&#10032;</li>
				<li title='很好' id='5'>&#10032;</li>
			</ul>
			<span id='result' class='result'>请打分</span>
		</div>
        </body>
        
<script>
	var flag = false;//是否点击
	var result = document.getElementById('result');
	var star = document.getElementById('star_ul_id');
	star.onmouseover=function(e){
		var e = e || window.event;
		var target = e.target || e.srcElement;
		flag=false;//只要鼠标移入就设置为false
		gen(target,this);
	}
	star.onmouseout=function(e){
		if(flag) return;//如果鼠标点击选中，则不重置星星状态
		for(var i=0;i<this.children.length;i++){
			//重置所有星星的颜色
			this.children[i].style.background='gainsboro';
		}
		result.style.color='#333333';
		result.innerText="请打分";
	}
	star.onclick=function(e){
		var e = e || window.event;
		var target = e.target || e.srcElement;
		gen(target,this);
		//设置标记为true
		flag=true;
	}
	function gen(target,obj){
		var color;
		var id = parseInt(target.id);
		//根据id来设定颜色
		switch (id){
			case 1:{
				color='#EEC15A';
				break;
			}
			case 2:{
				color='#FDB666';
				break;
			}
			case 3:{
				color='#FF8D50';
				break;
			}
			case 4:{
				color='#FE6A44';
				break;
			}
			case 5:{
				color='#E44343';
				break;
			}
		}
		var len = id<=obj.children.length?id:this.children.length;
		for(var i=0;i<len;i++){
			//设置所选星星前面所有星星的颜色、包含自己
			obj.children[i].style.background=color;
		}
		result.style.color='#c00';
		result.innerText=target.title;
	}
</script>
</html>

效果如下：

编程界小明哥

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript写一个星星评分代码

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{margin:0;padding:0;list-style-type:none;} body{font:12px/180% Arial, Helvetica, sans-se...
复制链接

扫一扫