当前位置：首页 > article >正文

Datawhale-AI活动2024.12.24

article 2024/12/26 0:18:31

一、番茄时钟

在这里插入图片描述

（1）输入Prompt

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

（2）创建 HTML 文件

这个HTML页面是一个简单的番茄时钟界面，包含：
一个标题：番茄钟。
一个显示计时器倒计时的区域（id=“timer”）。
三个按钮：开始、暂停和重置。
通过TailwindCSS进行布局和样式的设计，并使用外部JavaScript文件(script.js)来处理逻辑。

<!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">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <div class="bg-white p-8 roundedshadow-md w-96">
        <h1 class="text-6xl font-bold text-gray-800">番茄钟</h1>
    
    <div class="flex flex-col mt-4">
        <div id="timer" class="text-6xl font-bold text-gray-800"></div>
    </div>
    <div class="flex mt-4">
        <button id="start" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded mr-2">开始</button>
        <button id="pause" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mr-2">暂停</button>
        <button id="reset" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">重置</button>
    </div>
    <script src="script.js"></script>
  </div>
</body>
</html>

解析1：HTML结构

<!DOCTYPE html>定义了文档类型，表示这是一个HTML5文档。
<html lang="en"> 指定文档语言为英语，方便搜索引擎和浏览器理解。
<head>
    <meta charset="UTF-8">定义文档字符集为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">引入了TailwindCSS框架，它是一个功能强大的CSS框架，简化了HTML中的样式编写。
    <script src="https://cdn.tailwindcss.com"></script>引入TailwindCSS的JavaScript支持库。
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
bg-gray-100：设置背景颜色为浅灰色（TailwindCSS类）。
flex：使用Flexbox布局，使子元素在页面中居中对齐。
items-center：垂直居中子元素。
justify-center：水平居中子元素。
h-screen：设置页面高度为100vh（视口高度），即使页面充满屏幕。

解析2：计时器内容

<div class="bg-white p-8 roundedshadow-md w-96">
	bg-white：设置背景为白色。
	p-8：设置内边距为2rem，使内部内容距离边缘有一定的间距。
	rounded shadow-md：为该元素添加圆角和阴影，使其看起来更美观
	w-96：设置宽度为24rem（96的单位是rem，TailwindCSS默认配置中的24rem）。
    <h1 class="text-6xl font-bold text-gray-800">番茄钟</h1>
    bg-white：设置背景为白色。
	p-8：设置内边距为2rem，使内部内容距离边缘有一定的间距。
	rounded shadow-md：为该元素添加圆角和阴影，使其看起来更美观
	w-96：设置宽度为24rem（96的单位是rem，TailwindCSS默认配置中的24rem）。
    <div class="flex flex-col mt-4">
    flex flex-col：使用Flexbox布局，将子元素垂直排列。
	mt-4：设置顶部外边距为1rem，让计时器与标题之间有一定间距。
        <div id="timer" class="text-6xl font-bold text-gray-800"></div>
        text-6xl：设置字体大小为6xl（约为4rem），使计时器的数字更大。
		font-bold：加粗文本。
		text-gray-800：设置文本颜色为深灰色。
    </div>

解析3：按钮区域

<div class="flex mt-4">
flex mt-4：使用Flexbox布局，并设置顶部外边距为1rem，使按钮区域与计时器区域之间有间隔。
	<button id="start" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded mr-2">开始</button>
	<button id="pause" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mr-2">暂停</button>
	<button id="reset" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">重置</button>
	每个按钮 (<button>) 的样式：
	bg-green-500、bg-yellow-500、bg-red-500：分别设置按钮的背景色为绿色、黄色、红色。
	hover:bg-green-600、hover:bg-yellow-600、hover:bg-red-600：设置当鼠标悬停时按钮背景色变为深绿色、深黄色、深红色。
	text-white：设置按钮文字为白色。
	font-bold：加粗按钮文字。
	py-2 px-4：设置按钮的内边距，py-2表示上下内边距为0.5rem，px-4表示左右内边距为1rem。
	rounded：为按钮添加圆角效果。
	mr-2：为每个按钮添加右边距，使它们之间有间隔。
</div>

解析4：脚本引用

<script src="script.js"></script>
script.js：外部JavaScript文件，负责处理番茄时钟的逻辑，包括开始、暂停、重置等功能。你需要实现该文件中的JavaScript代码来控制计时器和按钮的交互。

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

const timerElement = document.getElementById('timer');
const startBtn = document.getElementById('start-btn');
const pauseBtn = document.getElementById('pause-btn');
const resetBtn = document.getElementById('reset-btn');

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

function startTimer() {
    if (isPaused) {
        isPaused = false;
        timerInterval = setInterval(() => {
            if (timeLeft > 0) {
                timeLeft--;
                updateTimer();
            } else {
                clearInterval(timerInterval);
                isPaused = true;
                alert('时间到！');
            }
        }, 1000);
        startBtn.textContent = '继续';
        pauseBtn.textContent = '暂停';
    } else {
        clearInterval(timerInterval);
        isPaused = true;
        startBtn.textContent = '开始';
        pauseBtn.textContent = '暂停';
    }
}

function pauseTimer() {
    if (!isPaused) {
        clearInterval(timerInterval);
        isPaused = true;
        startBtn.textContent = '继续';
        pauseBtn.textContent = '暂停';
    }
}

function resetTimer() {
    clearInterval(timerInterval);
    isPaused = true;
    timeLeft = 1500;
    updateTimer();
    startBtn.textContent = '开始';
    pauseBtn.textContent = '暂停';
}

startBtn.addEventListener('click', startTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);

updateTimer();