演示效果

网址

网址:https://jishiqi-evx.pages.dev/

文件内容

index.html
muyu.svg 电子木鱼svg
robot.svg 机器人svg
script.js
style.css

具体代码如下

# 计时器项目文件结构

## index.html
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="robot left-robot">
        <img src="robot.svg" alt="赛博机器人">
    </div>
  
    <div class="robot right-robot">
        <img src="robot.svg" alt="赛博机器人">
    </div>
  
    <div class="timer-container">
        <h1>计时器</h1>
        <div class="display">00:00:00</div>
        <div class="controls">
            <button id="startStop">开始</button>
            <button id="reset">重置</button>
        </div>
    </div>
  
    <div class="countdown-container">
        <h1>倒计时</h1>
        <div class="countdown-display">00:00:00</div>
        <div class="countdown-controls">
            <div class="time-input">
                <input type="number" id="hours" min="0" max="23" placeholder="时">
                <span>:</span>
                <input type="number" id="minutes" min="0" max="59" placeholder="分">
                <span>:</span>
                <input type="number" id="seconds" min="0" max="59" placeholder="秒">
            </div>
            <button id="countdown">开始倒计时</button>
            <button id="resetCountdown">重置</button>
        </div>
    </div>
    <div class="calendar-container">
        <div class="calendar"></div>
    </div>
    <div class="wooden-fish">
        <img src="muyu.svg" alt="电子木鱼">
        <div class="fish-counter">0</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

script.js

let timer;
let countdownTimer;
let isRunning = false;
let isCountdownRunning = false;
let milliseconds = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let countdownHours = 0;
let countdownMinutes = 0;
let countdownSeconds = 0;

// DOM元素获取和事件监听...
// 完整计时器逻辑...
// 倒计时实现...
// 日历更新功能...
// 电子木鱼交互...

// 详细实现代码同用户提供的原始内容

style.css

body {
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    gap: 40px;
    overflow: hidden;
    position: relative;
}

/* 赛博机器人样式 */
.robot {
    position: absolute;
    width: 150px;
    height: 150px;
    animation: float 8s cubic-bezier(0.36,0,0.64,1) infinite;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7));
    z-index: -1;
}

/* 计时器容器样式 */
.timer-container, .countdown-container {
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border-radius: 25px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

/* 按钮特效 */
button {
    background: linear-gradient(145deg, #00b4db, #0083b0);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 180, 219, 0.4);
}

/* 电子木鱼样式 */
.wooden-fish {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 100px;
    height: 100px;
    cursor: pointer;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
    transition: transform 0.3s ease;
}

/* 完整样式规则同用户提供的原始内容 */