模仿网页上评分的五个五星。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.r
{
color:red;
}
.b
{
color:black;
}
</style> <script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onblur = inputOnBlur;
}
}
function inputOnBlur()
{
if(this.value.length<=0)
{
this.style.background = "red";
}
else
{
this.style.background = "white";
}
}
function initTr()
{
var trs = document.getElementsByTagName("td");
for(var i=0;i<trs.length;i++)
{
var td = trs[i];
td.style.cursor = "pointer";
td.width = "30px";
td.height = "30px";
td.onfocus = deal;
}
}
function deal()
{
var inputs = document.getElementsByTagName("td");
for(var i=0;i<inputs.length;i++)
{
var input = inputs[i]; if(input==this)
{
input.className = "r";
for (var p = i + 1; p< inputs.length; p++)
{
inputs[p].className = "b";
}
return;
}
else
{
input.className = "r";
}
}
}
</script>
</head>
<body onload="initTr()">
<input type="text" />
<input type="text"/>
<input type="text" />
<input type="text" />
<a href="htmlpagewrite.html">htmlpagewrite.html</a>
<font size="40">
<table border="0" style="margin-top:100px;margin-left:100px">
<tr> <td ondblclick="this.className='b'">★</td>
<td>★</td>
<td>★</td>
<td>★</td>
<td>★</td> </tr>
</table>
</font>
</body>
</html>