DATAWHALE AI冬令营番茄钟-优快云博客

本文链接：https://blog.youkuaiyun.com/qsk20030208/article/details/144726524

要求：请你基于html、tailwind css和javascript，帮我设计一个“番茄时钟”。要求UI简洁美观大方，同时具有呼吸感，点击开始计时、点击暂停计时和重置计时的功能能够完美实现

AI代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>番茄时钟</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
background-color: #f5f5f5;
}
.timer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.timer h1 {
font-size: 4rem;
margin-bottom: 2rem;
}
.timer button {
font-size: 2rem;
padding: 1rem 2rem;
margin: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
}
.timer button:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="timer">
<h1 id="timer-display">25:00</h1>
<button id="start-btn">开始</button>
<button id="pause-btn">暂停</button>
<button id="reset-btn">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const timerDisplay = document.getElementById('timer-display');
const startBtn = document.getElementById('start-btn');
const pauseBtn = document.getElementById('pause-btn');
const resetBtn = document.getElementById('reset-btn');

let intervalId;
let isPaused = true;
let timeLeft = 1500; // 25 minutes in seconds

function updateTimer() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}