直接上效果

逻辑

html部分

input用于储存复制的文本，然后让其在页面上不显示。

/* 复制内容存放框 */
.content-paste-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -10;
}

复制按钮，定义一个点击事件，传入要复制的值。

<input id="content-paste-input" type="text" value="" class="content-paste-input" readonly />
<button class="ms_ban-btn" onclick="winCopy('SShape8')">
    <span class="ms_span1">Use code:</span>
    <span class="ms_span2">SShape8</span>
    <img src="https://www.mychway.com/image/catalog/2024/activity/machinesale/yellow_copy.webp" width="28"
        height="30">
</button>

js部分

定义一个变量，用于储存待复制的文本。

var COPY=name;

将input的vlaue值设置为 COPY的值，然后调用select()方法选中输入框的所有文本。

var input = document.getElementById("content-paste-input");
input.value = COPY;
input.select();

使用 document.execCommand("copy");执行复制命令，将选中的文本复制到剪切板。

完整代码

css
/* 复制内容存放框 */
.content-paste-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -10;
}
/* 复制按钮样式 */
.ms_ban-btn {
    background-color: #660099;
    border-radius: 8px;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    margin: -10px auto 0 auto;
}

.ms_ban-btn:hover {
    cursor: pointer;
}

.ms_ban-btn .ms_span1 {
    color: #ffffff;
    font-size: 24px;
}

.ms_ban-btn .ms_span2 {
    color: #FFCC00;
    font-size: 38px;
    font-weight: bold;
    display: block;
    margin: 0px 10px;
}
/* 复制成功提示 */
.message_add {
    position: fixed;
    left: 50%;
    width: 200px;
    top: 55px;
    right: 0px;
    transform: translateX(-50%);
    border-radius: 4px;
    padding: 15px 15px 15px 20px;
    display: flex;
    z-index: 9999999;
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    font-size: 16px;
    line-height: 16px;
}
html
<input id="content-paste-input" type="text" value="" class="content-paste-input" readonly />
<button class="ms_ban-btn" onclick="winCopy('SShape8')">
    <span class="ms_span1">Use code:</span>
    <span class="ms_span2">SShape8</span>
    <img src="https://www.mychway.com/image/catalog/2024/activity/machinesale/yellow_copy.webp" width="28"
        height="30">
</button>

js
// 复制优惠劵
function winCopy(name) {
    var COPY=name;
    var input = document.getElementById("content-paste-input");
    input.value = COPY;
    input.select();
    document.execCommand("copy");
    $("body").append("<p class='message_add' style='width: fit-content;background-color: #609;color:#fff;'>Copy success</p>")
    setTimeout(() => {
        $(".message_add").remove()
    }, 1500)
}