오늘 나는 또 다른 멋진 예를 썼습니다 : 별 등급 시스템 (별 수와 디스플레이 정보를 사용자 정의 할 수 있음)
sufustar.star (); 기본값은 별 5 개, 기본 정보를 사용합니다
var msg = [......]; sufustar.star (10, msg); 커스텀 스타의 수는 10, 디스플레이 정보, MSG 형식 참조 기본값, 별 수는 별 수와 일치해야합니다.
몇 가지 예제를 직접 구현하면 다양한 지식 포인트를 적용 할 수있는 능력을 높이고 자신의 약점을 테스트 할 수있는 이점이 있습니다! 발견되면 즉시 API 문서를 검색하고 보충하십시오!
내가 너무 어리석은 지 모르겠지만이 예는 하루 종일 쓰여졌습니다!
말도 안되는 말을하지 말고이 예와 관련된 지식 요점에 대해 이야기 해 봅시다.
1. CSS 테두리를 사용하여 삼각형을 그리고 다른 요소에 추가하기 전에 사용하십시오.
2. CSS를 사용하여 요소를 찾는 방법을 배우십시오.
3. 학습 행사 에이전트;
4. 성능을 최적화하는 방법;
5. 문자열 객체의 일치 방법 적용 및 정규 표현식의 적용;
6. 이벤트 및 이벤트 처리 등록에는 IE 호환 작문 방법이 필요합니다.
7. 사용 방법을 배우십시오 '||' 변수의 기본값을 설정하려면;
8. 코드를 단순화 : 반복 될 수있는 코드를 가져 와서 기능으로 별도로 작성하십시오.
아래는 주석이있는 완전한 코드입니다. 이해하지 못하면 문서를 확인하십시오. 내 현재 수준에서는 이렇게 쓸 수 있습니다. 좋은 제안이 있으면 자유롭게 지적하십시오!
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin : 0; 패딩 : 0; } #star {위치 : 절대; 왼쪽 : 0; 오른쪽 : 0; 상단 : 30px; 하단 : 0; 마진 : 자동; 너비 : 80%; 글꼴 크기 : 12px; } #star-div {마진 : 5px; 글꼴 크기 : 0; } #star-div a {디스플레이 : 인라인-블록; 너비 : 21px; 높이 : 21px; 배경 : URL (http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat; } #star-div .on {배경 : url (http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat; } #star-info {위치 : 절대; 상단 : 55px; 왼쪽 : -30px; 디스플레이 : 없음; 너비 : 155px; 높이 : 50px; 패딩 : 2px; 라인 높이 : 17px; Border-Radius : 8px; 배경색 : 금; Z- 인덱스 : 5; } #star-info : 이전 {content : ''; 국경 바닥 : 10px 솔리드 골드; 왼쪽 경계 : 10px 고체 RGBA (0,0,0,0); 테두리 오른쪽 : 10px 고체 RGBA (0,0,0,0); 위치 : 절대; 왼쪽 : 35px; 상단 : -10px; } #star-span {line-height : 14px} #star-info strong, #star-span strong {색상 : 빨간색; } </style> <cript> wind if (elem.attachevent) {elem.attachevent ( 'on'+type, func)}} function getIndex (event) {// ie var e = event || Window.event; var t = e.target || e.srcelement; if (t.tagname.tolowercase () === 'a') {return parseint (t.innerhtml); }} 함수 showInfo (index, msg) {var info = gbyid ( 'star-info'); info.style.display = '블록'; info.style.left = index*21-51+'px'; info.innerhtml = "<strong>"+index+'points'+msg [index-1] .match (/(.+)/ |/) [1]+'<br />'+'</Strong>'+msg]. } 함수 appenstar (elem, nums) {var fragment = document.createdOcumentFragment (); // 성능을 향상시키기 위해서는 DocumentFragment가 한 번에 추가되는 데 사용되기 때문에 페이지는 한 번만 다시 렌더링됩니다 (var i = 0; i <nums; i ++) {var a = document.createElement ( 'a'); a.innerhtml = i+1; a.href = "JavaScript :;"; // 브라우저 차단의 기본 동작을 클릭하면 링크 조각을 클릭합니다 .appendChild (a); } elem.appendChild (Frag); } // 바디 함수 함수 별 (num, mymsg) {var n = num || 5; // NUM이 값이 있으면 값을 취하고 값이 없으면 기본값 5를 가져갑니다. var clickstar = currentstar = 0; // ClickStar Click Saves Click Saves var var msg = mymsg || [ "매우 불만족 | 너무 나쁘고, 판매자의 설명과 심각하게 불만족스럽고,"불만족 | 불만족 | 부분적으로 손상, 판매자의 설명과 일치하지 않는다 ","일반 | 품질은 평균적이며, 판매자의 설명만큼이나 훌륭합니다. " 만족 ","매우 만족 | 품질은 매우 좋으며 판매자의 설명과 완전히 일치하며 매우 만족합니다 "]; var starcontainer = gbyid ( 'star-div'); Appenstar (StarContainer, N); addevent (StarContainer, 'Mouseover', Over); // 이벤트 프록시 모드 사용 (<a> tag의 상위 요소를 통한 프록시 이벤트) addevent (StarContainer, 'MouseOut', Out); addevent (StarContainer, 'Click', 클릭); function over (event) {if (getIndex (event)) {// getIndex (이벤트)가 값을 얻을 수 없다면 현재 트리거링 이벤트의 대상이 <a> tag var index = getIndex (이벤트)가 아님을 의미합니다. 변경 (색인); showinfo (색인, msg); }} function Out (event) {change (); // 클릭 상태로 점수를 설정하십시오 ClickStar gbyid ( 'star-info'). style.display = 'none'} 함수 클릭 (이벤트) {if (getIndex (event)) {var index = getIndex (event); clickstar = index; // 클릭 상태를 저장하십시오. gbyid ( 'star -span'). innerhtml = "<strong>" + index + 'point' + msg [index -1] .match (/(.+)/ |/) [1] + '</strong>' + '<br/>' + msg [index -1] .match (// | (. +)/) [1]; }} 함수 변경 (색인) {currentStar = index || 클릭 스타; for (var i = 0; i <n; i ++) {starcontainer.children [i] .classname = i <currentstar? 'on': ''}}} return {star : star}} (); // 여기에서 ()는 함수가 즉시 실행되므로 변수 sufustar가 익명 함수 별의 반환 값을 호출 할 수 있도록 // 호출 실행 : sufustar.star (num, mymsg), 매개 변수는 비어 있고 매개 변수는 default 값 sufustar.star ()로 설정됩니다. }.위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.