生活随笔
收集整理的這篇文章主要介紹了
将RGB格式的颜色值转换为十六进制
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用JavaScript中提供的parseInt()方法和Number對象的toString()方法,parseInt()方法用于返回由字符串轉換得到的整數,Number對象的toString()方法用于將數值轉換為字符串,該方法可以返回數字的不同進制的值
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script language="javascript"> function toHex(r,g,b){//如果R、G、B的值為空,修改為0if(r==""){r=0;}if(g==""){g=0;}if(b==""){b=0;}var red = parseInt(r).toString(16); //R值的16進制字符串if(red.length<2){ //少于2位 , 補0red="0"+red;}var green = parseInt(g).toString(16); //G值的16進制字符串if(green.length<2){ //少于2位 , 補0green="0"+green;}var blue = parseInt(b).toString(16); //B值的16進制字符串if(blue.length<2){ //少于2位 , 補0blue="0"+blue;}return "#"+red+green+blue; //組合成一個RGB顏色字符串
}function convert(){var R = document.getElementById("r_value").value;var G = document.getElementById("g_value").value;var B = document.getElementById("b_value").value;if(isNaN(R)){alert("您輸入的(R)顏色值必須為0-255之間的數字!");return ;}else{if(R>255){alert("請輸入0-255之間的數字!");return;}} if(isNaN(G)){alert("您輸入的(G)顏色值必須為0-255之間的數字!");return ;}else{if(G>255){alert("請輸入0-255之間的數字!");return;}}if(isNaN(B)){alert("您輸入的(B)顏色值必須為0-255之間的數字!");return ;}else{if(B>255){alert("請輸入0-255之間的數字!");return;}}document.getElementById("hex_num").value = toHex(R,G,B);}</script>
<body>
<fieldset class="style1"><legend>RGB顏色值轉換</legend>
<form action="" id="myform">
<table align="center"><tr><td>請輸入要轉換的RGB顏色分量值:</td></tr><tr><td>R:<input type="text" id="r_value" size="8"><font>(0-255)</font><br/>G:<input type="text" id="g_value" size="8"><font>(0-255)</font><br/>B:<input type="text" id="b_value" size="8"><font>(0-255)</font></td></tr><tr><td>轉換后十六進制的顏色值:</td></tr><tr><td><input type="text" id="hex_num" size="30"></td></tr><tr><td align="center"><input type="button" value="轉換" "convert()"><input type="reset" value="重置"></td></tr>
</table>
</form>
</fieldset>
</body>
</html>
總結
以上是生活随笔為你收集整理的将RGB格式的颜色值转换为十六进制的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。