Category Archives: Web

js перемешать div

Имеется такая структура

<div class="myItems">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
</div>

</div>

Нужно сделать

<div class="myItems">
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">1</div>
</div>

</div>

Для этого используем функцию

function reorder() {
           var grp = $(".myItems").children();
           var cnt = grp.length;

           var temp,x;
           for (var i = 0; i < cnt; i++) {
               temp = grp[i];
             x = Math.floor(Math.random() * cnt);
             grp[i] = grp[x];
             grp[x] = temp;
         }
         $(grp).remove();
         $(".myItems").append($(grp));
       }

function reorder() {

var grp = $(".myItems").children();

var cnt = grp.length;

var temp,x;

for (var i = 0; i < cnt; i++) {

temp = grp[i];

x = Math.floor(Math.random() * cnt);

grp[i] = grp[x];

grp[x] = temp;

}

$(grp).remove();

$(".myItems").append($(grp));

}

Не забываем про вызов функции Используем jQuery Полезная информация Перемешивание DOM-элементов в jQuery stackoverflow

Округление чисел php

floor — округление в меньшую сторону

<?php
echo floor(4.3);   // 4
echo floor(9.999); // 9
echo floor(5.0); // 5
?>

<?php

echo floor(4.3); // 4

echo floor(9.999); // 9

echo floor(5.0); // 5

ceil — округление в большую сторону

<?php
echo ceil(4.3);    // 5
echo ceil(9.999);  // 10
echo ceil(3.0);    // 3
?>

<?php

echo ceil(4.3); // 5

echo ceil(9.999); // 10

echo ceil(3.0); // 3

round — округление

<?php
echo round(3.4);         // 3
echo round(3.5);         // 4
echo round(3.6);         // 4
echo round(3.6, 0);      // 4
echo round(1.95583, 2);  // 1.96
echo round(1241757, -3); // 1242000
echo round(5.045, 2);    // 5.05
echo round(5.055, 2);    // 5.06
?>

<?php

echo round(3.4); // 3

echo round(3.5); // 4

echo round(3.6); // 4

echo round(3.6, 0); // 4

echo round(1.95583, 2); // 1.96

echo round(1241757, -3); // 1242000

echo round(5.045, 2); // 5.05

echo round(5.055, 2); // 5.06

Добавление класса js по содержимому

$('.article__button.button.button--basket span:contains("Товар в корзине")').each(function(){
  $(this).parent('div').addClass("item_in_basket");
});

$('.article__button.button.button--basket span:contains("Товар в корзине")').each(function(){

$(this).parent('div').addClass("item_in_basket");

});

Пример:

<div class="article__button button button--basket">
<span>Товар в корзине</span></div>

1 2	<div class="article__button button button--basket"> <span>Товар в корзине</span></div>

Кнопка наверх jQuery

Не забываем подключить jQuery js (перед </head>)

<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>

$(function() {

$(window).scroll(function() {

if($(this).scrollTop() != 0) {

$('#toTop').fadeIn();

} else {

$('#toTop').fadeOut();

}

});

$('#toTop').click(function() {

$('body,html').animate({scrollTop:0},800);

});

</script>

css

<style> 
#toTop {
        width:100px;
        border:1px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}
</style>

<style>

#toTop {

width:100px;

border:1px solid #ccc;

background:#f7f7f7;

text-align:center;

padding:5px;

position:fixed; /* this is the magic */

bottom:10px; /* together with this to put the div at the bottom*/

right:10px;

cursor:pointer;

display:none;

color:#333;

font-family:verdana;

font-size:11px;

}

</style>

html Перед </body>

<div id="toTop">^ Back to Top</div>

1	<div id="toTop">^ Back to Top</div>

Еще больше примеров тут.

Маска телефона JS

Подключаем библиотеку jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

С официального сайта скачиваем maskedinput.js В итоге получаем маску телефона на input

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.js"></script>
<script type="text/javascript">
jQuery(function($){
   $("input[name=telefon]").mask("+7 (999) 999-9999");
});
</script>

jQuery(function($){

$("input[name=telefon]").mask("+7 (999) 999-9999");

});

</script>

Если необходимо, можно использовать аргумент (для отключения чистки при частично заполненном номере)

<span class="pun">{</span><span class="pln">autoclear</span><span class="pun">:</span> <span class="kwd">false</span><span class="pun">}</span>

1	<span class="pun">{</span><span class="pln">autoclear</span><span class="pun">:</span> <span class="kwd">false</span><span class="pun">}</span>

Например:

$(control).mask('999-999-9999', {autoclear: false});

1	$(control).mask('999-999-9999', {autoclear: false});

Отправка формы обратной связи средствами AJAX

Для отправки формы обратной связи без перезагрузки страницы, сделаем следующее: Создадим 2 файла: index.php, mail.php. index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<style>
	.top_form_ok,.top_form_error {
		display: none;
	}
</style>
</head>
<body>
<?
echo time();
?>
<hr>
<div class="top_form">
	<form method="POST">
		Введите имя: <input name="name"><br/>
		Введите телефон: <input name="tel"><br/>
		Ваше сообщение: <textarea name="text"></textarea><br/>
		<input type="submit">
	</form>
</div>
<div class="top_form_ok">Успешно отправлено</div>
<div class="top_form_error">Что-то пошло не так</div>

<script>
	$(".top_form").submit(function() { // С каким объектом взаимодействует аякс

		var name = $('.top_form input[name="name"]').val(); 
		var tel = $('.top_form input[name="tel"]').val();
		var text = $('.top_form textarea[name="text"]').val();
																// создаем переменные из полей формы

		var str = {

			'name' : name,
			'tel': tel,
			'text': text
		}														// собираем их в масив	


		$.ajax({
			type: "POST",											// тип отправки данных
			url: "mail.php",  // путь до пхп файла отправки письма
			data: str,												// какие данные отправляем
			success: function(msg) {                              // получаем ответ сервера

				if(msg) {                //если ответ равен  ... то
					$('.top_form_error').css('display','block');
				} else {
					$('.top_form_ok').css('display','block');
					$('.top_form').css('display','none');
				}
			}
		});

		return false;
	});

</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.top_form_ok,.top_form_error {

display: none;

}

</style>

</head>

<body>

echo time();

<hr>

Введите имя: <input name="name"><br/>

Введите телефон: <input name="tel"><br/>

Ваше сообщение: <textarea name="text"></textarea><br/>

</form>

</div>

<div class="top_form_ok">Успешно отправлено</div>

<div class="top_form_error">Что-то пошло не так</div>

$(".top_form").submit(function() { // С каким объектом взаимодействует аякс

var name = $('.top_form input[name="name"]').val();

var tel = $('.top_form input[name="tel"]').val();

var text = $('.top_form textarea[name="text"]').val();

// создаем переменные из полей формы

var str = {

'name' : name,

'tel': tel,

'text': text

} // собираем их в масив

$.ajax({

type: "POST", // тип отправки данных

url: "mail.php", // путь до пхп файла отправки письма

data: str, // какие данные отправляем

success: function(msg) { // получаем ответ сервера

if(msg) { //если ответ равен ... то

$('.top_form_error').css('display','block');

} else {

$('.top_form_ok').css('display','block');

$('.top_form').css('display','none');

}

});

return false;

});

</script>

</body>

</html>

mail.php

<?php
function mailSend () {
	$name 		 = $_POST['name'];
	$tel 		 = $_POST['tel'];
	$text 		 = $_POST['text'];

	$site 		 = $_SERVER['HTTP_HOST'];

	$to 		 = "prog@site.ru";// от кого
	$from 		 = "admin@site.ru";// кому

	$subject	 = "Новое письмо с сайта {$site}";

	$message 	 = "<h1>Вам сообщение с сайта {$site}</h1>";
	$message 	.= "Имя: {$name}<br/>";
	$message 	.= "Телефон: {$tel}<br/>";
	$message 	.= "<hr>";
	$message 	.= $text;

	$header  	 = 'MIME-Version: 1.0' . "\r\n";
	$header 	.= "From: {$from}\r\n";
	$header 	.= "Content-type: text/html; charset=utf-8\r\n"; 
	$header 	.= "X-Mailer: PHP mail script";

	mail($to, $subject, $message, $header);
}

mailSend();
?>

<?php

function mailSend () {

$name = $_POST['name'];

$tel = $_POST['tel'];

$text = $_POST['text'];

$site = $_SERVER['HTTP_HOST'];

$to = "prog@site.ru";// от кого

$from = "admin@site.ru";// кому

$subject = "Новое письмо с сайта {$site}";

$message = "<h1>Вам сообщение с сайта {$site}</h1>";

$message .= "Имя: {$name}<br/>";

$message .= "Телефон: {$tel}<br/>";

$message .= "<hr>";

$message .= $text;

$header = 'MIME-Version: 1.0' . "\r\n";

$header .= "From: {$from}\r\n";

$header .= "Content-type: text/html; charset=utf-8\r\n";

$header .= "X-Mailer: PHP mail script";

mail($to, $subject, $message, $header);

}

mailSend();

Курс валют cbr

Получаем курс валют с cbr.ru , скачиваем в корень, и вытаскиваем значения текущего курса.

<?php

class Rates {

    public function getXmlRates () // Получаем котировки
    {

        $dateNow = date("d-m-Y");

        if (file_exists("XML_daily_last.asp")) {

            $dateCreateFile = date("d-m-Y" , filemtime('XML_daily.asp'));

        } else {

            $dateCreateFile = date("d-m-Y", time()-86400);

        }

        if ($dateNow != $dateCreateFile) {

            $url = "http://www.cbr.ru/scripts/XML_daily.asp";

            exec("wget -O XML_daily.asp {$url}"); // получаем курс на сегодня
            exec("wget -O XML_daily_last.asp {$url}?date_req=".date("d/m/Y", time() - 86400)); // получаем курс за вчера

        } 
    }

    public function __construct() 
    {
        $this->getXmlRates();
    }

    public function getRates ($type, $last = 0) // Получаем курс
    {   

        $type = strtoupper($type);

        $xml = simplexml_load_file('XML_daily.asp');
        $xml_last = simplexml_load_file('XML_daily_last.asp');
        
        foreach ($xml as $key => $value) {

            if($value->CharCode == $type){

                $res = $value->Value;

            }

        }

        foreach ($xml_last as $key => $value) {

            if($value->CharCode == $type){

                $resLast = $value->Value;
                
            }

        }

        if ($last == 0) {

            return str_replace(",", ".", $res);

        } elseif ($last == 1) {

            return str_replace(",", ".", $resLast);

        }
    }

    public function changeRates ($type) // Сравнение курса, сегодня/вчера
    {

        $type = strtoupper($type);

            if ($this->getRates($type) > $this->getRates($type, 1)) {

                return 1;

            } elseif (($this->getRates($type)) < ($this->getRates($type, 1))) {

                return -1;

            } elseif ($this->getRates($type) == $this->getRates($type, 1)) {

                return 0;

            }
    }
}

$out = new Rates;

echo "Текущий курс EUR: {$out->getRates("EUR")} | Курс вчера: {$out->getRates("EUR",1)}<br />Текущий курс USD {$out->getRates("USD")}";

?>

<?php

class Rates {

public function getXmlRates () // Получаем котировки

{

$dateNow = date("d-m-Y");

if (file_exists("XML_daily_last.asp")) {

$dateCreateFile = date("d-m-Y" , filemtime('XML_daily.asp'));

} else {

$dateCreateFile = date("d-m-Y", time()-86400);

}

if ($dateNow != $dateCreateFile) {

$url = "http://www.cbr.ru/scripts/XML_daily.asp";

exec("wget -O XML_daily.asp {$url}"); // получаем курс на сегодня

exec("wget -O XML_daily_last.asp {$url}?date_req=".date("d/m/Y", time() - 86400)); // получаем курс за вчера

}

public function __construct()

{

$this->getXmlRates();

}

public function getRates ($type, $last = 0) // Получаем курс

{

$type = strtoupper($type);

$xml = simplexml_load_file('XML_daily.asp');

$xml_last = simplexml_load_file('XML_daily_last.asp');

foreach ($xml as $key => $value) {

if($value->CharCode == $type){

$res = $value->Value;

}

foreach ($xml_last as $key => $value) {

if($value->CharCode == $type){

$resLast = $value->Value;

}

if ($last == 0) {

return str_replace(",", ".", $res);

} elseif ($last == 1) {

return str_replace(",", ".", $resLast);

}

public function changeRates ($type) // Сравнение курса, сегодня/вчера

{

$type = strtoupper($type);

if ($this->getRates($type) > $this->getRates($type, 1)) {

return 1;

} elseif (($this->getRates($type)) < ($this->getRates($type, 1))) {

return -1;

} elseif ($this->getRates($type) == $this->getRates($type, 1)) {

return 0;

}

$out = new Rates;

echo "Текущий курс EUR: {$out->getRates("EUR")} | Курс вчера: {$out->getRates("EUR",1)}<br />Текущий курс USD {$out->getRates("USD")}";

Ещё вариант , напрямую с сервера cbr

<?php

class Rates {

    function rateOut ($value) { // Определяем Валюту

        $value = strtoupper($value);

        if ($value == "USD") {

            $val = 1;

        } elseif ($value == "EUR") {

            $val = 5;

        }

        return $this->getRates($val);
    }

    function getRates ($value) { // Получаем значение валюты

        return simplexml_load_file("https://wm.exchanger.ru/asp/XMLWMList.asp?exchtype=$value")->BankRate;

    }

}

$obj = new Rates;
echo $obj->rateOut("usd");

?>

<?php

class Rates {

function rateOut ($value) { // Определяем Валюту

$value = strtoupper($value);

if ($value == "USD") {

$val = 1;

} elseif ($value == "EUR") {

$val = 5;

}

return $this->getRates($val);

}

function getRates ($value) { // Получаем значение валюты

return simplexml_load_file("https://wm.exchanger.ru/asp/XMLWMList.asp?exchtype=$value")->BankRate;

}

$obj = new Rates;

echo $obj->rateOut("usd");

Если на сервере запрещен вызов функции exec, стоит воспользоваться командой file_get_contents($url); и записать результат с помощью fwrite(); Например:

<?php
$getRates = file_get_contents("http://www.cbr.ru/scripts/XML_daily.asp");
$file = fopen("XML_daily.asp", "w+");
fwrite($file, $getRates);
fclose($file);
?>

<?php

$getRates = file_get_contents("http://www.cbr.ru/scripts/XML_daily.asp");

$file = fopen("XML_daily.asp", "w+");

fwrite($file, $getRates);

fclose($file);

Иногда стоит использовать абсолютный путь к файлу

$ROOT_DIR = $_SERVER['DOCUMENT_ROOT'];
$xml = simplexml_load_file("$ROOT_DIR/XML_daily.asp");

1 2	$ROOT_DIR = $_SERVER['DOCUMENT_ROOT']; $xml = simplexml_load_file("$ROOT_DIR/XML_daily.asp");

Вариант загрузки котировок без exec… Read More »

Регулярные выражения

Удаляем текст вместе с тегами

<?php
function replaceText ($text) { // вырезаем теги

    $pattern = array ( // массив исключений, что вырезаем

        "|<h2>(.*)</h2>|Uis", 
        "/<img .*?>/is", 
        "|<h1>(.*)</h1>|Uis"

    );

    return preg_replace($pattern, NULL, $text); // выводим обработанный текст
}

$text = "<h1>Заголовок</h1> просто текст <h2>Подзаголовок</h2> контент";
echo replaceText($text);
?>

<?php

function replaceText ($text) { // вырезаем теги

$pattern = array ( // массив исключений, что вырезаем

"|<h2>(.*)</h2>|Uis",

"/<img .*?>/is",

"|<h1>(.*)</h1>|Uis"

);

return preg_replace($pattern, NULL, $text); // выводим обработанный текст

}

$text = "<h1>Заголовок</h1> просто текст <h2>Подзаголовок</h2> контент";

echo replaceText($text);

Получаем расширение файла

echo preg_replace("/.*?\./", '', 'photo.jpg'); // результат: jpg

1	echo preg_replace("/.*?\./", '', 'photo.jpg'); // результат: jpg

Взять то, что находится между тегами <title> и </title>

$str = "<title>Тут заголовок</title>Текст";

preg_match('|<title[^>]*?>(.*?)</title>|sei', $str, $arr);

echo $arr[1];

$str = "<title>Тут заголовок</title>Текст";

preg_match('|<title[^>]*?>(.*?)</title>|sei', $str, $arr);

echo $arr[1];

Проверка на число

$var = 5;
if(preg_match('/^\d+$/', $var)) echo $var;

1 2	$var = 5; if(preg_match('/^\d+$/', $var)) echo $var;

Добавить <br> в начало всех строк

$string = preg_replace("/^/", "<br>", $string);

1	$string = preg_replace("/^/", "<br>", $string);

Добавить <br> в конец всех строк

$string = preg_replace("/$/", "<br>", $string);

1	$string = preg_replace("/$/", "<br>", $string);

Удалить атрибуты у всех тегов кроме, a, p, img

preg_replace("/<([^ap(img)].*?)\s.*?>/is", "<\\1>", $string);

1	preg_replace("/<([^ap(img)].?)\s.?>/is", "<\\1>", $string);

DOM Получаем значение атрибута

<?php
$file_OLD = "<a href=\"/catalog/1.zip\">Программа</a>";
$dom = new DOMDocument;
$dom->loadHTML($file_OLD);

foreach ($dom->getElementsByTagName('a') as $node) {
    $file_link = $node->getAttribute( 'href' );
    echo "<a href=\"{$file_link}\">Скачать</a>";
}

?>

<?php

$file_OLD = "<a href=\"/catalog/1.zip\">Программа</a>";

$dom = new DOMDocument;

$dom->loadHTML($file_OLD);

foreach ($dom->getElementsByTagName('a') as $node) {

$file_link = $node->getAttribute( 'href' );

echo "<a href=\"{$file_link}\">Скачать</a>";

}

Получить Цифры… Read More »