效果演示

本文用于快速复制HTML内容

服务器信息

服务器账号密码命令
后端服务器127.0.0.1我是账号我是密码
前端服务器127.0.0.1我是账号我是密码
网页地址前往查看

额外说明事项

为人民服务

    北国风光，
    千里冰封，
    万里雪飘

操作步骤

操作NGINX

  • 注意操作账号的权限
    • sudo /data/nginx/sbin/nginx -s reload
    cd /data/nginx-conf
    已复制到剪贴板！

    代码如下

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本文用于快速复制HTML内容</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            line-height: 1.6;
            position: relative;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        #copyAlert {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .test {
            border: 1px solid #ddd;
            padding: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<h1>服务器信息</h1>
<table>
    <tr>
        <th>服务器</th>
        <th>账号</th>
        <th>密码</th>
        <th>命令</th>
    </tr>
    <tr>
        <td>后端服务器</td>
        <td>127.0.0.1</td>
        <td>我是账号</td>
        <td>我是密码</td>
    </tr>
    <tr>
        <td>前端服务器</td>
        <td>127.0.0.1</td>
        <td>我是账号</td>
        <td>我是密码</td>
    </tr>
    <tr>
        <td>网页地址</td>
        <td><a href="https://zanglikun.com" target="_blank">前往查看</a></td>
        <td></td>
        <td></td>
    </tr>
    <!-- 在这里添加更多行 -->
</table>

<h1>额外说明事项</h1>
<h2>为人民服务</h2>
<pre>
    北国风光，
    千里冰封，
    万里雪飘
</pre>
<h2>操作步骤</h2>
<h3>操作NGINX</h3>
<li>注意操作账号的权限</li>
<pre class="test">sudo /data/nginx/sbin/nginx -s reload</pre>
<pre class="test">cd /data/nginx-conf</pre>

<div id="copyAlert">已复制到剪贴板！</div>

<script>
    // 实现双击复制文本的功能
    document.addEventListener('dblclick', function (e) {
        if (e.target.tagName === 'PRE' || e.target.tagName === 'TD') {
            var text = e.target.innerText;
            var elem = document.createElement('textarea');
            document.body.appendChild(elem);
            elem.value = text;
            elem.select();
            document.execCommand('copy');
            document.body.removeChild(elem);
            // 显示复制成功的提示
            var alertBox = document.getElementById('copyAlert');
            alertBox.style.display = 'block';
            setTimeout(function () {
                alertBox.style.display = 'none';
            }, 2000); // 2秒后自动消失
        }
    });
</script>

</body>
</html>
    特殊说明：
    上述文章均是作者实际操作后产出。烦请各位，请勿直接盗用！转载记得标注原文链接：www.zanglikun.com
    第三方平台不会及时更新本文最新内容。如果发现本文资料不全，可访问本人的Java博客搜索：标题关键字。以获取全部资料 ❤