如何在按钮右下角添加可编辑的数字显示？

实现步骤 #

• 给每个按钮添加一个<span>子元素作为数字角标，通过CSS定位到按钮右下角
• 给按钮绑定点击事件，触发输入框获取用户输入，验证后更新角标数字
• 初始状态可设置显示0或隐藏，按需调整

完整代码示例 #

HTML

<div class="main">
    <div id="inner"></div>
</div>

CSS

button {
    background: black;
    color: white;
    border: 3.5px solid transparent;
    border-radius: 10px;
    padding: 2.8em 2.8em;
    background-repeat: no-repeat;
    /* 按钮设为相对定位，让角标能绝对定位在内部 */
    position: relative;
}

button:hover {
    border-color: #fff8cc;
    border: 3.5px solid;
    color: #fff8cc;
    box-shadow: 0em 0em 1em 0em #fff8cc;
}

/* 按钮右下角数字角标样式 */
.btn-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: #fff8cc;
    color: black;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    /* 若默认隐藏，取消下面注释即可 */
    /* display: none; */
}

JavaScript

var containerDiv = document.querySelector("#inner");
let tempCounterBtn = 0;
for (let i = 0; i < 1; i++) {
    let newDiv = document.createElement("div");
    newDiv.id = "div-" + (i + 1);
    // 让按钮横向排列，添加flex布局和间距
    newDiv.style.display = "flex";
    newDiv.style.gap = "16px";
    containerDiv.appendChild(newDiv);
    for (let x = 0; x < 5; x++) {
        let btn = document.createElement("button");
        btn.innerHTML = "Hello!";
        btn.id = "button-" + (tempCounterBtn + 1);
        tempCounterBtn++;

        // 创建数字角标
        const badge = document.createElement("span");
        badge.className = "btn-badge";
        // 初始值设为0，若要隐藏则设为空字符串并配合CSS的display:none
        badge.textContent = "0";
        btn.appendChild(badge);

        // 绑定点击事件，触发输入更新数字
        btn.addEventListener("click", function() {
            const inputValue = prompt("请输入要设置的数字：");
            // 验证输入是否为有效数字
            if (inputValue !== null && !isNaN(inputValue) && inputValue.trim() !== "") {
                badge.textContent = inputValue.trim();
                // 若默认隐藏了角标，这里可以显示出来
                // badge.style.display = "flex";
            }
        });

        newDiv.appendChild(btn);
    }
}

关键细节说明 #

• 按钮必须设置position: relative，否则角标会相对于整个页面定位
• 角标的样式可根据需求调整：比如修改背景色、大小、字体，或者把圆形改成方形
• 输入验证确保只有有效数字才会更新，避免非法输入导致的显示问题
• 如果需要默认隐藏数字，只需打开CSS中.btn-badge的display: none注释，点击输入后在JS里添加badge.style.display = "flex"即可显示

内容的提问来源于stack exchange，提问作者Dylan