如何巧妙的编写评星功能

川长思鸟来 2022-07-13 05:43 82阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    		<title>默认的五星评分</title>
    		<script src="Resource/js/jquery.min.js"></script>
    		<script src="Resource/js/jquery.raty.js"></script>
    		<style type="text/css">
    			p{border:2px dashed blue; padding: 5px}
                #out{margin-bottom:100px;}
    		</style>
    	</head>
    	<body>
    		<div>
    		   <h2>默认评星</h2>
    		   <div id="star"></div>
    		   <p>
    		   	$('#star').raty({</br/>
    		       starOff: 'Resource/img/star-off-big.png',</br/>
    		       starOn: 'Resource/img/star-on-big.png',</br/>
    		       width:200</br/>
    	        });</p>
    		</div>
    		
    		<div>
    		   <h2>有默认值的评星</h2>
    		   <div id="valueStar"></div>
    		   <p>
    		   	$('#valueStar').raty({</br/>
    		       starOff: 'Resource/img/star-off-big.png',</br/>
    		       starOn: 'Resource/img/star-on-big.png',</br/>
    		       width:200,</br/>
    		       score:3
    	        });</p>
    		</div>
    		
    		<div>
    		   <h2>有动态默认值的评星</h2>
    		   <div id="dynamicValueStar" data-score='2'></div>
    		   <p>
    		   	$('#dynamicValueStar').raty({</br/>
    		       starOff: 'Resource/img/star-off-big.png',</br/>
    		       starOn: 'Resource/img/star-on-big.png',</br/>
    		       width:200,</br/>
    		       score:function(){</br/>
    		       	return $(this).attr('data-score');</br/>
    		       }</br/>
    	        });</p>
    		</div>
    		
    		<div>
    		   <h2>改变星星的个数</h2>
    		   <div id="changeStarNo" data-score='2'></div>
    		   <p>
    		   	$('#changeStarNo').raty({</br/>
    		       starOff: 'Resource/img/star-off-big.png',</br/>
    		       starOn: 'Resource/img/star-on-big.png',</br/>
    		       width:200,</br/>
    		       score:function(){</br/>
    		       	return $(this).attr('data-score');</br/>
    		       },</br/>
    		       number:9</br/>
    	        });</p>
    		</div>
    		
    		<div>
    		   <h2>ReadOnly星级显示</h2>
    		   <div id="starReadyOnly" data-score='2'></div>
    		   <p>
    		   	$('#starReadyOnly').raty({</br/>
    		       starOff: 'Resource/img/star-off-big.png',</br/>
    		       starOn: 'Resource/img/star-on-big.png',</br/>
    		       width:200,</br/>
    		       readOnly:true
    	        });</p>
    		</div>
    		
    		<div>
    		   <h2>半颗星显示</h2>
    		   <div id="halfStar"></div>
    		   <p>
    		   	$('#starReadyOnly').raty({</br/>
    		       starOff: 'Resource/img/star-off-big.png',</br/>
    		       starOn: 'Resource/img/star-on-big.png',</br/>
    		       width:200,</br/>
    		       readOnly:true,
    		       score:3.65
    	        });</p>
    		</div>
    		
    		<div id="out">
    		   <h2>星星点击事件</h2>
    		   <div id="starClick"></div>
    		   <p>
    		   	$('#starClick').raty({</br/>
    		       starOff: 'Resource/img/star-off-big.png',</br/>
    		       starOn: 'Resource/img/star-on-big.png',</br/>
    		       width:200,</br/>
    		       readOnly:true,
    		       score:3.65,
    		       click:function(score, event){
    		       	   alert("id："+$(this).attr("id")+"\n值："+score+"\n事件："+event.type);
    		       }
    	        });</p>
    		</div>
    		
    		<div id="test">
    			
    			
    		</div>
    	</body>
    
    </html>
    <script type="text/javascript">
    	$('#star').raty({
    		starOff: 'Resource/img/star-off-big.png',
    		starOn: 'Resource/img/star-on-big.png',
    		width:200
    	});
    	
    	$('#valueStar').raty({
    		starOff: 'Resource/img/star-off-big.png',
    		starOn: 'Resource/img/star-on-big.png',
    		width:200,
    		score:3
    	});
    	
    	$('#dynamicValueStar').raty({
    		starOff: 'Resource/img/star-off-big.png',
    		starOn: 'Resource/img/star-on-big.png',
    		width:200,
    		score:function(){
    		   return $(this).attr('data-score');
    		}
    	});
    	
    	$('#changeStarNo').raty({
    		starOff: 'Resource/img/star-off-big.png',
    		starOn: 'Resource/img/star-on-big.png',
    		width:300,
    		score:function(){
    		   return $(this).attr('data-score');
    		},
    		number:9
    	});
    	
    	$('#starReadyOnly').raty({
    		starOff: 'Resource/img/star-off-big.png',
    		starOn: 'Resource/img/star-on-big.png',
    		width:300,
    		readOnly:true,
    		score:3
    	});
    	
    	$('#halfStar').raty({
    		starOff: 'Resource/img/star-off-big.png',
    		starOn: 'Resource/img/star-on-big.png',
    		starHalf:'Resource/img/star-half-big.png',
    		width:300,
    		readOnly:true,
    		score:3.66
    	});
    	
    	$('#starClick').raty({
    		starOff: 'Resource/img/star-off-big.png',
    		starOn: 'Resource/img/star-on-big.png',
    		starHalf:'Resource/img/star-half-big.png',
    		width:300,
    		score:3.66,
    		click:function(score, event){
    		   alert("id："+$(this).attr("id")+"\n值："+score+"\n事件："+event.type);
    		}
    	});
    	
    </script>

效果图如下所示：

![Center][]![Center 1][]

源代码下载地址：[http://download.csdn.net/detail/u013059555/9722412][http_download.csdn.net_detail_u013059555_9722412]

[Center]: https://img-blog.csdn.net/20161227144316587?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYnJ1Y2VjaGVuZzIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220713/78577ae5c2a3403e818b628923d57777.png
[http_download.csdn.net_detail_u013059555_9722412]: http://download.csdn.net/detail/u013059555/9722412