JavaScript實(shí)現(xiàn)16進(jìn)制顏色值轉(zhuǎn)RGB的方法
本文實(shí)例講述了JavaScript實(shí)現(xiàn)16進(jìn)制顏色值轉(zhuǎn)RGB的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>16進(jìn)制顏色值轉(zhuǎn)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進(jìn)制顏色值轉(zhuǎn)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="轉(zhuǎn)換" 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>
運(yùn)行效果如下圖所示:
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
微信小程序?qū)崿F(xiàn)頁面浮動(dòng)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頁面浮動(dòng)導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01for循環(huán) + setTimeout 結(jié)合一些示例(前端面試題)
最近在學(xué)習(xí)node.js開發(fā)資料,正好碰到了for循環(huán)+settimeout的經(jīng)典例子,下面小編給大家分享for循環(huán) + setTimeout 結(jié)合一些示例代碼,需要的朋友參考下吧2017-08-08JavaScript實(shí)現(xiàn)文字跟隨鼠標(biāo)特效
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)文字跟隨鼠標(biāo)特效,d代碼簡(jiǎn)單易操作,感興趣的朋友可以參考下2015-08-08使用script的src實(shí)現(xiàn)跨域和類似ajax效果
在解決js的跨域問題的時(shí)候, 有多種方式, 其中有一種是利用script標(biāo)簽的src屬性,因?yàn)檫@個(gè)屬性是不受域名限制的,我們可以直接讓src的這個(gè)鏈接指向跨域網(wǎng)站的一個(gè)接口, 這個(gè)接口返回的是js代碼或者json格式數(shù)據(jù), 從而實(shí)現(xiàn)跨域獲取數(shù)據(jù)。2014-11-11VsCode插件自動(dòng)生成注釋插件koroFileHeader使用教程
這篇文章主要介紹了VsCode插件自動(dòng)生成注釋插件koroFileHeader使用教程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01下拉菜單點(diǎn)擊實(shí)現(xiàn)連接跳轉(zhuǎn)功能的js代碼
下拉菜單點(diǎn)擊實(shí)現(xiàn)連接跳轉(zhuǎn)效果想必不是很常見吧,下面與大家分享下具體的實(shí)現(xiàn)另有實(shí)例,感興趣的朋友可以參考下哈2013-05-05