SOURCE

console 命令行工具 X clear

                    
>
console
let res = {}
        document.getElementById('getInfo').addEventListener('click', async function () {
            const id = document.getElementById("goods_id").value
            const result = await axios.get(`https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id=${id}`)
            res = result.data
            document.querySelector("textarea").value = JSON.stringify(res)
        })

        // 获取详细信息
        document.getElementById("getIntroduce").addEventListener('click', async () => {
            let str = res.message.goods_introduce
            // 转义
            str = str.replace(/\\"/g, "'")
            await copy(str)
            showTick()
        })

        // 获取名称
        document.getElementById("getName").addEventListener('click', async () => {
            await copy(res.message.goods_name)
            showTick()
        })

        // 获取商品封面(大)
        document.getElementById("getLogo").addEventListener('click', async () => {
            await copy(res.message.goods_big_logo)
            showTick()
        })

        // 获取商品封面(小)
        document.getElementById("getSmallLogo").addEventListener('click', async () => {
            await copy(res.message.goods_small_logo)
            showTick()
        })

        function showTick() {
            document.getElementsByClassName("vivi")[0].style.display = "block"
            setTimeout(() => {
                document.getElementsByClassName("vivi")[0].style.display = "none"
            }, 1000)
        }

        function copy(textToCopy) {
            // navigator clipboard 需要https等安全上下文
            if (navigator.clipboard && window.isSecureContext) {
                // navigator clipboard 向剪贴板写文本
                return navigator.clipboard.writeText(textToCopy);
            } else {
                // 创建text area
                let textArea = document.createElement("textarea");
                textArea.value = textToCopy;
                // 使text area不在viewport,同时设置不可见
                textArea.style.position = "absolute";
                textArea.style.opacity = 0;
                textArea.style.left = "-999999px";
                textArea.style.top = "-999999px";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                return new Promise((res, rej) => {
                    // 执行复制命令并移除文本框
                    document.execCommand('copy') ? res() : rej();
                    textArea.remove();
                });
            }
        }
<div class="main">
<div>
    <div>
        <label>id</label>
        <input type="number" id="goods_id">
        <button id="getInfo">获取</button>
    </div>
    <div>
        <button id="getIntroduce">获取详细信息</button>
        <button id="getName">获取名称</button>
        <button id="getLogo">获取商品封面(大)</button>
        <button id="getSmallLogo">获取商品封面(小)</button>
    </div>
</div>
<div>
    <textarea></textarea>
</div>
</div>

<div class="vivi">复制成功</div>
.main{
    display: flex;
    justify-content: space-around;
}

textarea{
    width: 100%;
    height: 200px;
}

.vivi{
    position: absolute;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    padding: 5px  10px;
    border-radius: 7px;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    display: none;
}

本项目引用的自定义外部资源