Урок 5. Примеры на OnClick и ScrollTop. — Блог по программированию

Лампочка

СОБЫТИЯ

OnClick событие, выполнение JavaScript при щелчке по кнопке

КОД

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<h1>ЛАМПОЧКА</h1>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">включить</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">выключить</button>
</body>
</html>

КАРТИНКИ ДЛЯ ПРОГРАММЫ

Кнопка вверх для сайта

Можно сделать плавающую кнопку «наверх» на чистом javascript без использования сторонних библиотек. Отличие в том, что она будет отображаться независимо от того, осуществлялась прокрутка страницы или нет. Скрипт и код копируем в любое место шаблона.

СВОЙСТВА, СОБЫТИЯ и МЕТОДЫ

scrollTop Свойство, возвращает количество пикселей содержимого элемента прокручивает по вертикали.

scrollBy () Метод, прокручивает документ на указанное число пикселей.

setTimeout () Метод, вызывает функцию или вычисляет выражение после определенного количества миллисекунд.

КОД

<script type="text/javascript" >
    var smoothJumpUp = function() {
        if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
            window.scrollBy(0,-50);
            setTimeout(smoothJumpUp, 20);
        }
    }
</script>

<a id="upbutton" href="#" onclick="smoothJumpUp(); return false;">
    <img src="/images/up.png" alt="Top" border="none" title="Наверх">
</a>

ПРИМЕР КАРТИНКИ ДЛЯ ПРОГРАММЫ

Треугольник

МЕТОДЫ и СВОЙСТВА

getTotalLength() Метод, используется для вычисления длины .

strokeDasharray позволяет определить длину оказанной части линии, длина зазора.

StrokeDashoffset позволяет изменять , где точку начала dasharray.

addEventListener () Метод, присоединяет обработчик событий к элементу без перезаписи существующих обработчиков событий.

КОД

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
  height: 3000px;
}

#mySVG {
  position: fixed;
  top: 30%;
  width: 400px;
  height: 210px;
}
</style>
</head>
<body>
<h1>Треугольник</h1>
<p>Прокручивая страницу вниз будет рисоваться треугольник</p>
<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z" />
  Sorry, your browser does not support inline SVG.
</svg>
<script>
// Получить идентификатор элемента <path> и длину <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();
// Начальная позиция чертежа
triangle.style.strokeDasharray = length;
// Скрыть треугольник. Удалите эту строку , чтобы показать треугольник во время прокрутки
triangle.style.strokeDashoffset = length;
// найти процент прокрутки и смещения
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  var draw = length * scrollpercent;
  // Обратный чертеж ( при прокрутке вверх)
  triangle.style.strokeDashoffset = length - draw;
}
</script>
</body>