JavaScript写一个星星评分代码

以你之姓@ 2021-07-24 19:19 430阅读 0赞

<!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'>✰</li>
    				<li title='差' id='2'>✰</li>
    				<li title='一般' id='3'>✰</li>
    				<li title='好' id='4'>✰</li>
    				<li title='很好' id='5'>✰</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>

效果如下：

![20201217191848796.png][]

[20201217191848796.png]: /images/20210724/f91695a2bfb544aa80b1e1d9e9e4d004.png