admin管理员组

文章数量:1487745

提高效率 – 快速复制内容 – 纯HTML

效果演示

本文用于快速复制HTML内容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,.2)}.test{border:1px solid #ddd;padding:10px;cursor:pointer}

服务器信息

服务器

账号

密码

命令

后端服务器

127.0.0.1

我是账号

我是密码

前端服务器

127.0.0.1

我是账号

我是密码

网页地址

前往查看

额外说明事项

为人民服务

代码语言：javascript代码运行次数：0运行复制
    北国风光，
    千里冰封，
    万里雪飘

操作步骤

操作NGINX

  • 注意操作账号的权限
代码语言：javascript代码运行次数：0运行复制
sudo /data/nginx/sbin/nginx -s reload
代码语言：javascript代码运行次数：0运行复制
cd /data/nginx-conf

已复制到剪贴板！

代码如下

代码语言：javascript代码运行次数：0运行复制
<!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="; 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 第三方平台不会及时更新本文最新内容。如果发现本文资料不全，可访问本人的Java博客搜索：标题关键字。以获取全部资料 ❤

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2024-10-14，如有侵权请联系 cloudcommunity@tencent 删除服务器后端前端权限html

本文标签： 提高效率 – 快速复制内容 – 纯HTML

版权声明：本文标题：提高效率 – 快速复制内容 – 纯HTML 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/shuma/1754867047a3180582.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。