AI应用实践:制作一个股票涨跌停计算器,保存在一个HTML文件中

成品地址:https://www.aibxm.com/zdt.html


以下是一个基于HTML/JavaScript的股票涨跌停计算器实现,保存为.html文件即可使用:


<!DOCTYPE html>

<html>

<head>

    <title>股票涨跌停计算器</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            max-width: 400px;

            margin: 20px auto;

            padding: 20px;

            border: 1px solid #ddd;

            border-radius: 5px;

        }

        .input-group {

            margin-bottom: 15px;

        }

        label {

            display: inline-block;

            width: 80px;

        }

        input {

            width: 150px;

            padding: 5px;

        }

        button {

            width: 100%;

            padding: 10px;

            background-color: #4CAF50;

            color: white;

            border: none;

            border-radius: 3px;

            cursor: pointer;

        }

        #result {

            margin-top: 20px;

            font-size: 1.2em;

            color: #333;

        }

    </style>

</head>

<body>

    <h2>股票涨跌停计算器</h2>

    

    <div class="input-group">

        <label>昨日收盘价:</label>

        <input type="number" id="closePrice" step="0.01" placeholder="输入昨日收盘价">

    </div>

    

    <div class="input-group">

        <label>涨跌幅限制(%):</label>

        <input type="number" id="changeRate" step="0.01" placeholder="输入涨跌幅(%)">

    </div>

    

    <button onclick="calculate()">计算</button>

    

    <div id="result"></div>


    <script>

        function calculate() {

            // 获取输入值

            let closePrice = parseFloat(document.getElementById('closePrice').value);

            let changeRate = parseFloat(document.getElementById('changeRate').value) / 100;


            // 验证输入

            if (isNaN(closePrice) || isNaN(changeRate)) {

                alert("请输入有效数字!");

                return;

            }


            // 计算公式(参考[1,2,7](@ref))

            let limitUp = closePrice * (1 + changeRate);

            let limitDown = closePrice * (1 - changeRate);


            // 格式化显示(保留两位小数)

            let resultHtml = `

                <p>涨停价:${limitUp.toFixed(2)} 元</p>

                <p>跌停价:${limitDown.toFixed(2)} 元</p>

                <p>计算公式:收盘价 × (1 ± 涨跌幅%)</p>

            `;


            document.getElementById('result').innerHTML = resultHtml;

        }

    </script>

</body>

</html>


主要功能说明:

  1. 支持输入昨日收盘价和涨跌幅百分比

  2. 自动计算涨停价和跌停价

  3. 结果保留两位小数(符合股票价格精度要求)

  4. 包含输入验证功能

  5. 响应式布局适配手机屏幕

使用方法:

  1. 将代码保存为.html文件

  2. 用浏览器打开文件

  3. 输入昨日收盘价和涨跌幅限制

  4. 点击"计算"按钮即可查看结果

注:实际股票交易中不同板块(主板/创业板/科创板/北交所)的涨跌幅限制可能不同(参考

),本工具提供通用计算框架,可根据需要修改涨跌幅参数。ST股票的特殊涨跌幅限制(如5%)需手动输入对应数值。




评论
暂无评论

登录后可发表评论

点击登录