HOME       LIST

【Javascript】カラーピッカー

ウェブカラーセレクター

険しい丘に登るためには、最初にゆっくり歩くことが必要である。(William Shakespeare)

Not on your life!(絶対いやだよ!/どうしてもいやだ)


<html>
<head><title></title>
<script type="text/javascript">
<!--
function fncSelColor(){
	var red   = parseInt(document.FRM.selRED.options[document.FRM.selRED.selectedIndex].text);
	var green = parseInt(document.FRM.selGREEN.options[document.FRM.selGREEN.selectedIndex].text);
	var blue  = parseInt(document.FRM.selBLUE.options[document.FRM.selBLUE.selectedIndex].text);

	red   = red.toString(16);
	if(red.length==1) red="0"+red;
	
	green = green.toString(16);
	if(green.length==1) green="0"+green;

	blue  = blue.toString(16);
	if(blue.length==1) blue="0"+blue;

	var RGB = "#" + red + green + blue;
	RGB = RGB.toUpperCase();
	div16NM.innerHTML = "16進数:" + RGB;
	divColor.style.backgroundColor = RGB;
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" onLoad="fncSelColor()">
<form name="FRM">
<div id="div16NM"></div>
<table border="1">
	<tr>
		<td align="center">Red</td>
		<td align="center">Green</td>
		<td align="center">Blue</td>
	</tr>
	<tr>
		<td valign="top">
			<select name="selRED" size="10" onChange="fncSelColor()">
				<option>5</option>
				<option>10</option>
				<option>15</option>
				<option>20</option>
				<option>25</option>
				<option>30</option>
				<option>35</option>
				<option>40</option>
				<option>45</option>
				<option>50</option>
				<option>55</option>
				<option>60</option>
				<option>65</option>
				<option>70</option>
				<option>75</option>
				<option>80</option>
				<option>85</option>
				<option>90</option>
				<option>95</option>
				<option>100</option>
				<option>105</option>
				<option>110</option>
				<option>115</option>
				<option>120</option>
				<option selected>125</option>
				<option>130</option>
				<option>135</option>
				<option>140</option>
				<option>145</option>
				<option>150</option>
				<option>155</option>
				<option>160</option>
				<option>165</option>
				<option>170</option>
				<option>175</option>
				<option>180</option>
				<option>185</option>
				<option>190</option>
				<option>195</option>
				<option>200</option>
				<option>205</option>
				<option>210</option>
				<option>215</option>
				<option>220</option>
				<option>225</option>
				<option>230</option>
				<option>235</option>
				<option>240</option>
				<option>245</option>
				<option>250</option>
				<option>255</option>
			</select>
		</td>
		<td valign="top">
			<select name="selGREEN" size="10" onChange="fncSelColor()">
				<option>5</option>
				<option>10</option>
				<option>15</option>
				<option>20</option>
				<option>25</option>
				<option>30</option>
				<option>35</option>
				<option>40</option>
				<option>45</option>
				<option>50</option>
				<option>55</option>
				<option>60</option>
				<option>65</option>
				<option>70</option>
				<option>75</option>
				<option>80</option>
				<option>85</option>
				<option>90</option>
				<option>95</option>
				<option>100</option>
				<option>105</option>
				<option>110</option>
				<option>115</option>
				<option>120</option>
				<option selected>125</option>
				<option>130</option>
				<option>135</option>
				<option>140</option>
				<option>145</option>
				<option>150</option>
				<option>155</option>
				<option>160</option>
				<option>165</option>
				<option>170</option>
				<option>175</option>
				<option>180</option>
				<option>185</option>
				<option>190</option>
				<option>195</option>
				<option>200</option>
				<option>205</option>
				<option>210</option>
				<option>215</option>
				<option>220</option>
				<option>225</option>
				<option>230</option>
				<option>235</option>
				<option>240</option>
				<option>245</option>
				<option>250</option>
				<option>255</option>
			</select>
		</td>
		<td valign="top">
			<select name="selBLUE" size="10" onChange="fncSelColor()">
				<option>5</option>
				<option>10</option>
				<option>15</option>
				<option>20</option>
				<option>25</option>
				<option>30</option>
				<option>35</option>
				<option>40</option>
				<option>45</option>
				<option>50</option>
				<option>55</option>
				<option>60</option>
				<option>65</option>
				<option>70</option>
				<option>75</option>
				<option>80</option>
				<option>85</option>
				<option>90</option>
				<option>95</option>
				<option>100</option>
				<option>105</option>
				<option>110</option>
				<option>115</option>
				<option>120</option>
				<option selected>125</option>
				<option>130</option>
				<option>135</option>
				<option>140</option>
				<option>145</option>
				<option>150</option>
				<option>155</option>
				<option>160</option>
				<option>165</option>
				<option>170</option>
				<option>175</option>
				<option>180</option>
				<option>185</option>
				<option>190</option>
				<option>195</option>
				<option>200</option>
				<option>205</option>
				<option>210</option>
				<option>215</option>
				<option>220</option>
				<option>225</option>
				<option>230</option>
				<option>235</option>
				<option>240</option>
				<option>245</option>
				<option>250</option>
				<option>255</option>
			</select>
		</td>
	</tr>
	<tr>
		<td colspan="3" align="center">
			<div id="divColor" style="height_100px;width:150px"></div>
		</td>
	</tr>
</table>
</form>
</body>
</html>

以前コンテンツ:【Javascript】MDB接続サンプル
次のコンテンツ:【Javascript】全角/半角の文字数チェック



Copyright(c) 2007-2019 dojeun.com All Rights Reserved.

Valid XHTML 1.0 Transitional