Бывает такая ситуация, когда вам нужно добавить на сайт список цен на товары, цена на которые должна оперативно меняться вместе с курсом доллара, но должна показываться в какой-то другой валюте, например в рублях.
Я напишу о том, как сделать это с помощью JavaScript. Конечно, у этого способа есть недостатки, но зато он самый простой. Вы узнаете, как округлить число до сотен в javascript с помощью функции round, и увидите очередное применение цикла for.
Сначала - краткая суть работы - как это будет достигнуто:
1. Получение курса.
2. Операция конвертации - умножение цены в долларах на его курс относительно рубля.
3. Вывод результата конвертации.
Итак, создадим таблицу. В ней будет указана некая средняя цена. Если у пользователя отключен javascript, или есть проблема на стороне сервера курса валют, то будет выводится она. В ином случае будут производится вычисления. Каждой ячейке с ценой должен быть присвоен определенный id. Я использовал id вида price1,price2,price3...
<table>
<tr>
<td style="text-align: left"><b>Товар</b>
</td>
<td><b>Цена (в рублях)</b></td>
</tr>
<tr>
<td style="text-align: left">Чехол
</td>
<td id="price1">290</td>
</tr>
<tr>
<td style="text-align: left">Аккумулятор
</td>
<td id="price2">2999</td>
</tr>
<tr>
<td style="text-align: left">Смартфон
</td>
<td id="price3">5999</td>
</tr>
</table>
Курс валют легче всего брать с сервиса cbr-xml-daily.ru
Создадим 2 переменных - для курса и массива цен. Также создадим функцию, которая получает текущий курс и записывает в переменную (не забудьте подключить библиотеку):
<script>
var USDrate = 55;
var list = [];
function CBR_XML_Daily_Ru(rates) {
var USDrate = rates.Valute.USD.Value;
}
</script>
<script src="https://cbr-xml-daily.ru/daily_jsonp.js"></script>
Перейдем к формированию списка цен. Цены будут вставлены в переменные вручную:
list[1] = 5;
list[2] = 50;
list[3] = 100;
Это цена в долларах. Но как перевести её в доллары? Просто умножим. Цены будут неровными, поэтому я решил округлять их до сотен, а затем вычитать 10 ради красивой цены с девятками.
list[1] = (Math.round((5*USDrate)/100)*100)-10;
Пояснения - метод round объекта Math округляет число до ближайшего целого. Так так нам нужно округлить до сотен, то сначала делим цену в рублях на 100, а затем умножаем опять на 100. Из получившейся суммы вычитаем 10 ради цен типа 15990. Конечно, такое округление может не иметь смысла при других ценах. Подбирайте интервал внимательно.
Побробнее о Math.round: https://developer.mozilla.org/ru/docs/Web/JavaScript/Referen...
Заполняем массив:
list[1] = (Math.round((5*USDrate)/100)*100)-10;
list[2] = (Math.round((50*USDrate)/100)*100)-10;
list[3] = (Math.round((100*USDrate)/100)*100)-10;
Для встраивания цен будем использовать свойство innerHTML (это свойство, а не функция/метод).
document.getElementById("price1").innerHTML = list[1];
getElementById используется для определения элемента (id чувствителен к регистру).
Так как innerHTML свойство, а не функция, то мы должны для присваивания использовать знак равно: innerHTML = "текст"
В принципе, на этом урок можно и закончить, можно просто вставлять id и переменные или текст вручную, но давайте используем преимущества циклов.
Узнаем длину массива автоматически с помощью свойства length:
var array_length = list.length; //количество строк
Создадим цикл:
for (var i = 1; i < array_length; i++) {
document.getElementById("price"+i).innerHTML = list[i]; //вставляем элементы массива
}
Подробнее о for: https://developer.mozilla.org/ru/docs/Web/JavaScript/Referen...
На этом все. Способ не идеальный, но самое главное - он работает, и сделать такой скрипт можно за пару минут.
Живая демка: https://masterprintspb.ru/kupit-originalnye-kartridzhi/
Итоговый код: https://paste.ofcode.org/36vXS2HsQfzGqMaGgGChxbH
