星星评分-JavaScript(原创)

使用方法:将下面代码复制到.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>

 

----仅供学习使用---请勿拍砖-----

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值