开始模拟盘交易(逐仓)

作者： 作者的头像   迷弟 ,  2024-07-04 20:03:43 ,  所有人可见 ,  阅读 16

0


  1. 本篇为B市

判断3100-3200之间
10 ETC 做多
10 ETC 做空

56000-58000
1 BTC 做多

1 BTC 做空

交易所.png

稍后做个交易所
以及行情展示。
自己模拟一个市场出来。含合约
前端 80%
1. main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trade Exchange</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <nav>
            <button class="active">Spot</button>
            <button>Futures</button>
        </nav>

        <div id="spot-page">
            <div class="left-section">
                <div class="buy-sell-toggle">
                    <button id="buy-button" class="active">Buy</button>
                    <button id="sell-button">Sell</button>
                </div>

                <div class="order-type">
                    <select id="order-type-select">
                        <option value="limit">Limit Order</option>
                        <option value="market">Market Order</option>
                    </select>
                </div>

                <div class="price-input">
                    <input type="number" id="price-input" placeholder="Enter price">
                </div>

                <div class="amount-input">
                    <input type="number" id="amount-input" placeholder="Enter amount (USDT)">
                </div>

                <button id="action-button" class="buy">Buy BTC</button>
            </div>

            <div class="right-section">
                <table id="order-book">
                    <thead>
                        <tr>
                            <th>Price (USDT)</th>
                            <th>Quantity (BTC)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Order book data will be inserted here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>
  1. style.css
/* Add your styles here */
.buy-sell-toggle button.active {
    background-color: green;
    color: white;
}

.buy-sell-toggle button.active.sell {
    background-color: red;
}

#action-button.buy {
    background-color: green;
    color: white;
}

#action-button.sell {
    background-color: red;
    color: white;
}

.order-book-row.buy {
    color: green;
}

.order-book-row.sell {
    color: red;
}
  1. app.js
// DOM elements
const buyButton = document.getElementById('buy-button');
const sellButton = document.getElementById('sell-button');
const orderTypeSelect = document.getElementById('order-type-select');
const priceInput = document.getElementById('price-input');
const amountInput = document.getElementById('amount-input');
const actionButton = document.getElementById('action-button');
const orderBook = document.getElementById('order-book').getElementsByTagName('tbody')[0];

// State
let isBuyMode = true;
let isLimitOrder = true;

// Event listeners
buyButton.addEventListener('click', () => setMode('buy'));
sellButton.addEventListener('click', () => setMode('sell'));
orderTypeSelect.addEventListener('change', handleOrderTypeChange);
actionButton.addEventListener('click', handleAction);

function setMode(mode) {
    isBuyMode = mode === 'buy';
    buyButton.classList.toggle('active', isBuyMode);
    sellButton.classList.toggle('active', !isBuyMode);
    actionButton.textContent = isBuyMode ? 'Buy BTC' : 'Sell BTC';
    actionButton.classList.toggle('buy', isBuyMode);
    actionButton.classList.toggle('sell', !isBuyMode);
}

function handleOrderTypeChange() {
    isLimitOrder = orderTypeSelect.value === 'limit';
    priceInput.disabled = !isLimitOrder;
    priceInput.value = isLimitOrder ? '' : 'Best market price';
}

function handleAction() {
    const price = isLimitOrder ? priceInput.value : 'market';
    const amount = amountInput.value;
    const action = isBuyMode ? 'buy' : 'sell';

    // Send data to API endpoint
    sendOrderToAPI(action, price, amount);
}

function sendOrderToAPI(action, price, amount) {
    // Implement API call here 这里要做下json打包，发送给后端接口
    console.log(`Sending ${action} order: Price: ${price}, Amount: ${amount}`);
}

function updateOrderBook(data) {
    orderBook.innerHTML = '';
    data.forEach(order => {
        const row = orderBook.insertRow();
        row.classList.add('order-book-row', order.type);
        row.insertCell(0).textContent = order.price;
        row.insertCell(1).textContent = order.quantity;
    });
    //这里要做下数据更新，实时从后端获取数据
}

// Simulating real-time updates
setInterval(() => {
    const mockData = [
        { price: 50005.00, quantity: 18.00000, type: 'sell' },
        { price: 50003.00, quantity: 18.00000, type: 'sell' },
        { price: 50001.00, quantity: 7.00000, type: 'sell' },
        { price: 50000.40, quantity: 0.00000, type: 'last' },
        { price: 50000.10, quantity: 0.00003, type: 'buy' },
        { price: 49999.10, quantity: 17.02323, type: 'buy' },
        { price: 49997.20, quantity: 3.213022, type: 'buy' },
    ];
    updateOrderBook(mockData);
}, 1000);

周五开始

港股
美股

0 评论