JS實(shí)現(xiàn)的在線調(diào)色板實(shí)例(附demo源碼下載)
更新時(shí)間：2016年03月01日 11:42:40 作者：yenange
這篇文章主要介紹了JS實(shí)現(xiàn)的在線調(diào)色板,可實(shí)現(xiàn)響應(yīng)鼠標(biāo)點(diǎn)擊動(dòng)態(tài)改變調(diào)色板顏色的功能,涉及JavaScript針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作與計(jì)算技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)的在線調(diào)色板。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ColorSchemer - Online Color Scheme Generator</title>
<META NAME="keywords" CONTENT="web page design - color - scheme - color scheme - color schemer - colorschemer - rgb - hex - web color - html color - color pick - pick - picker">
<META NAME="description" CONTENT="Generate matching color schemes like never before!">
<link rel="STYLESHEET" type="text/css" href="default.css">
<script language="JavaScript" type="text/javascript" src="funcs.js"></script>
</head>
<body bgcolor="#FCFCF9" text="#000000" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" rightmargin="0" onLoad="ChangeColors(51,102,255);">
<div ID="ColorInput">
<div class="sideHead">Current Color</div>
<div class="currentBorder"><div ID="currentColor"> </div></div>
<form name="codes" id="codes">
<div class="currentBorder">
<div class="navBox">
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>R:</td>
<td><input type="text" name="r" value="0" maxlength="3" class="rgbBox"></td>
</tr>
<tr>
<td>G:</td>
<td><input type="text" name="g" value="0" maxlength="3" class="rgbBox"></td>
</tr>
<tr>
<td>B:</td>
<td><input type="text" name="b" value="0" maxlength="3" class="rgbBox"></td>
</tr>
<tr>
<td colspan="2"><input type="button" class="button" value="Set RGB" onClick="ChangeColors(document.getElementById('codes').r.value,document.getElementById('codes').g.value,document.getElementById('codes').b.value);"></td>
</tr>
<tr>
<td colspan="2">#<input type="text" class="hexBox" name="hex" value="000000" maxlength="6"></td>
</tr>
<tr>
<td colspan="2"><input type="button" class="button" value="Set HEX" onClick="SetHex(document.getElementById('codes').hex.value);"></td>
</tr>
</table>
<input type="button" class="button" value="Lighten Scheme" onClick="LightenScheme();" style="margin-bottom: 0px;">
<input type="button" class="button" value="Darken Scheme" onClick="DarkenScheme();">
</div></div>
</form>
</div>
<div ID="Wheel" align="center">
<div ID="swatch0" class="swatch">
<div class="border"><div ID="0" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="0RGB" class="rgb">255.255.255</div>
<div ID="0HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch1" class="swatch">
<div class="border"><div ID="1" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="1RGB" class="rgb">255.255.255</div>
<div ID="1HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch2" class="swatch">
<div class="border"><div ID="2" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="2RGB" class="rgb">255.255.255</div>
<div ID="2HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch3" class="swatch">
<div class="border"><div ID="3" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="3RGB" class="rgb">255.255.255</div>
<div ID="3HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch4" class="swatch">
<div class="border"><div ID="4" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="4RGB" class="rgb">255.255.255</div>
<div ID="4HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch5" class="swatch">
<div class="border"><div ID="5" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="5RGB" class="rgb">255.255.255</div>
<div ID="5HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch6" class="swatch">
<div class="border"><div ID="6" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="6RGB" class="rgb">255.255.255</div>
<div ID="6HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch7" class="swatch">
<div class="border"><div ID="7" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="7RGB" class="rgb">255.255.255</div>
<div ID="7HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch8" class="swatch">
<div class="border"><div ID="8" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="8RGB" class="rgb">255.255.255</div>
<div ID="8HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch9" class="swatch">
<div class="border"><div ID="9" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="9RGB" class="rgb">255.255.255</div>
<div ID="9HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch10" class="swatch">
<div class="border"><div ID="10" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="10RGB" class="rgb">255.255.255</div>
<div ID="10HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatch11" class="swatch">
<div class="border"><div ID="11" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="11RGB" class="rgb">255.255.255</div>
<div ID="11HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatchm1" class="swatch">
<div class="border"><div ID="m1" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="m1RGB" class="rgb">255.255.255</div>
<div ID="m1HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatchm2" class="swatch">
<div class="border"><div ID="m2" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="m2RGB" class="rgb">255.255.255</div>
<div ID="m2HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatchm3" class="swatch">
<div class="border"><div ID="m3" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="m3RGB" class="rgb">255.255.255</div>
<div ID="m3HEX" class="hex">#FFFFFF</div>
</div>
<div ID="swatchm4" class="swatch">
<div class="border"><div ID="m4" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
<div ID="m4RGB" class="rgb">255.255.255</div>
<div ID="m4HEX" class="hex">#FFFFFF</div>
</div>
</div>
<script language="JavaScript">DrawPalette();</script>
</body>
</html>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 用JavaScript仿PS里的羽化效果代碼
- JS批量修改PS中圖層名稱的方法
- JS實(shí)現(xiàn)的系統(tǒng)調(diào)色板完整實(shí)例
- JS 網(wǎng)頁(yè)安全色調(diào)色板 DW風(fēng)格
- JavaScript使用Range調(diào)色及透明度實(shí)例
- 基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框
- JavaScript隨機(jī)生成顏色的方法
- JavaScript制作顏色反轉(zhuǎn)小游戲
- 漂亮! js實(shí)現(xiàn)顏色漸變效果
- JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示
- js實(shí)現(xiàn)按鈕顏色漸變動(dòng)畫效果
- js實(shí)現(xiàn)的簡(jiǎn)單radio背景顏色選擇器代碼
- js實(shí)現(xiàn)的在線調(diào)色板功能完整實(shí)例
相關(guān)文章
在javascript中執(zhí)行任意html代碼的方法示例解讀
關(guān)于javascript的eval（）函數(shù)無(wú)法執(zhí)行html代碼的問題，下面為大家介紹下一種在javascript中執(zhí)行任意html代碼的方法，感興趣的朋友不要錯(cuò)過2013-12-12
JavaScript設(shè)計(jì)模式經(jīng)典之命令模式
命令模式（Command）的定義是：用來(lái)對(duì)方法調(diào)用進(jìn)行參數(shù)化處理和傳送，經(jīng)過這樣處理過的方法調(diào)用可以在任何需要的時(shí)候執(zhí)行。接下來(lái)通過本文給大家介紹JavaScript設(shè)計(jì)模式經(jīng)典之命令模式，需要的朋友參考下2016-02-02
Javascript 實(shí)現(xiàn)微信分享（QQ、朋友圈、分享給朋友）
這篇文章主要介紹了Javascript 實(shí)現(xiàn)微信分享（QQ、朋友圈、分享給朋友）的相關(guān)資料,需要的朋友可以參考下2016-10-10
泛型程序設(shè)計(jì)(generic programming)是程序設(shè)計(jì)語(yǔ)言的一種風(fēng)格或范式,下面這篇文章主要給大家介紹了關(guān)于TypeScript中泛型使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
js大數(shù)相加出現(xiàn)精度丟失、運(yùn)算錯(cuò)誤的問題
js中數(shù)字類型長(zhǎng)度達(dá)到16位時(shí),進(jìn)行加減乘除運(yùn)算,會(huì)出現(xiàn)精度丟失,運(yùn)算結(jié)果錯(cuò)誤的問題,本文講述精度丟失的原因及解決辦法2023-08-08
JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實(shí)例分析【 5 個(gè)區(qū)別】
這篇文章主要介紹了JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別,結(jié)合實(shí)例形式分析了JS箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個(gè)區(qū)別與相關(guān)使用注意事項(xiàng),需要的朋友可以參考下2020-05-05
想必大家對(duì)Function.prototype.bind并不陌生吧，下面為大家介紹下它的簡(jiǎn)單調(diào)用及DOM調(diào)用，感興趣的朋友可以參考下2013-09-09
JavaScript腳本語(yǔ)言是什么_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript是什么？這篇文章主要介紹了一種廣泛用于客戶端Web開發(fā)的腳本語(yǔ)言JavaScript，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
在開發(fā)移動(dòng)應(yīng)用程序時(shí),我們經(jīng)常需要處理用戶交互事件,然而,有時(shí)候這些事件會(huì)冒泡,導(dǎo)致意外的行為和不良用戶體驗(yàn),在本文中,我們將探討如何使用UniApp框架來(lái)阻止事件冒泡,并提供一些示例代碼來(lái)幫助您理解如何實(shí)現(xiàn)這一功能,需要的朋友可以參考下2023-11-11
深入理解ES6學(xué)習(xí)筆記之塊級(jí)作用域綁定
本篇文章主要介紹了深入理解ES6學(xué)習(xí)筆記之塊級(jí)作用域綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08