Форум

Ryuantu · #1 (**permalink**) 18.03.2019, 22:19

Здравствуйте, нашёл один скрипт из интернета (кривой CSS сам добавил), хороший (курс с ЦБ, думаю многим понравится). Естественно доллар и евро в курсах одна сапога пара, но никак не получается их вместе совместить. Совместить так, чтобы были в одном блоке (как на скрине к примеру, евро под долларом)

Использовал BlueFish
Доллар

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
   <link rel="stylesheet" href="sjfike.css">
</head>
<body>
<div id="usd"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script>
$.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {
var Value = data.Valute.USD.Value
var Previous = data.Valute.USD.Previous
function trend(Value, Previous) {
if (Value > Previous) return '<b style="color:#00ff00;"> в–І</b>';
if (Value < Previous) return '<b style="color:#ff0000;"> в–ј</b>';
return '';
}
var trend = trend(data.Valute.USD.Value, data.Valute.USD.Previous);
 $('#usd').html("USD ЦБ&nbsp;&nbsp;" +data.Valute.USD.Value.toFixed(1) +trend);
});
</script>
 
</body>
</html>

Евро

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
   <link rel="stylesheet" href="sjfike.css">
</head>
<body>
<div id="eur"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script>
$.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {
var Value = data.Valute.EUR.Value
var Previous = data.Valute.EUR.Previous
function trend(Value, Previous) {
if (Value > Previous) return '<b style="color:#00ff00;"> в–І</b>';
if (Value < Previous) return '<b style="color:#ff0000;"> в–ј</b>';
return '';
}
var trend = trend(data.Valute.USD.Value, data.Valute.EUR.Previous);
 $('#eur').html("EUR ЦБ&nbsp;&nbsp;" +data.Valute.EUR.Value.toFixed(1) +trend);
});
</script>
</body>
</html>

CSS -
#eur {
background-color: orange;
height: 100px;
width: 120px;
margin-left:100px;
}

laimas · #2 (**permalink**) 18.03.2019, 22:26

Сообщение от Ryuantu

никак не получается их вместе совместить

Не делайте два раздельных запроса к ЦБ, в одном возвращаются все курсы. Извлекайте из ответа нужные и выводите.

Ryuantu · #3 (**permalink**) 18.03.2019, 22:40

Сообщение от laimas

Не делайте два раздельных запроса к ЦБ, в одном возвращаются все курсы. Извлекайте из ответа нужные и выводите.

Примерно я догадывался, что напишите вы)
https://www.cbr-xml-daily.ru/daily_json.js - это я полагаю запрос?
Ёжики давно уже смеются)

laimas · #4 (**permalink**) 18.03.2019, 22:47

Вот запрос

$.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {
а тут обработка его ответа, вот тут и выводите не только data.Valute.EUR, но и любую иную валюту
})

А что возвращается в data запросом по URL https://www.cbr-xml-daily.ru/daily_json.js можно посмотреть в консоли отладчика.

Nexus · #5 (**permalink**) 19.03.2019, 12:51

Попробуйте так:

$.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {
    const currencies = ['USD', 'EUR'];

    const courses = currencies.reduce((result, currencyName) => {
        const currencyData = data.Valute[currency];

        const isIncrease = currencyData.Value >= currencyData.Previous;
        const html = `<b style="color:#${isIncrease?'00ff00':'ff0000'};"> в–${isIncrease?'I':'J'}</b>`;

        result[currencyName.toLowerCase()] =
            `${currencyName} ЦБ&nbsp;&nbsp;${currencyData.Value.toFixed(1)}${html}`;


        return result;
    }, {});


    Object.keys(courses).forEach(containerId => {
        $('#' + containerId).html(courses[containerId]);
    });
});

Форум

Справочник

Discord чат

Курсы javascript