1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 将RGB格式的颜色值转换为十六进制

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

时间:2023-07-13 05:59:16

相关推荐

将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" "/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。