javascriptを使ってカラーコードを表示させよう！ – JavaScript Archives（ジャバスクリプトアーカイブス）

taka_oj

2017年10月30日

色コードを入力すると、色が反映されて、その色コードをRGBに変換させてみました。

以下がコードサンプルになります。

▼JavaScript

window.onload=function(){
var convert = document.getElementById('convert');
var color = document.getElementById('color');
var before = document.getElementById('before');
var beforecode = document.getElementById('before-c');
var after = document.getElementById('after');
var aftercode = document.getElementById('after-c');

convert.addEventListener('click', function() {
    var colorcode = color.value;
    var rgbArr = convert_colorcode_to_rgb(colorcode);
    if(!rgbArr) {
        alert('変換に失敗しました');
        return false;
    }

    if(colorcode.split('')[0] !== '#') {
        colorcode = '#' + colorcode;
    }
    var rgb = 'rgb(' + rgbArr[0] + ', ' + rgbArr[1] + ', ' + rgbArr[2] + ')';
 
    before.style.backgroundColor = colorcode;
    beforecode.innerHTML = colorcode;
    after.style.backgroundColor = rgb;
    aftercode.innerHTML = rgb;
}, false);
function convert_colorcode_to_rgb(colorcode) {

    if(colorcode.split('')[0] === '#') {
        colorcode = colorcode.substring(1);
    }
    if(colorcode.length === 3) {
        var codeArr = colorcode.split('');
        colorcode = codeArr[0] + codeArr[0] + codeArr[1] + codeArr[1] + codeArr[2] + codeArr[2];
    }

    if(colorcode.length !== 6) {
        return false;
    }
    var r = parseInt(colorcode.substring(0, 2), 16);
    var g = parseInt(colorcode.substring(2, 4), 16);
    var b = parseInt(colorcode.substring(4, 6), 16);
    return [r, g, b];
}
};

window.onload=function(){

var convert = document.getElementById('convert');

var color = document.getElementById('color');

var before = document.getElementById('before');

var beforecode = document.getElementById('before-c');

var after = document.getElementById('after');

var aftercode = document.getElementById('after-c');

convert.addEventListener('click', function() {

var colorcode = color.value;

var rgbArr = convert_colorcode_to_rgb(colorcode);

if(!rgbArr) {

alert('変換に失敗しました');

return false;

}

if(colorcode.split('')[0] !== '#') {

colorcode = '#' + colorcode;

}

var rgb = 'rgb(' + rgbArr[0] + ', ' + rgbArr[1] + ', ' + rgbArr[2] + ')';

before.style.backgroundColor = colorcode;

beforecode.innerHTML = colorcode;

after.style.backgroundColor = rgb;

aftercode.innerHTML = rgb;

}, false);

function convert_colorcode_to_rgb(colorcode) {

if(colorcode.split('')[0] === '#') {

colorcode = colorcode.substring(1);

}

if(colorcode.length === 3) {

var codeArr = colorcode.split('');

colorcode = codeArr[0] + codeArr[0] + codeArr[1] + codeArr[1] + codeArr[2] + codeArr[2];

}

if(colorcode.length !== 6) {

return false;

}

var r = parseInt(colorcode.substring(0, 2), 16);

var g = parseInt(colorcode.substring(2, 4), 16);

var b = parseInt(colorcode.substring(4, 6), 16);

return [r, g, b];

}

};

▼HTML

<h1>色コードを入力すると、色が表示されます。</h1>
#<input type="text" name="color" id="color">
<button id="convert">変換</button>
 
<p id="before">変換前: <span id="before-c"></span></p>
<p id="after">変換後: <span id="after-c"></span></p>
    </body>

<h1>色コードを入力すると、色が表示されます。</h1>

#<input type="text" name="color" id="color">

</body>

今回、参考にさせていただいたのは、

『Qiita』さんです。
ありがとうございます。

デモページは、こちら

JavaScript

“javascriptを使ってカラーコードを表示させよう！” への2件のフィードバック

ふみ on 2018年3月8日

質問です。
javascriptを実際にwebデザインのアニメーションなどに活用したいのですが、そのやり方がいまいち分かりません。デザインに生かす上で根本的にどういうことを考えて記述を考えないといけないのでしょうか？

返信
- Takaya on 2018年3月12日
  
  ＞ふみさん
  
  そうですね、私どもではまず取り入れるアニメーションが、せっかく見やすく伝えやすいデザイン作ったのに、アニメーションが邪魔していないか。などを考えますね。
  本当に、そのアニメーションは伝えるデザインの上で、必要な処理なのか。
  
  WEBページへの活用方法ですが、制作中のWEBページに組み込む前に、一度、それだけの簡易なページを作って（このブログでもあるようなデモページ）、動くことを確かめてから、制作中のWEBページに組み込んでおります。
  いきなり、制作中のWEBページに入れると、様々な原因で動かないことが多々ありますので。
  
  返信

JavaScript Archives（ジャバスクリプト アーカイブス）

“javascriptを使ってカラーコードを表示させよう！” への2件のフィードバック

コメントを残す コメントをキャンセル

JavaScript Archives（ジャバスクリプトアーカイブス）

コメントを残すコメントをキャンセル