Изменить цвет или размер элемента.
Изменить цвет элемента.
При нажатии клавиши «c» функция выполняет поиск элементов, содержащих тег «h2». Поскольку поиск по имени тега возвращает значение в виде списка, в коде обращаемся к нулевому значению списка. Таким образом, будет изменяться самый верхний элемент с тегом h2 в html файле.
Цвет меняется на случайный из созданного списка colors, куда занесены 7 цветов радуги. Внутри выполняется функция, которая выводит случайное число от 0 до 6. Цвет текста изменяется на это случайный из списка, в зависимости от результата вложенной функции.
JavaScript код:
if (event.key == "c"){
var elemColor = document.getElementsByTagName("h2");
var colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
elemColor[0].style.color = colors[getRandomInt(0, 6)];
Результат выполнения кода представлен на рисунке 5.
Рисунок
5 – Изменение цвета элемента
Изменить размер элемента.
При нажатии клавиши «x» функция выполняет поиск элементов, содержащих тег «p». Поскольку поиск по имени тега возвращает значение в виде списка, в коде обращаемся к нулевому значению списка. Таким образом, будет изменяться самый верхний элемент с тегом p в html файле.
Размер меняется на случайный. Результат зависит от функции внутри, которая выводит случайное число от 5 до 30. Размер текста изменяется на случайный, в зависимости от результата вложенной функции.
JavaScript код:
if (event.key == "x"){
var elemSize = document.getElementsByTagName("p");
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
elemSize[0].style.fontSize = getRandomInt(5, 30) +"px";
}
})
Результат выполнения кода представлен на рисунке 6.
Рисунок
6 – Изменение размера элемента
Код HTML файла:
<!DOCTYPE HTML>
<html>
<head>
<title>Современная элементная база вычислительной техники</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Style_1.css">
</head>
<body>
<h1>Современная элементная база вычислительной техники</h1>
<hr>
<h2 id="elemColor" style="color:blue">Современная классификация ЭВМ</h2>
<p>В настоящее время в мире продолжают работать и производятся миллионы вычислительных машин, относящихся к различным поколениям, типам, классам, отличающихся своими областями применения, техническими характеристиками и вычислительными возможностями. Электронную вычислительную технику подразделяют на аналоговую и цифровую.</p>
<table>
<thead>
<th colspan="2">Электронная вычислительная техника</th>
</thead>
<tbody>
<tr>
<td>Аналоговая (АВМ)</td>
<td>Цифровая (ЭВМ)</td>
</tr>
<tr>
<td>Обработка информации в ЭВМ представляется соответствующими значениями аналоговых величин: тока, напряжения, угла поворота какого-то маханиями и т.п.</td>
<td>Информация в ЭВМ кодируется двоичными кодами чисел</td>
</tr>
<tr>
<td><ul>
<li>Приемлемое быстродействие;</li>
<li>не очень высокая точность вычислений (0.001-0.01);</li>
<li>используются в основном в проектных и научно-исследовательских учреждениях в составе различных стендов по отработке сложных образцов техники;</li>
<li>по своему назначению - специализированные вычислительные машины</li>
</ul></td>
<td><ul>
<li>Высокое быстродействие;</li>
<li>высокая точность вычислений;</li>
<li>применение:
<ul>
<li>для автоматизации вычислений;</li>
<li>использование их в системах управления;</li>
<li>для решения задач искусственного интеллекта</li>
</ul>
</li>
</ul></td>
</tr>
</tbody>
</table>
<p>В настоящее время цифровая электронная вычислительная техника является наиболее широко используемой в профессиональной и повседневной деятельности.</p>
<p>По назначению выделяют следующие виды компьютеров:</p>
<ol>
<li><b>Универсальные</b> – предназначены для решения различных задач, типы которых не оговариваются. Эти ЭВМ характеризуются:
<ul>
<li>разнообразием форм обрабатываемых данных (числовых, символьных и т. д.) при большом диапазоне их изменения и высокой точности представления;</li>
<li>большой емкостью внутренней памяти;</li>
<li>развитой системой организации ввода-вывода информации, обеспечивающей подключение разнообразных устройств ввода-вывода;</li>
</ul>
</li>
<li><b>Проблемно-ориентированные</b> – служат для решения более узкого круга задач, связанных, как правило, с управлением технологическими объектами, регистрацией, накоплением и обработкой небольших объемов данных, выполнением расчетов по несложным правилам. Они обладают ограниченным набором аппаратных и программных средств;</li>
<li><b>Специализированные</b> – применяются для решения очень узкого круга задач. Это позволяет специализировать их структуру, снизить стоимость и сложность при сохранении высокой производительности и надежности. К этому классу ЭВМ относятся компьютеры, управляющие работой устройств ввода-вывода и внешней памятью в современных компьютерах. Такие устройства называются адаптерами, или контроллерами.</li>
</ol>
<div id="elemSize">
<p>Типовая конфигурация ПК типа IBM PC включает (базовый комплект):</p>
<ul>
<li>системный блок;</li>
<li>дисплей;</li>
<li>клавиатуру.</li>
</ul>
</div>
<p>К базовому комплекту обычно добавляют принтер. Возможности базового комплекта расширяются, если в его состав также включить внешние устройства</p>
<p>Примерная логическая схема ПК как совокупность основных составляющих его элементов представлена на рис. 1, а примерная физическая схема ПК – на рис. 2.</p>
<figure class="fig">
<img src="1.png" width="400">
<figcaption>Рисунок 1 - Логическая схема ПК</figcaption>
</figure>
<br>
<figure class="fig">
<img src="2.png" width="500">
<figcaption>Рисунок 2 - Физическая схема ПК</figcaption>
</figure>
<div class="city">
<p>Из какого вы города? </p>
<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
</optgroup>
</select>
</div>
<br>
<footer>
<a class="button" href="Second_page.html">Переход на вторую страницу.</a>
</footer>
<script>
addEventListener("keydown", function (event) {
//1.Вызов всплывающего окна с ФИО и группой автора сайта.
if (event.key == "a"){
alert("Кафка Роман Сергеевич. Z9411")
}
//2.Движение текста
if (event.key == "z"){
var text = document.getElementsByTagName("h1");
// в то время как timePassed идёт от 0 до 2000
// left изменяет значение от 0px до 400px
let start = Date.now(); // сколько времени прошло с начала анимации?
let timer = setInterval(function() {
let timePassed = Date.now() - start;
text[0].style.marginLeft = timePassed / 5 + 'px';
if (timePassed > 2000) clearInterval(timer); // закончить анимацию через 2 секунды
}, 20);
}
//3. Удалить строку таблицы.
if (event.key == "d"){
var table = document.getElementsByTagName("table"); //Получаем форму
// Затем выполните итерацию по количеству строк в таблице для удаления:
for(var i=0; i<table[0].rows.length; i++){
table[0].deleteRow(i);
}
var len = table.rows.length;
for(var i=0; i<len; i++){ t
table[0].deleteRow(0);
}
}
//3. Добавить строку таблицы.
if (event.key == "s"){
var table = document.getElementsByTagName("table"); //Получаем форму
var newRow=document.createElement("tr");
for (var i=0; i<2; i++) {
var newCell=document.createElement("td");
newRow.appendChild(newCell);
}
table[0].appendChild(newRow);
}
//4.Изменить цвет элемента.
if (event.key == "c"){
var elemColor = document.getElementsByTagName("h2");
var colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
elemColor[0].style.color = colors[getRandomInt(0, 6)];
}
//4.Изменить размер элемента.
if (event.key == "x"){
var elemSize = document.getElementsByTagName("p");
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
elemSize[0].style.fontSize = getRandomInt(5, 30) +"px";
}
})
</script>
</body>
</html>