<!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
打分星星
最新推荐文章于 2021-11-16 11:24:52 发布