как да си направя страница за цветовете?

[dunix]

Искам да попитам как да си напавя страница като тази:
http://scotticus.net/tools/hex.php

 

[alex3]

Ето направих ти едно.

Работи и с # и без #
Само не съм сложил да работи с blue, green, red, ако ти трябва ще го преправя, но по-добре си ползвай #ff0000 вместо red например.

<style type="text/css">
div.colordemo { width: 100px; height: 100px; border: 2px solid red; }
a#setcolor { padding: 0 4px; }
</style>
<div class="colordemo" id="colordemo"></div>
<script type="text/javascript">
function parseColor(color)
{
    if(color.length > 7 || color == '')
    {
        return false;
    }
    
    if(color[0] != '#')
    {
        if(color.length > 6 || color.length < 3)
        {
            return false;
        }
        return '#' + color;
    }
    
    if(color.length < 4)
    {
        return false;
    }
    return color;
}

function setColor(color, id)
{
    return (color !== false) ? document.getElementById(id).style.backgroundColor = color : false;
}
</script>
<input type="text" name="color" id="color"><a id="setcolor" href="#" onclick="setColor(parseColor(document.getElementById('color').value), 'colordemo')">смени</a>

 

[teroristd]

:?: супер и на мене ми хареса но като сложа # в полето не работи, въпреки че само с букви и цифри е още по лесно но по принцип да знаеш. получаваш 6 от мене.

 

[talevtehnology]

:?: супер и на мене ми хареса но като сложа # в полето не работи, въпреки че само с букви и цифри е още по лесно но по принцип да знаеш. получаваш 6 от мене.

Странно при мен си бачка със # и без

 

[teroristd]

Проблема беше че не бях сложил доктайп. Извинете ме за спама

 

[teroristd]

Имам един въпрос как това може да стане за body а не за някакъв определен див. Мерси.

 

[alex3]

<style type="text/css">
div.colordemo { width: 100px; height: 100px; border: 2px solid red; }
a#setcolor { padding: 0 4px; }
</style>
<div class="colordemo" id="colordemo"></div>
<script type="text/javascript">
function parseColor(color)
{
    if(color.length > 7 || color == '')
    {
        return false;
    }
   
    if(color[0] != '#')
    {
        if(color.length > 6 || color.length < 3)
        {
            return false;
        }
        return '#' + color;
    }
   
    if(color.length < 4)
    {
        return false;
    }
    return color;
}

function setColor(color, tagname)
{
    return (color !== false) ? document.getElementsByTagName(tagname)[0].style.backgroundColor = color : false;
}
</script>
<input type="text" name="color" id="color"><a id="setcolor" href="#" onclick="setColor(parseColor(document.getElementById('color').value), 'body')">смени</a>

 

[teroristd]

Мерси

 

[alex3]

Пооправих малко кода да работи с повече работи.

' f1f1f --ljk1 ' => 'f1f1f1'
'0000' => #000000
'00000' => #000000
'ff00ff00ff00ff' => 'ff00ff'

<style type="text/css">
div.colordemo { width: 100px; height: 100px; border: 2px solid red; }
a#setcolor { padding: 0 4px; }
</style>
<div class="colordemo" id="colordemo"></div>
<script type="text/javascript">
function parseColor(color)
{
    color = color.replace(/[^0-9A-Fa-f]/gi, '');
    
    if(color.length > 7 || color == '')
    {
        color = color.substr(0, 7);
    }
   
    if(color[0] != '#')
    {
        if(color.length > 6 || color.length < 3)
        {
            color = color.substr(0, 6);
        }
        
        if(color[0] == color[1] && color[1] == color[2])
        {
            if(color[2] == color[3])
            {
                color = color[0] + color[1] + color[2] + color[0] + color[0] + color[0];
            }
        }
        
        return '#' + color;
    }
   
    if(color.length < 4)
    {
        return false;
    }
    
    return color;
}

function setColor(color, tagname)
{
    return (color !== false) ? document.getElementsByTagName(tagname)[0].style.backgroundColor = color : false;
}
</script>
<input type="text" name="color" id="color"><a id="setcolor" href="#" onclick="setColor(parseColor(document.getElementById('color').value), 'body'); return false;">смени</a>