JavaScript实现16进制颜色值转RGB的方法
更新时间：2015年02月09日 09:23:34 作者：ZEAL
这篇文章主要介绍了JavaScript实现16进制颜色值转RGB的方法,是javascript比较典型的数值转换应用技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了JavaScript实现16进制颜色值转RGB的方法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>16进制颜色值转RGB</title>
<style>
*{margin:0;padding:0;font-family:'Microsoft yahei'}
.replace{width:400px;height:210px;margin:0 auto;padding-top:40px;}
.title{text-align:center;display:block}
form{width:200px;margin:30px auto;}
input{outline:none;}
input[type="button"]{cursor:pointer;}
</style>
<script>
function hexToR(h) {
return parseInt((cutHex(h)).substring(0, 2), 16)
}
function hexToG(h) {
return parseInt((cutHex(h)).substring(2, 4), 16)
}
function hexToB(h) {
return parseInt((cutHex(h)).substring(4, 6), 16)
}
function cutHex(h) {
return h.charAt(0) == "#" ? h.substring(1, 7) : h
}
function setBgColorById(id, sColor) {
var elems;
if (document.getElementById) {
if (elems = document.getElementById(id)) {
if (elems.style) elems.style.backgroundColor = sColor;
}
}
}
</script>
</head>
<body>
<div class="replace">
<span class="title">JavaScript原生16进制颜色值转RGB值</span>
<form name="rgb">
<input value="ffffff" maxlength="7" size="16" name="hex" />
<input onclick="setBgColorById('colorSample',this.form.hex.value);
this.form.r.value=hexToR(this.form.hex.value);
this.form.g.value=hexToG(this.form.hex.value);
this.form.b.value=hexToB(this.form.hex.value);" value="转换" type="button" name="btn"/>
<br /><br />
R:<input style="width:30px" size="3" name="r" />
G:<input style="width:30px" size="3" name="g" />
B:<input style="width:30px" size="3" name="b" />
</form>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>16进制颜色值转RGB</title>
<style>
*{margin:0;padding:0;font-family:'Microsoft yahei'}
.replace{width:400px;height:210px;margin:0 auto;padding-top:40px;}
.title{text-align:center;display:block}
form{width:200px;margin:30px auto;}
input{outline:none;}
input[type="button"]{cursor:pointer;}
</style>
<script>
function hexToR(h) {
return parseInt((cutHex(h)).substring(0, 2), 16)
}
function hexToG(h) {
return parseInt((cutHex(h)).substring(2, 4), 16)
}
function hexToB(h) {
return parseInt((cutHex(h)).substring(4, 6), 16)
}
function cutHex(h) {
return h.charAt(0) == "#" ? h.substring(1, 7) : h
}
function setBgColorById(id, sColor) {
var elems;
if (document.getElementById) {
if (elems = document.getElementById(id)) {
if (elems.style) elems.style.backgroundColor = sColor;
}
}
}
</script>
</head>
<body>
<div class="replace">
<span class="title">JavaScript原生16进制颜色值转RGB值</span>
<form name="rgb">
<input value="ffffff" maxlength="7" size="16" name="hex" />
<input onclick="setBgColorById('colorSample',this.form.hex.value);
this.form.r.value=hexToR(this.form.hex.value);
this.form.g.value=hexToG(this.form.hex.value);
this.form.b.value=hexToB(this.form.hex.value);" value="转换" type="button" name="btn"/>
<br /><br />
R:<input style="width:30px" size="3" name="r" />
G:<input style="width:30px" size="3" name="g" />
B:<input style="width:30px" size="3" name="b" />
</form>
</div>
</body>
</html>
运行效果如下图所示：
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
使用contextMenu插件实现Bootstrap table弹出右键菜单
如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中，其中“开发高效，设备兼容”的特点表现得非常明显。这篇文章主要介绍了使用contextMenu插件实现Bootstrap table弹出右键菜单,需要的朋友可以参考下2017-02-02
本篇文章主要介绍了微信小程序之页面拦截器的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Iview DatePicker 限制选择当前月份及以后的月份
文章介绍了如何使用iviewDatePicker组件限制用户只能选择当前月份及以后的月份,并提供了相关的html代码和js代码示例,感兴趣的朋友跟随小编一起看看吧2024-11-11
JavaScript对象除了可以保持自有的属性外，还可以从一个称为原型的对象继承属性。这篇文章主要介绍了详解JavaScript权威指南 之对象的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了基于javascript实现全屏漂浮广告，光标悬浮广告停止移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
这篇文章主要介绍了JS基于HTML5的canvas标签实现色相球效果,结合实例形式分析了基于canvas标签实现图形绘制的相关操作技巧,需要的朋友可以参考下2016-08-08
空值合并运算符是一个逻辑运算符,当左侧的操作数为null或undefined时,会返回右侧操作数,否则返回左侧操作数,本文就来详细的介绍一下如何使用2023-12-12
这篇文章主要介绍了何时使用Map来代替普通的JS对象，对Map感兴趣的同学，可以参考下2021-04-04
手把手教会你用Javascript实现放大镜效果(详细注释+完整代码)
放大镜可以说是前端人必须学会的程序之一,下面这篇文章主要给大家介绍了关于手把手教会你用Javascript实现放大镜效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了JavaScript中文件上传API，介绍了上传文件API的使用方法，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论