本帖最后由 吴伟 于 2012-12-16 21:57 编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>模拟评分控件</title>
<style type="text/css">
#table1
{
width:180px;
color:red;
font-size:30px;
font-weight:bold;
}
#table1 tr td
{
cursor:pointer;
}
</style>
<script type="text/javascript">
var score;
//onmouseover、onmouseout和onclick事件都由该事件处理程序处理
//通过window.event.type或arguments[0].type来判断是哪个事件
function eventHandle(){
if(score) return;
var tds=document.getElementById("table1").getElementsByTagName("td");
var eventType=window.event?window.event.type:arguments[0].type;
for(var i=0;i<tds.length;i++)
{
if(eventType=="mouseover")
{
if(tds!=this)
{
tds.innerHTML="★";
}
else
{
this.innerHTML="★";
return;
}
}
else if(eventType=="mouseout")
{
tds.innerHTML="☆";
}
else if(eventType=="click")
{
if(tds==this)
{
score=i+1;
return;
}
}
}
};
window.onload=function(){
var tds=document.getElementById("table1").getElementsByTagName("td");
for(var i=0;i<tds.length;i++)
{
tds.onmouseover=eventHandle;
tds.onmouseout=eventHandle;
tds.onclick=eventHandle;
}
};
</script>
</head>
<body>
<table id="table1">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
|
收藏
淘帖
踩
