Типовые функции javascript
Заказать сайт
Обратившись ко мне вы получите надежного и сведущего исполнителя, который быстро и качественно реализует любую задачу для Вас и Вашего бизнеса.
Последние записи
В каждом проекте возникает необходимость провести проверку данных на javascript. Чаще всего я использую следующие проверки
Проверка на урл
if(/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test($("#url").val())){
console.log("valid URL");
} else {
console.log("invalid URL");
}Проверка email
var reg_email = /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9_\.-]{2,45}\.[a-zA-Z]{2,20}$/;
if (reg_email.test(YOUR_VALUE)){
//Проверка пройдена
}Проверка мобильного телефона в международном формате
var reg_phone = /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?$/;
if (reg_phone.test(YOUR_VALUE)){
//Проверка пройдена
}Проверка номера кредитной карты
var cc = /[0-9]{4} {0,1}[0-9]{4} {0,1}[0-9]{4} {0,1}[0-9]{4}/;
if (cc.test(YOUR_VALUE)){
//Проверка пройдена
}Проверка даты кредитной карты
var cdate = /^\d{2}[./-]\d{2}$/;
if (cdate.test(YOUR_VALUE)){
//Проверка пройдена
}Проверка cvc кредитной карты
var cvc = /^[0-9]{3,4}$/;
if (cvc.test(YOUR_VALUE)){
//Проверка пройдена
}Проверка на существование
var isset = function(variable){
return typeof(variable) !== "undefined" && variable !== null && variable !== '';
}Проверка на Json
function isJson(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}Проверяем существование элемента с классом
if (document.querySelector('.mydivclass') !== null) {
// Элемент найден
}Проверка на нахождение элемента в массиве
var blockedTile = new Array("118", "67", "190", "43", "135", "520");
if(blockedTile.indexOf("118") != -1)
{
// Элемент найден
}Проверки на touch устройства
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
function is_touch_device() {
return 'ontouchstart' in window;
}
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on IE10 with some false positives
};
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
function is_touch_device() {
var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
var mq = function(query) {
return window.matchMedia(query).matches;
}
if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
return true;
}
var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
return mq(query);
}
function isMobile(){
var a = navigator.userAgent;
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))){
return true;
}else{
return false;
}
}
Проверка на разрешение экрана
if(window.matchMedia("(max-width: 768px)"))
{
//Проверка пройдена
}Проверить файл на существование в пределах одного домена
function fileExists(url) {
if(url){
var req = new XMLHttpRequest();
req.open('GET', url, false);
req.send();
return req.status==200;
} else {
return false;
}
}Проверить, что страница внутри iframe
var isFramed = false;
try {
isFramed = window != window.top || document != top.document || self.location != top.location;
} catch (e) {
isFramed = true;
}
if (isFramed) {
alert('Страница загружена в iframe');
} else {
alert('Страница загружена не в iframe');
}Обрезаем строку
console.log("13:45 PM".split(' ')[0]); // Разделить по пробелу, взять первую часть
console.log("13:45 PM".match(/\d?\d:\d\d/)[0]); // совпадение по регулярному выражению
console.log("13:45 PM".substr(0, 5)); // 5 символов, начиная с 0го
console.log("13:45 PM".substring(0, 5)); // копировать по индексам [0:5)
console.log("13:45 PM".replace(/\s.*/, '')); // заменить пробел и всё, что дальше пустой строкой
console.log("13:45 PM".slice(0, -3)); // срез без последних трёх символовToggleClass на javascript native
function toggleClass(element, className){
if (!element || !className){
return;
}
var classString = element.className, nameIndex = classString.indexOf(className);
if (nameIndex == -1) {
classString += ' ' + className;
}
else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
}
element.className = classString;
}Определяем, что элемент находится в зоне видимости. Взято отсюда
// Получаем нужный элемент
var element = document.querySelector('#target');
var Visible = function (target) {
// Все позиции элемента
var targetPosition = {
top: window.pageYOffset + target.getBoundingClientRect().top,
left: window.pageXOffset + target.getBoundingClientRect().left,
right: window.pageXOffset + target.getBoundingClientRect().right,
bottom: window.pageYOffset + target.getBoundingClientRect().bottom
},
// Получаем позиции окна
windowPosition = {
top: window.pageYOffset,
left: window.pageXOffset,
right: window.pageXOffset + document.documentElement.clientWidth,
bottom: window.pageYOffset + document.documentElement.clientHeight
};
if (targetPosition.bottom > windowPosition.top && // Если позиция нижней части элемента больше позиции верхней чайти окна, то элемент виден сверху
targetPosition.top < windowPosition.bottom && // Если позиция верхней части элемента меньше позиции нижней чайти окна, то элемент виден снизу
targetPosition.right > windowPosition.left && // Если позиция правой стороны элемента больше позиции левой части окна, то элемент виден слева
targetPosition.left < windowPosition.right) { // Если позиция левой стороны элемента меньше позиции правой чайти окна, то элемент виден справа
// Если элемент полностью видно, то запускаем следующий код
console.clear();
console.log('Вы видите элемент :)');
} else {
// Если элемент не видно, то запускаем этот код
console.clear();
};
};
// Запускаем функцию при прокрутке страницы
window.addEventListener('scroll', function() {
Visible (element);
});
// А также запустим функцию сразу. А то вдруг, элемент изначально видно
Visible (element);Проверяем полностью ли виден элемент. Взято отсюда
function is_fully_shown(target) {
var wt = $(window).scrollTop();
var wh = $(window).height();
var eh = $(target).height();
var et = $(target).offset().top;
if (et >= wt && et + eh <= wh + wt){
return true;
} else {
return false;
}
}
if (is_fully_shown('.active')) {
console.log(true);
}Добавляем все значения input в массив
var phones = [];
$('.aOffer').each(function() {
if ($(this).val() !== '') {
phones.push($(this).val());
}
});Scroll to top on javascript
window.scrollTo({
top: document.getElementById('payments').getBoundingClientRect().top + pageYOffset,
behavior: "smooth"
});Javascript number_format аналог функции на php - отсюда
function number_format(number, decimals, dec_point, thousands_sep) {
// http://kevin.vanzonneveld.net
// + original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfix by: Michael White (http://getsprink.com)
// + bugfix by: Benjamin Lupton
// + bugfix by: Allan Jensen (http://www.winternet.no)
// + revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// + bugfix by: Howard Yeend
// + revised by: Luke Smith (http://lucassmith.name)
// + bugfix by: Diogo Resende
// + bugfix by: Rival
// + input by: Kheang Hok Chin (http://www.distantia.ca/)
// + improved by: davook
// + improved by: Brett Zamir (http://brett-zamir.me)
// + input by: Jay Klehr
// + improved by: Brett Zamir (http://brett-zamir.me)
// + input by: Amir Habibi (http://www.residence-mixte.com/)
// + bugfix by: Brett Zamir (http://brett-zamir.me)
// + improved by: Theriault
// + improved by: Drew Noakes
// * example 1: number_format(1234.56);
// * returns 1: '1,235'
// * example 2: number_format(1234.56, 2, ',', ' ');
// * returns 2: '1 234,56'
// * example 3: number_format(1234.5678, 2, '.', '');
// * returns 3: '1234.57'
// * example 4: number_format(67, 2, ',', '.');
// * returns 4: '67,00'
// * example 5: number_format(1000);
// * returns 5: '1,000'
// * example 6: number_format(67.311, 2);
// * returns 6: '67.31'
// * example 7: number_format(1000.55, 1);
// * returns 7: '1,000.6'
// * example 8: number_format(67000, 5, ',', '.');
// * returns 8: '67.000,00000'
// * example 9: number_format(0.9, 0);
// * returns 9: '1'
// * example 10: number_format('1.20', 2);
// * returns 10: '1.20'
// * example 11: number_format('1.20', 4);
// * returns 11: '1.2000'
// * example 12: number_format('1.2000', 3);
// * returns 12: '1.200'
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
toFixedFix = function (n, prec) {
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
var k = Math.pow(10, prec);
return Math.round(n * k) / k;
},
s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
var exampleNumber = 1;
function test(expected, number, decimals, dec_point, thousands_sep)
{
var actual = number_format(number, decimals, dec_point, thousands_sep);
console.log(
'Test case ' + exampleNumber + ': ' +
'(decimals: ' + (typeof decimals === 'undefined' ? '(default)' : decimals) +
', dec_point: "' + (typeof dec_point === 'undefined' ? '(default)' : dec_point) + '"' +
', thousands_sep: "' + (typeof thousands_sep === 'undefined' ? '(default)' : thousands_sep) + '")'
);
console.log(' => ' + (actual === expected ? 'Passed' : 'FAILED') + ', got "' + actual + '", expected "' + expected + '".');
exampleNumber++;
}
test('1,235', 1234.56);
test('1 234,56', 1234.56, 2, ',', ' ');
test('1234.57', 1234.5678, 2, '.', '');
test('67,00', 67, 2, ',', '.');
test('1,000', 1000);
test('67.31', 67.311, 2);
test('1,000.6', 1000.55, 1);
test('67.000,00000', 67000, 5, ',', '.');
test('1', 0.9, 0);
test('1.20', '1.20', 2);
test('1.2000', '1.20', 4);
test('1.200', '1.2000', 3);Всплывающие подсказки с HTML кодом
Можно использовать неограниченное кол-во подсказок, подсказки хорошо отображаются как в десктопных, так и в мобильных версиях. Написаны на чистом javascript и достаточно быстрые.
Аналоги jQueryфункций FadeIn и FadeIn на javascript
function fadeIn(el) {
let opacity = 0.01,
fadeEl = document.querySelector(el);
if(fadeEl && isHidden(fadeEl)){
fadeEl.style.opacity = opacity;
fadeEl.style.display = "block";
var timer = setInterval(function() {
if(opacity >= 1) {
clearInterval(timer);
}
fadeEl.style.opacity = opacity;
opacity += opacity * 0.1;
}, 10);
}
}
function fadeOut(el) {
let opacity = 1,
fadeOutEl = document.querySelector(el);
if(fadeOutEl){
fadeOutEl.style.display = "block";
var timer = setInterval(function() {
if(opacity <= 0.01) {
clearInterval(timer);
fadeOutEl.style.display = "none";
}
fadeOutEl.style.opacity = opacity;
opacity -= opacity * 0.1;
}, 10);
}
}
function isHidden(el) {
return (el.offsetParent === null)
}remove() на javascript
HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }Javascript scrollToTop function
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 10); // how fast to scroll (this equals roughly 60 fps)
Комментарии