js费用记录工具特效代码下载


js费用记录工具特效代码下载
js费用记录工具特效代码下载以及费用记录工具等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/index.css">

2. 引入JS

<script src="plugins/message.js"></script>
<script src="js/index.js"></script>

3. HTML代码

    <h2>费用追踪器</h2>
    <div class="container">
        <h4>你的余额:</h4>
        <span id="balance">$0.00</span>
        <div class="inc-cost-container">
            <div class="money plus">
                <h4>收入:</h4>
                <p id="money-plus">$0.00</p>
            </div>
            <div class="money minus">
                <h4>消费:</h4>
                <p id="money-minus">$0.00</p>
            </div>
        </div>
        <h3>历史收入与消费记录:</h3>
        <ul id="list" class="list"></ul>
        <h3>添加新收入或新消费:</h3>
        <form id="form">
            <div class="form-control">
                <label>收入来源或者交易内容</label>
                <input type="text" placeholder="请输入收入来源或者交易内容" id="text">
            </div>
            <div class="form-control">
                <label>金额<br>(负数为消费,正数为收入)</label>
                <input type="number" id="amount" placeholder="请输入金额">
            </div>
            <button class="sureBtn" type="button" id="sureBtn">确定添加</button>
        </form>
    </div>

相关推荐

发表评论

相关文章