Биржа криптовалют Binance, зарегистрированная на Мальте в 2017 году, на момент написания этого поста считается самой продвинутой по обьемам, ликвидности и удобству, но для программиста ее главное преимущество это RESTFULL API.

На этом примере я покажу как прямо из HTML страницы, без использования серверного кода, можно получать биржевые данные Binance с помощью jQuery.

Здесь у вас есть возможность рассмотреть как с помощью jQuery

  • получить список всех торговых пар Binance и дополнительную инфу по паре типа Tick Step и Volume Step
  • распарсить полученный по https JSON одной строкой кода
  • получить текущую цену выбранной пары
  • получить свечу по выбранной паре в формате: Open, Close, High, Low, Last, Volume, Time 
  • реализовать поиск пары строковым вводом

А так же увидите как с помощью тега style управлять стилями самого WordPress прямо из этого поста. Например можно скрыть правую панель и даже всю щапку, ну и вообще можно тут все испортить.

SymbolSelectedMin / MaxPrice change


				
					    $.getJSON('https://api.binance.com/api/v1/exchangeInfo', function (data) {
        var items = [];
        var syn = JSON.parse(JSON.stringify(data));
        for (i = 0; i < syn.symbols.length; i++) {
            var si = syn.symbols[i].symbol;
            items.push("<li onclick=\"changeSymbo('" + si + "')\">" + si + "</li>");
        }
        $("<ul/>", {
            "class": "symbols",
            html: items.join("")
        }).appendTo($(".info"));
    });
				
			
				
					<style>
    #primary {
        width: 99%;
    }
    #secondary {
        visibility: hidden;
        width: 1%;
    }
    #header-text-nav-container {
        height: 1px;
        visibility: hidden;
    }
    .header-post-title-container.clearfix {
        height: 80px;
    }
</style>
				
			
				
					<style>
    .symbols {
        width: 12em;
        height: 20em;
        line-height: 2em;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        overflow: scroll;
        overflow-x: hidden;
    }

    .symbols li {
        border-top: 1px solid #ccc;
        cursor: pointer;
        padding-left: 5px;
    }

    .symbols li:hover {
        background-color: lightgray;
    }

    .BinaTable {
        width: 823px;
    }
    .BinaTable td {
        padding: 10px;
    }

    .BinaTable .head td {
        text-align: center;
        border: ridge;
        font-size: larger;
        font: bold;
        background-color: lightgray;
    }
</style>
				
			
				
					<table class="BinaTable" border="0">
    <tr class="head"><td>Symbol</td><td>Selected</td><td>Min / Max</td><td>Price change</td></tr>
    <tr>
        <td width="220px">
            <input class="filterSymbol" /><br /><br />
            <div class="info"></div>
        </td>
        <td width="200px" valign="top">
            <div class="bina"></div>
        </td>
        <td width="200px" valign="top" align="right">
            <div class="mima"></div>
        </td>
        <td width="200px" valign="top" align="right">
            <div class="vola"></div>
        </td>
    </tr>
</table>

				
			
				
					<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
    var CurrentSymbol = "BTCUSDT";

    var min = 0;
    var max = 0;
    var hig = 0;
    var low = 0;

    function changeSymbo(simbo) {
        $("#price").text(0);
        min = 0; max = 0; hig = 0; low = 0;
        CurrentSymbol = simbo;
    }

    $.getJSON('https://api.binance.com/api/v1/exchangeInfo', function (data) {
        var items = [];
        var syn = JSON.parse(JSON.stringify(data));
        for (i = 0; i < syn.symbols.length; i++) {
            var si = syn.symbols[i].symbol;
            items.push("<li onclick=\"changeSymbo('" + si + "')\">" + si + "</li>");
        }
        $("<ul/>", {
            "class": "symbols",
            html: items.join("")
        }).appendTo($(".info"));
    });

    function ddd() {
        $.getJSON('https://api.binance.com/api/v3/ticker/price?symbol=' + CurrentSymbol, function (data) {
            var items = [];
            $.each(data, function (key, val) {
                if (key == "price") val = (val / 1);//.toFixed(2);
                items.push("<li id='" + key + "'>" + val + "</li>");
            });

            $(".bina").empty();
            $("<ul/>", {
                "class": "prices",
                html: items.join("")
            }).appendTo($(".bina"));
        });

        $.getJSON('https://api.binance.com/api/v3/klines?symbol=' + CurrentSymbol + '&interval=1m&limit=1', function (data) {
            var str = JSON.stringify(data);
            var arr = str.split(',');
            hig = (arr[2].replace('\"', '').replace('\"', '') / 1);//.toFixed(2);
            low = (arr[3].replace('\"', '').replace('\"', '') / 1);//.toFixed(2);
        });

        var p = ($("#price").text() / 1);//.toFixed(2);
        if (min == 0) min = p;
        if (max == 0) max = p;
        min = p < min ? p : min;
        max = p > max ? p : max;
        $(".mima").html(min + " / " + max + "<br>" + low + " / " + hig);
        $(".vola").html((100 * (max - min) / p).toFixed(5) + "%" + "<br>" + (100 * (hig - low) / p).toFixed(5) + "%");

    }
    setInterval(ddd, 1000);
</script>
				
			

Поиск или лучше сказать фильтрация длинного списка с помощью jQuery делается следующим образом. Честно говоря, я даже не понимаю как это работает. filterSymbol это текстовое поле в таблице.

				
					<script>
    $(".filterSymbol").on("keyup", function (ev) {
        var texto = $(this).val();
        filtro(texto);
    });

    function filtro(texto) {
        var lista = $(".info ul li").hide()
            .filter(function () {
                var item = $(this).text();
                var padrao = new RegExp(texto, "i");

                return padrao.test(item);
            }).closest("li").show();
    }
</script>
				
			
Binance REST API: доступ к биржевым данным jQuery
Tagged on:             

Leave a Reply

Your email address will not be published. Required fields are marked *