• 评分功能

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

      

    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="清空" />  
  • 相关阅读:
    [BZOJ2969] 矩形粉刷
    数字 (number)
    字符串(String)
    小HY的四元组
    最大公约数(Max Gcd)
    [洛谷P2102] 地砖铺设
    Python OS模块（内置模块）
    json解析神器--jsonpath
    kafka 优势+应用场景
    Python之异常处理
  • 原文地址：https://www.cnblogs.com/refe/p/5025347.html
Copyright © 2020-2023  润新知