健身计划程序

于 2025-03-24 18:46:31 发布
阅读量75 收藏
点赞数 1
文章标签： javascript css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51712576/article/details/146483280
版权 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能健身助手</title>
    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .card {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
        }

        .progress-bar {
            width: 100%;
            background-color: #eee;
            border-radius: 5px;
            height: 20px;
            margin-bottom: 15px;
        }

        .progress {
            background-color: #4CAF50;
            height: 100%;
            border-radius: 5px;
            width: 0%; /* JavaScript 会更新这个值 */
            transition: width 0.5s ease;
        }

        button {
            background-color: #008CBA;
            color: white;
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #005f6b;
        }

        /* 隐藏卡片 */
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>今日训练</h1>

        <div class="progress-bar">
            <div class="progress" id="progressBar"></div>
        </div>

        <!-- 第一天 -->
        <div id="card1" class="card">
            <h2>Flat Dumbbell Press (Day 1)</h2>
            <p>要求：使用哑铃在平板上进行推胸。1组4-6次，1组8-10次。</p>
            <button disabled>上一步</button>
            <button onclick="nextCard(1)">下一步</button>
        </div>

        <div id="card2" class="card hidden">
            <h2>Dumbbell Romanian Deadlift (Day 1)</h2>
            <p>要求：使用哑铃做罗马尼亚硬拉。2组8-10次。挺胸，收腹，下放的时候感受腿后侧的拉伸。</p>
            <button onclick="previousCard(2)">上一步</button>
            <button onclick="nextCard(2)">下一步</button>
        </div>

        <div id="card3" class="card hidden">
            <h2>2-Grip Lat Pulldown (Day 1)</h2>
            <p>要求：使用高位下拉器， 2组10-12次。分为反握引体和正握引体，下拉时背部发力，沉肩。
            下拉后进行重量衰减增加肱二头肌训练
            </p>
            <button onclick="previousCard(3)">上一步</button>
            <button onclick="nextCard(3)">下一步</button>
        </div>

        <div id="card4" class="card hidden">
            <h2>Dumbbell Step Up (Day 1)</h2>
            <p>要求：使用登高台， 1组 8-10次 (每条腿)。 保持核心稳定，一步一个脚印，控制下落。</p>
            <button onclick="previousCard(4)">上一步</button>
            <button onclick="nextCard(4)">下一步</button>
        </div>

        <div id="card5" class="card hidden">
            <h2>Overhead Cable Tricep Extension (Day 1)</h2>
            <p>要求：进行俯卧撑， 1组 12-15次 (+组间休息)。保持肩部和肘部的稳定，感受三头的发力。完成后进行重量衰减增加训练。</p>
            <button onclick="previousCard(5)">上一步</button>
            <button onclick="nextCard(5)">下一步</button>
        </div>

        <div id="card6" class="card hidden">
            <h2>Machine Lateral Raise (Day 1)</h2>
            <p>要求：进行器械测平举， 1组 12-15次 (+组间休息)。保持身体稳定，发力举起，控制下落。完成后进行重量衰减增加训练。</p>
            <button onclick="previousCard(6)">上一步</button>
            <button onclick="nextCard(6)">下一步</button>
        </div>

        <!-- 第二天 -->
        <div id="card7" class="card hidden">
            <h2>Leg Press Toe-Press (Day 1)</h2>
            <p>要求：在腿举器上进行脚尖举腿，1组 12-15次 (+组间休息)。保持膝盖的稳定，脚尖发力，控制下落。完成后进行重量衰减增加训练。</p>
            <button onclick="previousCard(7)">上一步</button>
            <button onclick="nextCard(7)">下一步</button>
        </div>

        <div id="card8" class="card hidden">
            <h2>Hack Squat (Day 2)</h2>
            <p>要求：进行哈克深蹲，1组4-6次，1组8-10次。挺胸，收腹，背部贴紧靠垫。</p>
            <button onclick="previousCard(8)">上一步</button>
            <button onclick="nextCard(8)">下一步</button>
        </div>

        <div id="card9" class="card hidden">
            <h2>High Incline Smith Press(Day 2)</h2>
            <p>要求：高角度使用史密斯机进行推胸训练，2组10-12次。</p>
            <button onclick="previousCard(9)">上一步</button>
            <button onclick="nextCard(9)">下一步</button>
        </div>

        <div id="card10" class="card hidden">
            <h2>T-Bar Row (Day 2)</h2>
            <p>要求：使用T杠划船器进行划船训练,2组10-12次。</p>
            <button onclick="previousCard(10)">上一步</button>
            <button onclick="nextCard(10)">下一步</button>
        </div>

        <div id="card11" class="card hidden">
            <h2>Seated Leg Curl(Day 2)</h2>
            <p>要求：坐在腿弯举器上进行腿弯举训练，1组 10-12次。</p>
            <button onclick="previousCard(11)">上一步</button>
            <button onclick="nextCard(11)">下一步</button>
        </div>

        <div id="card12" class="card hidden">
            <h2>EZ-Bar Bicep Curl(Day 2)</h2>
            <p>要求：使用曲杆进行肱二头肌弯举训练，1组 10-12次。</p>
            <button onclick="previousCard(12)">上一步</button>
            <button onclick="nextCard(12)">下一步</button>
        </div>

        <div id="card13" class="card hidden">
            <h2>Cable Crunch(Day 2)</h2>
            <p>要求：使用绳索进行腹部训练，1组 10-12次。</p>
            <button onclick="previousCard(13)">上一步</button>
            <p>恭喜你完成了今天的训练！</p>
        </div>
    </div>

    <script>
        let currentCard = 1;
        const totalCards = 13;

        function nextCard(cardId) {
            document.getElementById("card" + cardId).classList.add("hidden");
            currentCard++;
            if (currentCard <= totalCards) {
                document.getElementById("card" + currentCard).classList.remove("hidden");
                // 如果是第一张卡片，禁用 "上一步" 按钮
                if (currentCard === 1) {
                   document.getElementById("card1").querySelector("button:first-child").disabled = true;
                 } else {
                  document.getElementById("card" + currentCard).querySelector("button:first-child").disabled = false;
                }

            }
            updateProgressBar();
        }

        function previousCard(cardId) {
            document.getElementById("card" + cardId).classList.add("hidden");
            currentCard--;

            if (currentCard >= 1) {
                document.getElementById("card" + currentCard).classList.remove("hidden");
               if (currentCard === 1) {
                   document.getElementById("card1").querySelector("button:first-child").disabled = true;
                 } else {
                  document.getElementById("card" + currentCard).querySelector("button:first-child").disabled = false;
                }
            }

            updateProgressBar();
        }

        function updateProgressBar() {
            const progress = (currentCard - 1) / totalCards * 100;
            document.getElementById("progressBar").style.width = progress + "%";
        }
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值