0

Как подсоединить базу данных к Javascript?

У меня есть код на Javascript который находит ближайший похожий цвет(похожие цвета он берет из массива) и мне нужно чтобы в массив поступали цвета из базы данных MySQL. Как мне это сделать? Помогите пожалуйста.

<html>
<head>
<title>dsfsf</title>
<script type="text/javascript" src="Shades/table/jquery.js"></script>
<style>
div {
width:50px;
height:50px;
margin:0 0 0 20px;
}

p {
margin:20px;
}
</style>

</head>
<body>
<!--Подключение к БД-->
<?php
$db = mysql_connect('localhost', 'php_color', '12345');
mysql_query("SET NAMES 'cp1251'");
mysql_select_db("shedow",$db);

// Выбираем из таблицы color_names HEX 
$result = mysql_query("SELECT HEX FROM color_names  ") or die(mysql_error());
$myrow = mysql_fetch_array($result);
?>
<script>
$(document).ready(function(){
    function getSimilarColors (color) {
    //В этот массив занести данные из БД 
        var base_colors=["660000","990000","cc0000","cc3333","ea4c88","993399","663399","333399","0066cc","0099cc","66cccc","77cc33","669900","336600","666600","999900","cccc33","ffff00","ffcc33","ff9900","ff6600","cc6633","996633","663300","000000","999999","cccccc","ffffff"];

        //Convert to RGB, then R, G, B
        var color_rgb = hex2rgb(color);
        var color_r = color_rgb.split(',')[0];
        var color_g = color_rgb.split(',')[1];
        var color_b = color_rgb.split(',')[2];

        //Create an emtyp array for the difference betwwen the colors
        var differenceArray=[];

        //Function to find the smallest value in an array
        Array.min = function( array ){
               return Math.min.apply( Math, array );
        };

        //Convert the HEX color in the array to RGB colors, split them up to R-G-B, then find out the difference between the "color" and the colors in the array
        $.each(base_colors, function(index, value) { 
            var base_color_rgb = hex2rgb(value);
            var base_colors_r = base_color_rgb.split(',')[0];
            var base_colors_g = base_color_rgb.split(',')[1];
            var base_colors_b = base_color_rgb.split(',')[2];

            //Add the difference to the differenceArray
            differenceArray.push(Math.sqrt((color_r-base_colors_r)*(color_r-base_colors_r)+(color_g-base_colors_g)*(color_g-base_colors_g)+(color_b-base_colors_b)*(color_b-base_colors_b)));
        });

        //Get the lowest number from the differenceArray
        var lowest = Array.min(differenceArray);

        //Get the index for that lowest number
        var index = differenceArray.indexOf(lowest);

        //Function to convert HEX to RGB
        function hex2rgb( colour ) {
            var r,g,b;
            if ( colour.charAt(0) == '#' ) {
                colour = colour.substr(1);
            }

            r = colour.charAt(0) + colour.charAt(1);
            g = colour.charAt(2) + colour.charAt(3);
            b = colour.charAt(4) + colour.charAt(5);

            r = parseInt( r,16 );
            g = parseInt( g,16 );
            b = parseInt( b ,16);
            return r+','+g+','+b;
        }

        //Return the HEX code
        return base_colors[index];
    }

    //Just for the demo
    $('button').click(function(){        
        $('.base_color').css('backgroundColor',$('input').val());
        $('.nearest_color').css('backgroundColor','#'+getSimilarColors($('input').val()));
        return false;
    });
});
</script>
<p>
    <input type="text" value="#ffcc00"/>
    <button>Get the closest color</button> 
</p>

<p>Base color:</p>
<div class="base_color"></div>

<p>Closest color:</p>
<div class="nearest_color"></div>
</body>

</html>
2
  • ikerRr, оно видит только первую запись в бд, а не все 217 записей
    – x_decimo_x
    22 июн 2014 в 10:04
  • @x_decimo_x, ну так правильно, вы же выбрали только одну запись: $myrow = mysql_fetch_array($result);
    – likerRr
    22 июн 2014 в 18:59

1 ответ 1

1
var base_colors = <?php echo json_encode($myrow); ?>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.