使用方法:将下面代码复制到.txt文件中,然后另存为.htm后用IE(注意是IE,FF不行)打开,点击星星,然后就可以得到分数。
<!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>
<script type="text/javascript">
//得到分数
function getScore(){
var score=0;
var ta = document.getElementById("ta");
var tds = ta.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
var td = tds[i];
if(td.innerText=="★"){
score++;
}
}
return score ;
}
function indexOf(arr,element){//οnlοad="alert(indexOf([1,2,3,4,5,6],2))"测试通过
for(var i=0;i<arr.length;i++){
if(element == arr[i]){
return i;
}
}
return -1;
}
//写个函数判断点击星星的后面是不是还有黑猩猩
function check(tds,index){
if(index==(tds.length-1)){//最后一个
return false;
}
if(tds[index+1].innerText=="★"){
return true;
}
}
function initEvent(){
var ta = document.getElementById("ta");
var tds = ta.getElementsByTagName("td");//几乎每个document对象都有这个方法getElementsByTagName,可以获得下级组件组
for(var i=0;i<tds.length;i++){
var td = tds[i];
td.οnclick=TdOnClick;
td.style.cursor="pointer";
}
}
function TdOnClick(){
var ta = document .getElementById("ta");
var tds = ta.getElementsByTagName("td");
var index = indexOf(tds,this);
for(var i=0;i<tds.length;i++){
var td = tds[i];
if(i<=index){
if(tds[index].innerText=="★"){
if(!check(tds,index)){//如果后面不再有黑猩猩,则设为空,否则不变就是黑猩猩
td.innerText="☆";
}
}else{
td.innerText="★";
}
}else{
td.innerText="☆";
}
}
}
</script>
</head>
<body οnlοad="initEvent()">
<table id="ta">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
<input type="button" value="得到分数" οnclick="alert(getScore())"/>
</body>
</html>
----仅供学习使用---请勿拍砖-----