2.19

HTML

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家庭记账本</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <header>
            <h1>家庭记账本</h1>
            <button onclick="showAddTransactionModal()">添加记录</button>
        </header>
        <main>
            <div id="transaction-list">
                <!-- Transaction items will be dynamically added here -->
            </div>
        </main>
        <footer>
            <p>Total Expenditure: <span id="totalExpenditure">0</span></p>
        </footer>
    </div>

    <!-- Add Transaction Modal -->
    <div id="addTransactionModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddTransactionModal">&times;</span>
            <h2>添加记录</h2>
            <!-- Form for adding a new transaction -->
            <form onsubmit="addTransaction(); return false;">
                <label for="amount">金额:</label>
                <input type="number" id="amount" required>
                
                <label for="category">类别:</label>
                <input type="text" id="category" required>
                
                <button type="submit">添加</button>
            </form>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>
复制代码

 

posted @   席  阅读(3)  评论(0)  编辑  收藏  举报
相关博文：
·  2.27进存销系统2 Controller类
·  10.10
·  2.2记账本开发3
·  记账本jsp
·  2.1记账本开发2
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
点击右上角即可分享
微信分享提示
SQL AI 助手