首页 > 其他 > 详细

评分功能

时间：2015-12-07 11:58:27      阅读：316      评论：0      收藏：0      [点我收藏+]

第一种方法:仅点击时有反应

  

  1. function indexOf(arr,element) {  
  2.     for (var i = 0; i < arr.length;i++ ) {  
  3.         if (arr[i] == element) {  
  4.             return i;//返回element在arr数组中的位置号  
  5.         }  
  6.     }  
  7.     return -1;//未发现该元素时的返回值  
  8. }  
  9.   
  10. function initevent() {  
  11.     var pingfen = document.getElementById("pingfen");  
  12.     var tds = pingfen.getElementsByTagName("td");  
  13.       
  14.     for (var i = 0; i < tds.length; i++) {  
  15.         var td = tds[i];  
  16.         td.onclick = tdonclick;  
  17.         td.style.cursor = "pointer";//使经过的鼠标变为手状  
  18.     }  
  19. }  
  20.   
  21. function tdonclick() {  
  22.     var pingfen = document.getElementById("pingfen");  
  23.     var tds = pingfen.getElementsByTagName("td");  
  24.     var index=indexOf(tds,this);//获取当前点击td在tds数组中的位置  
  25.   
  26.     for (var i = 0; i <= index; i++) {//使鼠标点击之前的所有td背景颜色变为红色  
  27.         var td = tds[i];  
  28.         td.style.background = "red";  
  29.     }  
  30.     for (var i = index + 1; i < tds.length; i++) {//使鼠标点击之后的所有td背景颜色变为白色  
  31.         var td = tds[i];  
  32.         td.style.background = "white";  
  33.     }  
  34. }  
 
  1. function initevent() {  
  2.     var pingfen = document.getElementById("pingfen");  
  3.     var tds = pingfen.getElementsByTagName("td");  
  4.       
  5.     for (var i = 0; i < tds.length; i++) {  
  6.         var td = tds[i];  
  7.         td.style.cursor = "pointer";  
  8.         td.onmouseover = function () {  
  9.             var pingfen = document.getElementById("pingfen");  
  10.             var tds = pingfen.getElementsByTagName("td");  
  11.             var index = indexOf(tds, this);  
  12.   
  13.             for (var i = 0; i <= index; i++) {  
  14.                 tds[i].innerText = "★";  
  15.             }  
  16.   
  17.             for (var i = index+1; i < tds.length; i++) {  
  18.                 tds[i].innerText = "☆";  
  19.             }  
  20.         };  
  21.   
  22.         td.onclick = function () {  
  23.             alert("你的评分是：" + (indexOf(tds, this) + 1) + "分");  
  24.         }  
  25.     }  
  26. }  

 

 

网页内容：

  1. <body onload="initevent()">  
  2. <table id="pingfen">  
  3. <tr><td>★</td><td>★</td><td>★</td><td>★</td><td>★</td></tr>  
  4. </table>  
  5. </body>  

 

 

第二种方法：标准版 

  1. function indexOf(arr, element) {  
  2.     for (var i = 0; i < arr.length; i++) {  
  3.         if (arr[i] == element) {  
  4.             return i;  
  5.         }  
  6.     }  
  7.     return -1;//未发现数组arr内含有element里的返回值  
  8. }  
  9. function initevent() {  
  10.     var pingfen = document.getElementById("pingfen");  
  11.     var tds = pingfen.getElementsByTagName("td");  
  12.     for (var i = 0; i < tds.length; i++) {  
  13.         var td = tds[i];  
  14.         td.style.cursor = "pointer";  
  15.         td.onmouseover = wjxover;  
  16.         td.onclick = wjxclick;  
  17.     }  
  18. }  
  19.   
  20. function wjxover() {  
  21.     var pingfen = document.getElementById("pingfen");  
  22.     var tds = pingfen.getElementsByTagName("td");  
  23.     var index = indexOf(tds, this);            
  24.   
  25.     for (var i = 0; i <= index; i++) {  
  26.         var td = tds[i];  
  27.         td.innerText = "★";  
  28.     }  
  29.   
  30.     for (var i = index+1; i <tds.length; i++) {  
  31.         var td = tds[i];  
  32.         td.innerText = "☆";  
  33.     }  
  34. }  
  35. function wjxclick() {  
  36.     var pingfen = document.getElementById("pingfen");  
  37.     var tds = pingfen.getElementsByTagName("td");  
  38.       
  39.     alert("你评了"+(indexOf(tds, this)+1)+"分");  
  40. }  

 

网页内容：

  1. <body onload="initevent()">  
  2. <table id="pingfen">  
  3. <tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>  
  4. </table>  

 

 

jquery版：

  1. $(function () {  
  2.     var arr = new Array();  
  3.   
  4.     $("#pingfen td").mouseover(function () { $("td").css("cursor", "pointer"); $("#pingfen td").text("★"); $(this).nextAll().text("☆"); });  
  5.     $("#pingfen td").click(function () {  
  6.         $("#pingfen td").each(function (key) { if ($(this).text() == "★") { arr[key] = $(this).text(); } });  
  7.         alert("你评了" + arr.length + "分");  
  8.         arr.length = 0;//清空一下,以防连续评分出错  
  9.     });  
  10. });  
  11.   
  12. $(function () {  
  13.     $("input[value=清空]").click(function () {  
  14.         $("#pingfen td").text("☆");  
  15.     });  
  16. });  

 

网页内容：

  1. <table id="pingfen"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>  
  2. <input type="button" value="清空" />  

 

评分功能

原文：http://www.cnblogs.com/refe/p/5025347.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！