股票交割单生成器手机版，股票虚拟仿真交易软件，股票假图一键生成器【装逼娱乐必备】

下载地址：https://www.pan38.com/share.php?code=HJmmK

声明：仅用于学习参考用！

使用JavaScript对象存储股票数据

随机数生成价格波动

‌DOM操作‌：

动态创建HTML元素

事件监听与处理

表格数据动态更新

‌状态管理‌：

持仓数据的增删改查

盈亏计算逻辑

‌前端架构‌：

清晰的模块划分

数据与视图分离

index.html
`

股票模拟交易系统

    <!-- 行情展示区 -->
    <div class="stock-quote">
        <h2>实时行情</h2>
        <div id="quote-display"></div>
    </div>
    
    <!-- 交易面板 -->
    <div class="trade-panel">
        <h2>模拟交易</h2>
        <div class="form-group">
            <label>股票代码：</label>
            <input type="text" id="stock-code" placeholder="例如：600000">
        </div>
        <div class="form-group">
            <label>交易方向：</label>
            <select id="trade-type">
                <option value="buy">买入</option>
                <option value="sell">卖出</option>
            </select>
        </div>
        <div class="form-group">
            <label>数量(股)：</label>
            <input type="number" id="trade-amount" min="100" step="100" value="100">
        </div>
        <button id="execute-trade">执行交易</button>
    </div>
    
    <!-- 持仓展示 -->
    <div class="portfolio">
        <h2>模拟持仓</h2>
        <table id="position-table">
            <thead>
                <tr>
                    <th>股票代码</th>
                    <th>持仓量</th>
                    <th>成本价</th>
                    <th>当前价</th>
                    <th>盈亏</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script src="script.js"></script>

`

style.css

`body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}

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

.stock-quote, .trade-panel, .portfolio {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}

.form-group {
margin-bottom: 15px;
}

label {
display: inline-block;
width: 100px;
}

input, select {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}

th {
background-color: #f2f2f2;
}

.profit {
color: #f44336;
}

.loss {
color: #4CAF50;
}`

逻辑代码部分：script.js

`// 模拟数据存储
const stockData = {
'600000': { name: '浦发银行', price: 10.25 },
'601318': { name: '中国平安', price: 48.60 },
'600519': { name: '贵州茅台', price: 1750.00 }
};

let portfolio = {};

// 初始化函数
document.addEventListener('DOMContentLoaded', function() {
updateQuoteDisplay();
document.getElementById('execute-trade').addEventListener('click', executeTrade);
});

// 更新行情显示
function updateQuoteDisplay() {
const display = document.getElementById('quote-display');
display.innerHTML = '';

for(const [code, data] of Object.entries(stockData)) {
    const stockElement = document.createElement('div');
    stockElement.className = 'stock-item';
    stockElement.innerHTML = `
        <strong>${code} ${data.name}</strong>: 
        <span>${data.price.toFixed(2)}元</span>
        <button onclick="simulatePriceChange('${code}')">模拟波动</button>
    `;
    display.appendChild(stockElement);
}

}

// 模拟价格波动
function simulatePriceChange(stockCode) {
const changePercent = (Math.random() * 6 - 3); // -3%到+3%
const currentPrice = stockData[stockCode].price;
const newPrice = currentPrice * (1 + changePercent/100);
stockData[stockCode].price = parseFloat(newPrice.toFixed(2));

updateQuoteDisplay();
updatePortfolioDisplay();

}

// 执行交易
function executeTrade() {
const stockCode = document.getElementById('stock-code').value;
const tradeType = document.getElementById('trade-type').value;
const amount = parseInt(document.getElementById('trade-amount').value);

if(!stockData[stockCode]) {
    alert('股票代码不存在');
    return;
}

const price = stockData[stockCode].price;

if(tradeType === 'buy') {
    if(!portfolio[stockCode]) {
        portfolio[stockCode] = {
            amount: 0,
            cost: 0
        };
    }
    
    portfolio[stockCode].amount += amount;
    portfolio[stockCode].cost += amount * price;
    
} else if(tradeType === 'sell') {
    if(!portfolio[stockCode] || portfolio[stockCode].amount < amount) {
        alert('持仓不足');
        return;
    }
    
    portfolio[stockCode].amount -= amount;
    portfolio[stockCode].cost -= amount * (portfolio[stockCode].cost / portfolio[stockCode].amount);
    
    if(portfolio[stockCode].amount === 0) {
        delete portfolio[stockCode];
    }
}

updatePortfolioDisplay();
alert(`交易成功！${tradeType === 'buy' ? '买入' : '卖出'} ${amount}股 ${stockData[stockCode].name}`);

}

// 更新持仓显示
function updatePortfolioDisplay() {
const tableBody = document.querySelector('#position-table tbody');
tableBody.innerHTML = '';

for(const [code, position] of Object.entries(portfolio)) {
    const stock = stockData[code];
    const currentValue = position.amount * stock.price;
    const costValue = position.cost;
    const profit = currentValue - costValue;
    const profitPercent = (profit / costValue * 100).toFixed(2);
    
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>${code} ${stock.name}</td>
        <td>${position.amount}</td>
        <td>${(costValue / position.amount).toFixed(2)}</td>
        <td>${stock.price.toFixed(2)}</td>
        <td class="${profit >= 0 ? 'profit' : 'loss'}">
            ${profit.toFixed(2)} (${profitPercent}%)
        </td>
    `;
    tableBody.appendChild(row);
}

}`