[編集モード] SimpleTimer

シンプルなオシャレタイマー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Stylish Timer</title>
<style>
    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        color: white;
    }

.container {
        text-align: center;
        width: 90%;
        max-width: 350px;
    }

.timer {
        position: relative;
        width: 250px;
        height: 250px;
        margin: 20px auto;
    }

svg {
        transform: rotate(-90deg);
    }

circle {
        fill: none;
        stroke-width: 10;
        stroke-linecap: round;
    }

.bg {
        stroke: rgba(255,255,255,0.2);
    }

.progress {
        stroke: white;
        stroke-dasharray: 754;
        stroke-dashoffset: 754;
        transition: stroke-dashoffset 1s linear;
    }

.time {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2.5rem;
        font-weight: bold;
    }

input {
        width: 80px;
        padding: 8px;
        font-size: 1rem;
        border-radius: 10px;
        border: none;
        text-align: center;
        margin-bottom: 15px;
    }

.buttons button {
        padding: 10px 20px;
        margin: 5px;
        border-radius: 20px;
        border: none;
        font-size: 1rem;
        cursor: pointer;
        background: white;
        color: #764ba2;
        font-weight: bold;
        transition: 0.2s;
    }

.buttons button:active {
        transform: scale(0.95);
    }
</style>
</head>
<body>

<div class="container">
    <h2>Timer</h2>

<div class="buttons">
        <button onclick="startTimer()">Start</button>
        <button onclick="stopTimer()">Stop</button>
        <button onclick="resetTimer()">Reset</button>
    </div>
</div>

function updateDisplay() {
    const minutes = Math.floor(remainingSeconds / 60);
    const seconds = remainingSeconds % 60;
    document.getElementById("timeDisplay").textContent =
        String(minutes).padStart(2, '0') + ":" +
        String(seconds).padStart(2, '0');

const progress = remainingSeconds / totalSeconds;
    progressCircle.style.strokeDashoffset = circumference * (1 - progress);
}

function startTimer() {
    if (interval) return;

if (remainingSeconds === 0) {
        const minutes = parseInt(document.getElementById("minutesInput").value);
        if (!minutes || minutes <= 0) return;
        totalSeconds = minutes * 60;
        remainingSeconds = totalSeconds;
    }

interval = setInterval(() => {
        if (remainingSeconds > 0) {
            remainingSeconds--;
            updateDisplay();
        } else {
            clearInterval(interval);
            interval = null;
            alert("タイマー終了！");
        }
    }, 1000);

updateDisplay();
}

function stopTimer() {
    clearInterval(interval);
    interval = null;
}

function resetTimer() {
    clearInterval(interval);
    interval = null;
    remainingSeconds = 0;
    totalSeconds = 0;
    progressCircle.style.strokeDashoffset = circumference;
    document.getElementById("timeDisplay").textContent = "00:00";
}
</script>

</body>
</html>

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] SimpleTimer

素材のアップロード