Как я менял дизайн у странички ‘404 not found’

Views: 2871

Как я менял дизайн у странички ‘404 not found’


Бывает, что на вашем сайте могут быть неправильно указаны адреса. Тогда выскакивает ошибка ‘404 not found’. Эта страничка поясняет о том, что адрес ссылки указан неверно. И я заметил, что у всех этих страничек с ошибкой не очень привлекательный дизайн.


Тогда я подумал — «А что если изменить эту страничку?», и начал искать различные варианты улучшения дизайна.


Для начала нужно было придумать что я там изменю, было всего три варианта:
1. Текст. Можно изменить стиль текста, шрифт, цвет, размер и т.д.
2. Анимация. Можно поставить любое готовое видио, или сделать свою на холсте.
3. Картинка. Можно найти картинку и вставить. А также нарисовать свою на холсте.


Недолго думая, я остановился на втором. Меня заинтересовала анимация как проверка моих знаний HTML5 и просто я решил что это красивее всего.
Итак, я выбрал из трех вариантов второй. Пора приступать к написанию кода!


Код html довольно прост, так как содержит всего два тэга:


Как видно, здесь теги canvas и script.


canvas — тег, предназначенный для рисования.
script — тег в который вставляют код, в данном случае javascript.


Возможно, вы заметили у тега canvas атрибут style. В этот атрибут вставляется css свойства. Я приведу ниже что каждое из них обозначает.


border: dashed; — задает вид рамки
border-color: white; — задает цвет рамки
background-color: black; — задает черный цвет фона


В тэге script есть атрибут type=’text/javascript’. Он определяет тип содержимого.


С html и css кодом разобрались, теперь перейдем к javascript! Я приведу полный код с комментариями внутри:

var canvas = document.getElementById(‘canvas’); // поиск элемента с id ‘canvas’
var ctx = canvas.getContext(«2d»); // получаем контекст рисования
var radius = 2;
var colors = [«red», «yellow», «lime», «blue», «white», «brown», «pink», «fushia»]; // массив с цветами
var Block = function (x, y, direction, color) {
this.x = x;
this.y = y;
this.direction = direction;
this.color = color;
}; // создаем конструктор Block
Block.prototype.drawBlock = function() {
var x = this.x;
var y = this.y;
var color = this.color;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, Math.PI * 2, false);
ctx.fill();
}; // создаем метод drawBlock рисующий точки
Block.prototype.go = function() {
var direction = this.direction;
var vx = Math.cos(direction) * 100;
var vy = Math.sin(direction) * 100;
this.x += vx / 50;
this.y += vy / 50;
}; // создаем метод go для движения точек в любом направлении
var blocks = []; // массив с нашими обЪектами
for (var i = 10; i >= 0; i—) {
blocks[i] = new Block(Math.random() * 480, Math.random() * 480, Math.random() * 5, colors[Math.floor(Math.random() * colors.length)]);
}; // создаем десять точек со случайными x и y координатами, а также со случайным направлением и цветом
setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height)
for (var i = blocks.length — 1; i >= 0; i—) {
blocks[i].drawBlock(); // рисуем точки в координатах объектов
blocks[i].go(); // передвигаем наши объекты, и следовательно точки
if (blocks[i].x < 10) {
blocks[i].x += 10; // отталкиваем объект от стенки
blocks[i].direction = Math.random() * 6; // случайное направление
}; // проверка на столкновение с левой стенкой
if (blocks[i].y < 10) { blocks[i].y += 10; // отталкиваем объект от стенки blocks[i].direction = Math.random() * 6; // случайное направление }; // проверка на столкновение с верхней стенкой if (blocks[i].x > 490) {
blocks[i].x -= 10; // отталкиваем объект от стенки
blocks[i].direction = Math.random() * 6; // случайное направление
}; // проверка на столкновение с правой стенкой
if (blocks[i].y > 490) {
blocks[i].y -= 10; // отталкиваем объект от стенки
blocks[i].direction = Math.random() * 6; // случайное направление
}; // проверка на столкновение с нижней стенкой
};
for (var j = blocks.length — 1; j >= 0; j—) {
for (var i = blocks.length — 1; i >= 0; i—) {
var gx = (blocks[j].x) — (blocks[i].x);
var gy = (blocks[j].y) — (blocks[i].y);
if (Math.sqrt((gx * gx) + (gy * gy)) <= 100) { // находим расстояние при помощи теоремы пифагора ctx.strokeStyle = blocks[j].color; // цвет линий такой же как и у одного обьекта ctx.beginPath(); ctx.moveTo(blocks[j].x, blocks[j].y); ctx.lineTo(blocks[i].x, blocks[i].y); ctx.stroke(); // создаем линию из точки x1 и y1 в точку x2 и y2 }; }; }; }, 1) // функция setInterval выполняет код с интервалом в одну милисекунду setInterval(function () { for (var i = blocks.length — 1; i >= 0; i—) {
blocks[i].direction = Math.random() * 6
}
}, 2000)

А ниже пример:

Ссылка

Вот и все! если что, пишите в комментариях 🙂

Игра «Рисование» на PC и Android

Views: 677
Привет! Я сделал игру на Android. Это моя первая игра, поэтому она такая простая. Надеюсь, вам понравится! Читать далее Игра «Рисование» на PC и Android

Как сделать калькулятор на JavaScript

Views: 2111

Привет! Я написал программу «Калькулятор» и хочу ею поделиться! Также я опишу код.
Читать далее Как сделать калькулятор на JavaScript

Создание раскраски

Views: 959




В этом уроке мы создадим простую раскраску. Читать далее Создание раскраски

Перколяции — доработка. Элементы редактирования.

Перколяции — доработка. Элементы редактирования.

Views: 688

В этой заметке я завершу предыдущую, предложив некоторые дополнения (изменения) кода и пояснения приемов редактирования в MapleЧитать далее Перколяции — доработка. Элементы редактирования.

Моделирование в Maple: просачивание (перколяция)

Перколяции — доработка. Элементы редактирования.

Views: 1046

В этой заметке я приведу пример использования Maple для математического моделирования на примере моделирования задачи двумерного  просачивания. Здесь мы будем использовать только функциональные средства Maple. В задаче описывается физическое явление, но в тоже время ее решение не требует глубоких знаний физики. Сформулируем эту задачу как физическую, например, в следующем виде. Читать далее Моделирование в Maple: просачивание (перколяция)

Начало работы в Maple (продолжение)

Начало работы в Maple (продолжение)

Views: 1342

Продолжим настройку Maple. Ранее мы говорили о том, что двоеточие «:» подавляет вывод результата в Maple. Это удобно, когда вам не нужен промежуточный результат расчета. Однако бывает так, что вы хотите  видеть численное значение, но не все цифры. Скажем, вам достаточно четырех значащих. Такая настройка  выполняется изменением переменной интерфейса командой interface(displayprecision=4); Читать далее Начало работы в Maple (продолжение)

Начало работы в Maple

Начало работы в Maple

Views: 3162

Maple — программный пакет который может быть использован для самых различных целей. Его можно использовать в качестве продвинутого калькулятора, который может не только выполнять арифметические действия, но и брать производные, интегралы, перемножать матрицы и строить графики функций. В тоже время, в эту систему входит современный язык программирования который является процедурным (параллельным), объектно-ориентированнным и прикладным в одном флаконе. Читать далее Начало работы в Maple