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>

    <input type="number" id="minutesInput" placeholder="分" min="1">

    <div class="timer">
        <svg width="250" height="250">
            <circle class="bg" cx="125" cy="125" r="120"></circle>
            <circle class="progress" cx="125" cy="125" r="120"></circle>
        </svg>
        <div class="time" id="timeDisplay">00:00</div>
    </div>

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

<script>
let totalSeconds = 0;
let remainingSeconds = 0;
let interval = null;
const progressCircle = document.querySelector(".progress");
const circumference = 2 * Math.PI * 120;
progressCircle.style.strokeDasharray = circumference;

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
ライセンス: 未指定 (未指定/貯蔵庫のみ)
タイプ: html
タグ: -
利用バージョン: 3.7.15
作成日時: 2026/02/15 22:28
公開の投稿
⭐ ログインして★を付けよう！
SimpleTimer

SimpleTimer 📖

作品公開情報
