swap前端中 amount in太小导致amount out是0 怎么提示在按钮上

128 阅读 0 评论 85 点赞

我是靠谱客的博主岁月静好，最近开发中收集的这篇文章主要介绍swap前端中 amount in太小导致amount out是0 怎么提示在按钮上，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在按钮上提示用户“输入的金额太小，导致输出金额为0”。可以通过更新按钮的 disabled 属性和显示相关提示信息来实现。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swap Amount Input</title>
    <style>
        .disabled {
            background-color: grey;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <input type="number" id="amountIn" placeholder="Enter amount in">
    <button id="swapButton">Swap</button>
    <p id="errorMessage" style="color: red; display: none;">输入的金额太小，导致输出金额为0</p>

    <script>
        document.getElementById('amountIn').addEventListener('input', function() {
            var amountIn = parseFloat(this.value);
            var swapButton = document.getElementById('swapButton');
            var errorMessage = document.getElementById('errorMessage');

            if (isNaN(amountIn) || amountIn <= 0 || amountInTooSmall(amountIn)) {
                swapButton.classList.add('disabled');
                swapButton.disabled = true;
                errorMessage.style.display = 'block';
            } else {
                swapButton.classList.remove('disabled');
                swapButton.disabled = false;
                errorMessage.style.display = 'none';
            }
        });

        function amountInTooSmall(amountIn) {
            // 这里需要根据你的业务逻辑定义最小的有效输入金额
            var minAmountIn = 0.01; // 示例值
            return amountIn < minAmountIn;
        }
    </script>
</body>
</html>