<?php
date_default_timezone_set("Europe/Moscow");
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Многофункциональный таймер</title>
<style>
body { font-family: Arial, sans-serif; }
.tabs { display: flex; border-bottom: 2px solid #ccc; }
.tab { padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #eee; margin-right: 2px; }
.tab.active { background: white; font-weight: bold; }
.tab-content { border: 1px solid #ccc; padding: 20px; }
.hidden { display: none; }
#clock { font-size: 24px; font-weight: bold; }
</style>
</head>
<body>
<div class="tabs">
<div class="tab active" data-tab="timer">Таймер</div>
<div class="tab" data-tab="stopwatch">Секундомер</div>
<div class="tab" data-tab="stages">Стадии</div>
<div class="tab" data-tab="clock">Часы</div>
</div>
<div class="tab-content" id="timer">Здесь будет таймер</div>
<div class="tab-content hidden" id="stopwatch">Здесь будет секундомер</div>
<div class="tab-content hidden" id="stages">Здесь будут стадии</div>
<div class="tab-content hidden" id="clock">
<div id="clock"></div>
</div>
<script>
// Переключение вкладок
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
tab.classList.add('active');
document.getElementById(tab.dataset.tab).classList.remove('hidden');
});
});
// Часы с миллисекундами
function updateClock() {
let now = new Date();
let date = now.toLocaleDateString('ru-RU');
let time = now.toLocaleTimeString('ru-RU') + '.' + now.getMilliseconds().toString().padStart(3, '0');
document.getElementById('clock').textContent = date + ' ' + time;
}
setInterval(updateClock, 50);
updateClock();
</script>
</body>
</html>
<?php
date_default_timezone_set("Europe/Moscow");
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Многофункциональный таймер</title>
<style>
body { font-family: Arial, sans-serif; }
.tabs { display: flex; border-bottom: 2px solid #ccc; }
.tab { padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #eee; margin-right: 2px; }
.tab.active { background: white; font-weight: bold; }
.tab-content { border: 1px solid #ccc; padding: 20px; }
.hidden { display: none; }
#clock { font-size: 24px; font-weight: bold; }
</style>
</head>
<body>
<div class="tabs">
<div class="tab active" data-tab="timer">Таймер</div>
<div class="tab" data-tab="stopwatch">Секундомер</div>
<div class="tab" data-tab="stages">Стадии</div>
<div class="tab" data-tab="clock">Часы</div>
</div>
<div class="tab-content" id="timer">Здесь будет таймер</div>
<div class="tab-content hidden" id="stopwatch">Здесь будет секундомер</div>
<div class="tab-content hidden" id="stages">Здесь будут стадии</div>
<div class="tab-content hidden" id="clock">
<div id="clock"></div>
</div>
<script>
// Переключение вкладок
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
tab.classList.add('active');
document.getElementById(tab.dataset.tab).classList.remove('hidden');
});
});
// Часы с миллисекундами
function updateClock() {
let now = new Date();
let date = now.toLocaleDateString('ru-RU');
let time = now.toLocaleTimeString('ru-RU') + '.' + now.getMilliseconds().toString().padStart(3, '0');
document.getElementById('clock').textContent = date + ' ' + time;
}
setInterval(updateClock, 50);
updateClock();
</script>
</body>
</html>
