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>
主要功能说明:
支持输入昨日收盘价和涨跌幅百分比
自动计算涨停价和跌停价
结果保留两位小数(符合股票价格精度要求)
包含输入验证功能
响应式布局适配手机屏幕
使用方法:
将代码保存为
.html
文件用浏览器打开文件
输入昨日收盘价和涨跌幅限制
点击"计算"按钮即可查看结果
注:实际股票交易中不同板块(主板/创业板/科创板/北交所)的涨跌幅限制可能不同(参考
),本工具提供通用计算框架,可根据需要修改涨跌幅参数。ST股票的特殊涨跌幅限制(如5%)需手动输入对应数值。
登录后可发表评论
点击登录