将RGB格式的颜色值转换为十六进制

最新推荐文章于 2024-01-17 23:24:13 发布

不善表演

最新推荐文章于 2024-01-17 23:24:13 发布

阅读量2.7k

点赞数

分类专栏： JavaScript技术

JavaScript技术专栏收录该内容

35 篇文章 1 订阅

订阅专栏

使用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>

不善表演

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
将RGB格式的颜色值转换为十六进制

使用JavaScript中提供的parseInt()方法和Number对象的toString()方法，parseInt()方法用于返回由字符串转换得到的整数，Number对象的toString()方法用于将数值转换为字符串，该方法可以返回数字的不同进制的值<%@ page language="java" contentType="text/html; charset=UTF-8" ...
复制链接

扫一扫