Биржа криптовалют Binance, зарегистрированная на Мальте в 2017 году, на момент написания этого поста считается самой продвинутой по обьемам, ликвидности и удобству, но для программиста ее главное преимущество это RESTFULL API.
На этом примере я покажу как прямо из HTML страницы, без использования серверного кода, можно получать биржевые данные Binance с помощью jQuery.
Здесь у вас есть возможность рассмотреть как с помощью jQuery
- получить список всех торговых пар Binance и дополнительную инфу по паре типа Tick Step и Volume Step
- распарсить полученный по https JSON одной строкой кода
- получить текущую цену выбранной пары
- получить свечу по выбранной паре в формате: Open, Close, High, Low, Last, Volume, Time
- реализовать поиск пары строковым вводом
А так же увидите как с помощью тега style управлять стилями самого WordPress прямо из этого поста. Например можно скрыть правую панель и даже всю щапку, ну и вообще можно тут все испортить.
| Symbol | Selected | Min / Max | Price 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