이 기사에서는 Taobao 및 Baidu Library와 유사한 점수 기능을 공유하며 JS 구현은 참조 용입니다. 특정 내용은 다음과 같습니다
효과는 그림에 나와 있습니다.
5 개의 5 개 별이 테이블의 5 개의 열에 배치됩니다. 다음은 점수 결과를 표시하는 데 사용되는 <p>입니다. 코드는 다음과 같습니다.
<body onload = "changebg ()"> <테이블 align = "Center"CellPadding = "0"셀 패싱 = "0"id = "maintable"> <tr style = "font-size : 30px;"> <td> </td> <td> </td> <td> <td> </td> <td> </td> <td> </td> </td> <td> </td> </td> </tab> <p align = "center" "id ="retaling </bodit "> </bick">
본문의 onload 이벤트는 메소드에 바인딩되며 JS 코드는 다음과 같습니다.
<script type = "text/javaScript"> 함수 getIndex (arr, element) {// 인수 : 배열, 요소; (var i = 0; i <arr.length; i ++) {if (arr [i] == element) {return i; }} 반환 -1; } 함수 changebg () {// 초점 속성을 얻기 위해 각 td를 설정합니다. // 설정 해야하는 테이블을 가져옵니다. // 테이블 문서에서 모든 셀을 가져옵니다 .getElementById ( "result"). style.display = "none"; // (var i = 0; i <tds.length; i ++) {var td = tds [i]; td.onfocus = getonfocus; td.style.cursor = "포인터"; // 펜타 그램에서 마우스를 손으로 설정하려면 getonFocus () {// TD의 초점 이벤트를 설정합니다. var tds = MASPORTABLE.GETELEMENTSBYTAGNAME ( "TD"); var index = getIndex (tds, this); // 응답 이벤트의 색인을 반환합니다. 이것은이 이벤트 문서를 트리거 한 요소를 나타냅니다 .getElementById ( "result"). style.display = ""; // 점수를 얻은 후 결과 문서를 표시합니다 .getElementById ( "score"). innerText = index + 1; for (var i = 0; i <index+1; i ++) {tds [i] .style.color = "red"; } for (var i = index+1; i <tds.length; i ++) {tds [i] .style.color = "black"; }} </script>JS 코드는 주로 세 가지 기능으로 구성됩니다.
① : changebg (); 신체의 온부하 사건을 묶는 기능; 각 TD 요소에 대한 ONFOCUS 이벤트의 결합을 달성하기 위해;
② : getonfocus (); TD 요소의 Onfocus 이벤트의 특정 구현;
③ : getIndex (); 두 가지 매개 변수가 있습니다. 하나는 TD 요소의 컬렉션 배열이고 다른 하나는 해당 이벤트의 TD 요소입니다. 이 키워드 사용에주의하십시오. 주로 해당 이벤트 요소의 색인을 반환합니다. 응답 이벤트 요소 이전에 색상을 빨간색으로 표시하기 위해 후속 요소는 검은 색으로 표시됩니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.