Редирект
Чтобы выполнить переадресацию, можно использовать на странице между тегов head следующий код:
Код: Выделить всё
<meta http-equiv="refresh" content="3; url=http://website.com/page.html">
3 - это количество секунд до переадресации, 0 это мгновенно переадресовать.
или же то же самое, но с использованием JavaScript, но с определённым приколом, например если к вам пришли с определённого сайта:
Код: Выделить всё
if ( (document.referrer == "http://badsite.com/obosrat_site.html")|(document.referrer == "http://badsite2.net/obosrat_site.html") )
{
document.write("Идите на три буквы");
window.location.href = "http://microsoft.com";
}
else
{
window.location.href = "http://mysupersite.com";
}
Этот JS код можно совместить с вараинтом редиректа через метатеги, без опознования откуда пришёл посетитель, используя его между тегами head таким образом:
Код: Выделить всё
<script language="JavaScript" type="text/javascript" src="redirect.js"></script>
<noscript>
<meta http-equiv="refresh" content="3; url=http://website.com/page.html">
</noscript>
В этом случае, если JS отключен или не поддерживается, сработает метатег.
Изменение текущего URL в адресной строке браузера
Этот простой JavaScript-код используется для изменения текущего URL в адресной строке браузера на корневой URL (в данном случае "/").
Код: Выделить всё
<script>
window.history.replaceState({}, null, '/');
</script>
Проще говоря, если у вас адрес sitemane.com и вы добавили этот скрипт в свой index.html перед </head> то при переходе на sitename.com/что-то-там у вас всегда будет показываться адрес sitename.com
Как сделать строку, которая будет показывать на какой странице находится пользователь:
Код: Выделить всё
.blinking-cursor {
font-weight: bold;
font-size: 1em;
color: #ffffff; //цвет курсора
background-color: #693AEA; // цвет заднего фона для курсора
font-family: 'Courier New', Courier, monospace;
animation: blink 1s step-end infinite;
}
@keyframes blink {
from, to {
visibility: hidden;
}
50% {
visibility: visible;
}
}
JS
Код: Выделить всё
<script>
(function() {
function updateCurrentPage() {
var currentPage = window.location.pathname;
var lastSegment = currentPage.substring(currentPage.lastIndexOf('/') + 1);
var lastSegmentWithoutExtension = lastSegment.split('.')[0];
var decodedSegment;
if (window.decodeURIComponent) {
decodedSegment = decodeURIComponent(lastSegmentWithoutExtension);
} else {
decodedSegment = unescape(lastSegmentWithoutExtension);
}
var upperCaseSegment = decodedSegment.toUpperCase();
var formattedSegment = 'C:\\>' + upperCaseSegment;
document.getElementById('current-page').innerHTML = formattedSegment + '<span class="blinking-cursor">_</span>';
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', updateCurrentPage);
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if (document.readyState === 'complete') {
updateCurrentPage();
}
});
} else {
window.onload = updateCurrentPage;
}
})();
</script>
Этот код перед названием страницы отображает C:\> и на странице это будет выглядеть
как C:\\>НАЗВАНИЕ_
HTML
Установка кнопки "вверх"
Добавьте этот JS код перед закрывающим </head>
Код: Выделить всё
<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>
Добавьте этот код перед закрывающим </body>
Код: Выделить всё
<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>
Добавьте блок стилей CSS и кнопку вверх в файл style.css
(имя файла style.css у вас может быть и то, и другое, но это не имеет значения, добавьте
код в любой файл стилей, который подключается к сайту).
Код: Выделить всё
.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://yourpageadress/up.png) no-repeat 50% 11px;border-radius:7px;}
Измените путь к изображению
http://yourpageadress/up.png на ваш.
Перетаскиваемый блок
Для того что бы сделать блок перетаскиваемым на странице, надо добавить следующий код
Добавим стили:
Код: Выделить всё
<style>
.draggable {
width: 200px;
position: absolute;
cursor: move;
padding: 10px;
user-select: none; /* Отключение выделение текста */
border: none; /* Убирание рамки */
background-color: transparent; /* Прозрачный фон */
}
</style>
Вставим js скрипт:
Код: Выделить всё
<script>
document.addEventListener('DOMContentLoaded', () => {
const dragElement = document.getElementById('draggable');
dragElement.addEventListener('mousedown', (e) => {
e.preventDefault(); // Отключаем выделение текста
let shiftX = e.clientX - dragElement.getBoundingClientRect().left;
let shiftY = e.clientY - dragElement.getBoundingClientRect().top;
function moveAt(pageX, pageY) {
dragElement.style.left = pageX - shiftX + 'px';
dragElement.style.top = pageY - shiftY + 'px';
}
function onMouseMove(e) {
moveAt(e.pageX, e.pageY);
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', onMouseMove);
}, { once: true });
});
dragElement.ondragstart = () => false;
});
</script>
И теперь упакуем наш контент в div блок:
Код: Выделить всё
<div id="draggable" class="draggable">
контент
</div>
(by
@Ftod )
Показ случайных изображений на сайте
Вставляем этот js код:
Код: Выделить всё
<script>
document.addEventListener('DOMContentLoaded', function() {
// Генерация случайного числа
var randomNumber = Math.floor(Math.random() * 50) + 1;
// Формирование пути к файлу
var imagePath = 'ВАША ПАПКА/' + randomNumber + '.png';
// Получение элемента img по его id
var imgElement = document.getElementById('randomImage');
// Установка пути к файлу в атрибут src элемента img
imgElement.src = imagePath;
});
</script>
Там где генерация случайного числа, надо поставить число ваших картинок в папке, в моем случае их было 50, вы ставите свое число
В форматировании пути указывайте свою папку, вместо ВАША ПАПКА
Что бы картинки отображались, вставьте этот код:
Код: Выделить всё
<img id="randomImage" src="" width="600" height="200" alt="Случайная фотография">
(by
@Ftod )
Собственные HTML тэги
Если вы видите нестандартные теги в каком-то HTML-документе, это может означать, что они используются для специальных целей разработчиками, которые создавали этот документ.
Этот прием покажет как сделать свои собственные, и зачем.
Способ предполагает, что вы используете нестандартные HTML теги (<m> и </m>), что работает в большинстве современных браузеров, но не является стандартной практикой.
пример скрипта:
CSS
JavaScript
document.addEventListener("DOMContentLoaded", function() {
const mTags = document.querySelectorAll("m");
mTags.forEach(tag => {
tag.classList.add("m");
});
});
HTML
Код: Выделить всё
Пример текста <m>который должен стать курсивным</m> внутри фразы.
Как вы понимаете - в стили можно вставить любое условие, которое вам нравится.
например: сделать градиент цветов для текста, или изменить шрифт, добавить фон картинкой, да что угодно можно сделать
