zoukankan      html  css  js  c++  java
  • JS实现评价打分

    HTML代码:
    <html>
    <head>
    <title>Rating</title>
    <script>
    function indexOf(arr,element){
    	for(var i=0;i<arr.length;i++){
    		if(arr[i]==element){
    			return i;
    		}
    	}
    }
    function InitEvent(){
    	var tds = document.getElementById("rating").getElementsByTagName("td");
    	for(var i =0; i<tds.length;i++){
    	
    		tds[i].style.cursor="pointer";
    		tds[i].onmouseover=function(){
    			var tds=document.getElementById("rating").getElementsByTagName("td");
    			var index = indexOf(tds,this);
    			rating.setAttribute("Rate",index+1);//属性Rate用于click时显示分数
    			for(var i=0;i<=index;i++){
    				tds[i].innerText = '★';	
    			}
    			for	(var i=index+1;i<tds.length;i++){
    				tds[i].innerText = '☆';
    			}
    		};
    		tds[i].onclick=function(){
    			var rating = document.getElementById("rating"); 
    			alert("您给出的分数是:"+rating.getAttribute("Rate"));
    		};
    	}
    }
    </script>
    </head>
    
    <body onload="InitEvent();">
    <table id="rating">
    <tr style="color:Red"><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
    </table>
    </body>
    </html>
    

    运行结果图:

  • 相关阅读:
    AcWing 1081. 度的数量
    CF584D Dima and Lisa
    [ABC130F] Minimum Bounding Box
    AT4289 [ABC133E] Virus Tree 2
    Arc of Dream HDU
    Reading comprehension HDU
    【洛谷 1541】乌龟棋
    【洛谷 4880】抓住czx
    【洛谷 1525】关押罪犯
    【洛谷 1040】加分二叉树
  • 原文地址:https://www.cnblogs.com/JuneZhang/p/2021416.html
Copyright © 2011-2022 走看看