Полезные функции

---

Нет комментариев.

---

Форматирование чисел на JavaScript, объект Intl.NumberFormat

Способы показа чисел в формате – суммы (числа) для разных стран, процентов, дробной части, валюты, единиц измерения.

Использование объекта Intl.NumberFormat.

Форматирование суммы (числа)


const amount = 5500.67;

const en = new Intl.NumberFormat("en", {style: "decimal"}).format(amount);
const ru = new Intl.NumberFormat("ru", {style: "decimal"}).format(amount);
const de = new Intl.NumberFormat("de", {style: "decimal"}).format(amount);

console.log(en); // 5,500.67
console.log(ru); // 5 500,67
console.log(de); // 5.500,67


Форматирование процентов


const value = 0.851;

const en = new Intl.NumberFormat("en", {style: "percent"}).format(value);
const ru = new Intl.NumberFormat("ru", {style: "percent"}).format(value);
const tr = new Intl.NumberFormat("tr", {style: "percent"}).format(value);

console.log(en); // 85%
console.log(ru); // 85 %
console.log(tr); // %85


Вывод дробной части


const value = 0.851;

const en = new Intl.NumberFormat("en", {style: "percent", minimumFractionDigits: 2}).format(value);
const ru = new Intl.NumberFormat("ru", {style: "percent", minimumFractionDigits: 2}).format(value);

console.log(en); // 85.10%
console.log(ru); // 85,10 %

minimumFractionDigits задаёт количество знаков после запятой.

Форматирование валюты


const value = 85.1;

const usd = new Intl.NumberFormat("ru", {style: "currency", currency: "USD"}).format(value);
const euro = new Intl.NumberFormat("ru", {style: "currency", currency: "EUR"}).format(value);
const rub = new Intl.NumberFormat("ru", {style: "currency", currency: "RUB"}).format(value);

console.log(usd); // 85,10 $
console.log(euro); // 85,10 €
console.log(rub); // 85,10 ₽

По умолчанию выводится символ валюты, однако значение currencyDisplay: "name" позволяет вывести локализованное название валюты:
const value = 85;

const usd = new Intl.NumberFormat("ru", {style: "currency", currency: "USD", currencyDisplay: "name", minimumFractionDigits: 0}).format(value);
const euro = new Intl.NumberFormat("ru", {style: "currency", currency: "EUR", currencyDisplay: "name"}).format(value);
const rub = new Intl.NumberFormat("ru", {style: "currency", currency: "RUB", currencyDisplay: "name"}).format(value);

console.log(usd); // 85 долларов США
console.log(euro); // 85,00 евро
console.log(rub); // 85,00 российского рубля


Форматирование единиц измерения


const value = 85;

const longLiter = new Intl.NumberFormat("ru", {style: "unit", unit: "liter", unitDisplay: "long"}).format(value);
const shortLiter = new Intl.NumberFormat("ru", {style: "unit", unit: "liter", unitDisplay: "short"}).format(value);

console.log(longLiter); // 85 литров
console.log(shortLiter); // 85 л

Еще несколько примеров с форматированием разных единиц измерения:
const value = 85;

const kilobyte = new Intl.NumberFormat("ru", {style: "unit", unit: "kilobyte", unitDisplay: "long"}).format(value);
const meter = new Intl.NumberFormat("ru", {style: "unit", unit: "meter", unitDisplay: "long"}).format(value);
const gram = new Intl.NumberFormat("ru", {style: "unit", unit: "gram", unitDisplay: "long"}).format(value);

console.log(kilobyte); // 85 килобайт
console.log(meter); // 85 метров
console.log(gram); // 85 грамм


Переход на другую страницу JavaScript и html

Примеры кода перехода на другую страницу JavaScript и html.

Автоматическое JavaScript-перенаправление на другую страницу

JavaScript


window.location.href = 'URL';

URL - нужный адрес страницы. Код вставить внутри HEAD.

Перенаправление на другую страницу через 5 секунд

JavaScript


setTimeout(function(){
window.location.href = 'homepage-url';
}, 5 * 1000);


Перенаправление на другую страницу, исходя из условия

JavaScript


if (screen.width < 600) { window.location.href = 'redirect-url';
}


Перенаправление на другую страницу на основе действий пользователя

JavaScript


document.getElementById('mybutton').onclick = function() {
window.location.href = 'redirect-url';
};


html


<button onclick="window.location.href = '/'">Go to Homepage</button>


Показать и скрыть элемент

Здесь представленна коллекция скриптов, которая поможет показать и скрыть div с помощью ссылки, input type="radio", "checkbox", "select".

Показать и скрыть <div> через ссылку.


<script>

function viewdiv(id){
var el=document.getElementById(id);
if(el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
}
}

</script>
<a href="javascript:void(0);" onclick="viewdiv('mydiv');">Скрыть/Показать блок</a>
<div id="mydiv" style="display:none;">Содержимое блока</div>


Скрыть/Показать блок

Показать и скрыть <div> через input type="radio"


<div>
<div>
<input type="radio" name="view_block" id="show">Показать блок
<input type="radio" name="view_block" id="hide">Скрыть блок
</div>
</div>

<div id="block" style="display: none;"> Содержимое блока </div>

<script>
document.querySelectorAll("#show, #hide").forEach(function(el) {
el.addEventListener("change", function() {
if (document.getElementById("show").checked) {
document.getElementById("block").style.display = "block";
} else if (
document.getElementById("hide").checked) {
document.getElementById("block").style.display = "none";
}
});
});
</script>


Показать и скрыть <div> через input type="checkbox"


<script>
function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}
</script>

<input type="checkbox" onclick="showHide('whatever');" />Показать блок
<div id="whatever" style="visibility:hidden">Содержимое блока</div>


Показать блок

Показать и скрыть <div> через input type="select"


<select id="select_block">
<option class="hide">Скрыть блок</option>
<option class="show">Показать блок</option>
</select>
<div id="div_block" style="display: none;">Содержимое блока</div>
<script>
document.getElementById('select_block').addEventListener('change', function(){
if(this.options[this.selectedIndex].classList.contains("show" )){
document.getElementById('div_block').style.display ="block"
}else{
document.getElementById('div_block').style.display ="none"
};
});
</script>

Скрыть блок Показать блок

Показать и скрыть <div> через button


<button id="showContent" onclick="document.getElementById('content_block').style.display='block'; document.getElementById('showContent').style.display='none'; document.getElementById('hideContent').style.display='block';" style="display:none;" >Показать</button>
<button id="hideContent" onclick="document.getElementById('content_block').style.display='none'; document.getElementById('hideContent').style.display='none'; document.getElementById('showContent').style.display='block';" style="display:block;" >Скрыть</button>

<div id="content_block" style="display:block;"><font size="12" color="#ff0000">Содержимое блока</font> </div>

Показать Скрыть

Печать страницы или ее части в JavaScript

Код на JavaScript и JQuery позволяет распечатать всю страницу целиком или её части.

Установите библиотеку jquery-1.9.1.min.js на свой сайт и подключите её внутри HEAD.

Код печати всей страницы:


<button onClick="window.print()">Печать</button>

Печать

Код печати части страницы:

html


<div class='to_print'>
<hr>
<h4>Печать чека:</h4>
<table>
<tr><td>Название</td><td>Стоимость</td><td>Дата</td><td>Количество</td></tr>
<tr><td>Кока кола</td><td>67 руб.</td><td>12.02.2015</td><td>1 шт.</td></tr>
<tr><td>Сок Добрый</td><td>70 руб.</td><td>12.02.2015</td><td>1 шт.</td></tr>
<tr><td>Хлеб пшеничный</td><td>23 руб.</td><td>12.02.2015</td><td>2 шт.</td></tr>
</table>
<hr>
</div>
<button class="myprint">Печать</button>

javascript


<script>
$(function(){
$('.myprint').click(function(){ //при клике на что срабатывает печать
var html_to_print=$('.to_print').html(); //что печатаем
var iframe=$('<iframe id="print_frame">');
$('body').append(iframe);
var doc = $('#print_frame')[0].contentDocument || $('#print_frame')[0].contentWindow.document;
var win = $('#print_frame')[0].contentWindow || $('#print_frame')[0];
doc.getElementsByTagName('body')[0].innerHTML=html_to_print;
win.print();
$('iframe').remove();
});
});
</script>
<style>#print_frame{display: none;}</style>


Печать