将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的值为空,修改为0
if(r==""){
r=0;
}
if(g==""){
g=0;
}
if(b==""){
b=0;
}
var red = parseInt(r).toString(16); //R值的16进制字符串
if(red.length<2){ //少于2位 , 补0
red="0"+red;
}
var green = parseInt(g).toString(16); //G值的16进制字符串
if(green.length<2){ //少于2位 , 补0
green="0"+green;
}
var blue = parseInt(b).toString(16); //B值的16进制字符串
if(blue.length<2){ //少于2位 , 补0
blue="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>