php一键复制示例 code 运维技术

admin 2024-10-06 323

下面是一个使用 PHP 和 Bootstrap 创建一键复制输出结果的示例代码,包含“复制代码”按钮和状态提示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一键复制示例</title>
    <link rel="stylesheet" href="https://cdn.9930.top:9930/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.9930.top:9930/jquery/3.5.1/jquery.slim.min.js"></script>
    <script>
        function copyToClipboard() {
            const output = document.getElementById("output");
            navigator.clipboard.writeText(output.innerText).then(() => {
                const button = document.getElementById("copyButton");
                button.innerText = "√ 已复制!";
                setTimeout(() => {
                    button.innerText = "复制代码";
                }, 2000);
            });
        }
    </script>
</head>
<body>
<div class="container mt-5">
    <h2>一键复制输出结果</h2>
    <div class="card">
        <div class="card-body">
            <pre id="output">这是要复制的内容。</pre>
            <button id="copyButton" class="btn btn-primary" onclick="copyToClipboard()">复制代码</button>
        </div>
    </div>
</div>
</body>
</html>
<?php

使用说明

1、将上述代码复制到一个新的 PHP 文件中,例如 copy_example.php。

2、使用浏览器打开该文件。

3、点击“复制代码”按钮,文本区域中的内容将被复制到剪贴板,同时按钮文字会变为“√ 已复制!”并在2秒后恢复为“复制代码”。

这个代码可以直接在其他需要复制输出结果的 PHP 文件中使用,只需调整 output 中的内容即可。

最新回复 (0)
全部楼主
    • MSDN,我告诉你(中文站)
      2
        登录 注册 获取赞助码
返回