LIS PUBLICA | Кот

ne_takoi Опубликовано 2 месяца назад

Кот

    <?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>

<head>

<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="tab active" data-tab="timer">Таймер</div>

<div class="tab" data-tab="stopwatch">Секундомер</div>

<div class="tab" data-tab="stages">Стадии</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>

// Переключение вкладок

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>

Кот

Вход

Регистрация