打分星星

最新推荐文章于 2021-11-16 11:24:52 发布

我真的不是C罗

最新推荐文章于 2021-11-16 11:24:52 发布

阅读量202

点赞数

分类专栏：自学文章标签：打分星星

本文链接：https://blog.csdn.net/qq_25077777/article/details/51126099

版权

自学专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	*{margin: 0;padding: 0;}
    #pingfen{width: 135px;margin: 10px auto;height: 28px;}
    #pingfen li{ width: 27px;float: left;height: 28px;cursor: pointer;background: url(image/star.gif) no-repeat 0 0;list-style: none;}
	</style>
	<script type="text/javascript">
	var data=['很差','较差','一般','推荐','力荐'];
   window.οnlοad=function(){ 
   	var div=document.getElementById('pingfen');
    var li=div.getElementsByTagName('li');
    var p=div.getElementsByTagName('p')[0];
    var i=0;
    for (var i = 0; i < li.length; i++) {
    	li[i].index=i;
    	li[i].οnmοuseοver=function(){
    		p.style.display='block';
    		p.innerHTML=data[this.index];
    		for (var i = 0; i <=this.index; i++) {
    			li[i].style.background="url(image/star.gif) no-repeat 0 -29px";
    		}
    	};
    	li[i].οnmοuseοut=function(){
    		p.style.display='none';
    		for (var i = 0; i <=this.index; i++) {
    			li[i].style.background="url(image/star.gif) no-repeat 0 0";
    		}
    	};
    	li[i].οnmοusedοwn=function(){
    		alert('提交成功:'+(this.index+1)+'分');
    	};
    }
}
	</script>
</head>
<body>
<div id="pingfen">
	<ul>
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<p></p>
</div>
</body>
</html

我真的不是C罗

关注

0
点赞
踩
0

收藏

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

*{margin: 0;padding: 0;} #pingfen{width: 135px;margin: 10px auto;height: 28px;} #pingfen li{ width: 27px;float: left;height: 28px;cursor: pointer;background: url(image/star.gif) no-repeat 0 0;
复制链接

扫一扫

专栏目录