이 기사에서는 JS의 간단한 객체 지향 색상 선택기의 구현에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = gb2312"/> <title> </title> </head> <cript = <text/javascript "> 함수 (idstr) {this.colorpool = [ "#000000", "#993300", "#33300", "#003300", "#003366", "#000080", "#333399", "#3333333", "#800000", "#ff 6600 ","#808000 ","#008080 ","#0000ff ","#666699 ","#808080 ","#ff0000 ","#ff9900 ","#99cc00 ","#339966 ", "#33cccc", "#3366ff", "#800080", "#9999999", "#ff00ff", "#ffcc00", "#fff00", "#00ff00", "#00ffff", "#00ccff", "#993366", "#CC cccc ","#ff99cc ","#ffcc99 ","#fff99 ","#ccfcccc ","#ccff99 ","#ccffcc ","#ccfff ","#ccffff ","#99ccff ","#cc99ff ","#fff99 ","#ccffcc ","#ccfff ","#cc99ff "; this.initialize (idstr);} colorpicker.prototype = {초기화 : function (idstr) {var count = 0; var html = ''; var self = 이것; html+= '<테이블 cellpacing = "5"cellpadding = "0"bordercolor = "#000000"style = "cursor : 포인터; 배경 :#ece9d8"mce_style = "커서; 배경 :#ece9d8">'; // html+= '<tr> <td align = "center"colspan = "8"id = "currentColor"bgcolor = "#ffffffff"> current color </td> </tr>'; for (i = 0; i <5; i ++) {html+= "<tr>"; for (j = 0; j <8; j ++) {html+= '<td align = "center"style = "background :'+this.colorpool [count]+'"mce_style = "background :'+this.colorpool [count]+'"unselectable = "on"> ">"> "> td>'; 카운트 ++; } html+= "</tr>"; } html+= '</table>'; this.trigger = document.getElementById (idstr); this.div = document.createElement ( 'div'); this.div.innerhtml = html; var tds = this.div.getElementsByTagName ( 'td'); for (var i = 0, l = tds.length; i <l; i ++) {tds [i] .onclick = function () {self.setcolor (this.style.backgroundColor); }} this.div.id = 'mycolorpicker'; this.trigger.parentNode.appendChild (this.div); this.div.style.position = '절대'; this.div.style.left = this.trigger.offsetleft + 'px'this.div.style.top = (this.trigger.clientheight + this.trigger.offsettop) + 'px'; //this.hide (); this.trigger.onclick = function () {if (self.div.style.display == 'none') {self.show (); 거짓을 반환합니다. } else {self.hide (); 거짓을 반환합니다. }}}, setColor : function (c) {this.hide (); documb // setColor의 함수를 결정하기 위해 기능을 직접 정의합니다. false "id ="demo "style ="위치 : 절대; 왼쪽 : 200px "> 색상 선택 </a> </div> <script type ="text/javaScript "> <!-함수 initColorPicker () {picker = new ColorPicker ( 'demo');} //-> </script> </html>JS 컬러 도구에 관심이있는 친구는이 사이트의 온라인 도구를 참조 할 수 있습니다 .
RGB 색상 인코딩 생성기
RGB 색상 쿼리 비교 table_color 코드 table_colour 영어 이름 수집
온라인 웹 색상 일치 도구
JavaScript에 대한 자세한 내용은이 사이트의 주제를 확인하십시오 : "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술 요약", Javascript Scription의 요약 "" "Javascript Skniffic의"JavaScript " Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.