<!DOCTYPE html>
<html>
<head>
<title>Цветная страница</title>
<style>
body { transition: background-color 0.5s; }
button { padding: 10px 20px; font-size: 16px; }
</style>
</head>
<body>
<button onclick="changeColor()">Изменить цвет</button>
<script src="script.js"></script>
</body>
</html>
function changeColor() {
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
document.body.style.backgroundColor = randomColor;
}
button {
transition: transform 0.3s;
}
button:hover {
transform: scale(1.1);
}
<p>Счёт: <span id="counter">0</span></p>
<button onclick="incrementCounter()">Клик!</button>
<script>
let count = 0;
function incrementCounter() {
count++;
document.getElementById('counter').innerText = count;
document.body.style.transform = 'scale(1.02)';
setTimeout(() => document.body.style.transform = 'scale(1)', 100);
}
</script>
<h1 onmouseover="this.innerText='Привет!'">Наведи на меня</h1>
HTML: <button onclick="bounceElement(this)">Прыгни!</button>
JavaScript:
function bounceElement(element) {
element.style.transition = 'transform 0.3s cubic-bezier(0.4, -0.5, 0.6, 1.5)';
element.style.transform = 'translateY(-40px)';
setTimeout(() => {
element.style.transform = 'translateY(0)';
}, 300);
}
HTML: <!DOCTYPE html>
<html>
<head>
<title>Квиз</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Какой цвет получается при смешении красного и синего?</p>
<input type="text" id="answer">
<button onclick="checkAnswer()">Проверить</button>
<p id="result"></p>
<script>
function checkAnswer() {
const correct = 'фиолетовый';
const userAnswer = document.getElementById('answer').value.toLowerCase();
const result = document.getElementById('result');
if (userAnswer === correct) {
result.innerText = 'Правильно!';
result.style.color = 'green';
} else {
result.innerText = 'Попробуй ещё раз.';
result.style.color = 'red';
}
}
</script>
</body>
</html>