首頁 > 其他

JS實現的系統調色盤完整執行個體_javascript技巧

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了JS實現的系統調色盤。分享給大家供大家參考，具體如下：

運行效果圖如下：

整體頁面代碼：

<html><head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title>DW調色盤</title><script type="text/javascript" language="javascript">var ColorHex=new Array('00','33','66','99','CC','FF')var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')var current=nullfunction getEvent(){  if(document.all)  {  return window.event;//如果是ie  }  func=getEvent.caller;  while(func!=null)  {    var arg0=func.arguments[0];    if(arg0)    {      if((arg0.constructor==Event || arg0.constructor ==MouseEvent)||(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))      {      return arg0;      }    }    func=func.caller;  }  return null;}function intocolor(){  var colorTable=''  for (i=0;i<2;i++)  //迴圈2部分  {    for (j=0;j<6;j++) //迴圈6行    {      colorTable=colorTable+'<tr height=12>'      for (k=0;k<3;k++)      {        for (l=0;l<6;l++)        {          colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'        }      }    }  }  colorTable='<table width=217 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'      +'<tr height=30><td colspan=21 bgcolor=#cccccc>'      +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'      +'<tr><td width="3"><td>當前色:</td><td><input type="text" name="DisColor" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#FFFFFF"></td>'      +'<td width="3"><td><input type="text" name="HexColor" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#FFFFFF"></td></tr></table></td></table>'      +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:hand;">'      +colorTable+'</table>';  colorpanel.innerHTML=colorTable}function doOver() {  var evt=getEvent();  var element=evt.srcElement || evt.target;  var DisColor=document.getElementById("DisColor");  var HexColor=document.getElementById("HexColor");  if ((element.tagName=="TD") && (current!=element)) {    if (current!=null){      current.style.backgroundColor = current._background    }    element._background = element.style.backgroundColor    DisColor.style.backgroundColor = rgbToHex(element.style.backgroundColor)    HexColor.value = rgbToHex(element.style.backgroundColor)    element.style.backgroundColor = "white"    current = element  }}function rgbToHex(aa){  if(aa.indexOf("rgb") != -1)  {    aa=aa.replace("rgb(","")    aa=aa.replace(")","")    aa=aa.split(",")    r=parseInt(aa[0]);    g=parseInt(aa[1]);    b=parseInt(aa[2]);    r = r.toString(16);    if (r.length == 1) { r = '0' + r; }    g = g.toString(16);    if (g.length == 1) { g = '0' + g; }    b = b.toString(16);    if (b.length == 1) { b = '0' + b; }    return ("#" + r + g + b).toUpperCase();  }  else  {    return aa;  }}function doOut() {  if (current!=null) current.style.backgroundColor = current._background;}function doclick(){  var evt=getEvent();  var element=evt.srcElement || evt.target;  if (element.tagName=="TD"){    var bg=rgbToHex(element._background);    document.getElementById("orange").value=bg;    alert("選取顏色: "+bg);    return bg;  }}</script></head><body onload="intocolor()">  <div id="colorpanel">  </div>  <table width=217 border="1" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">  <tr height=30>    <td colspan=21 bgcolor=#cccccc>      <table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">        <tr>          <td>所選色:</td>          <td><input id="orange" type="text" value="" size="20" /></td>        </tr>      </table>    </td>  </tr>  </table></body></html>

PS：這裡再為大家推薦幾款本站的相關線上工具：

線上RGB、HEX顏色代碼產生器：
http://tools.jb51.net/color/rgb_color_generator

RGB顏色查詢對照表_顏色代碼錶_顏色的英文名稱大全：
http://tools.jb51.net/color/jPicker

線上網頁調色盤工具：
http://tools.jb51.net/color/color_picker

線上顏色選取器工具/RGB顏色查詢對照表：
http://tools.jb51.net/color/colorpicker

更多關於JavaScript相關內容可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript尋找演算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍曆演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More