HTML一键复制完整代码单页源码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>复制内容自适应与按钮居中</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            justify-content: center;  
            height: 100vh;  
            margin: 0;  
            padding: 20px;  
            text-align: center;  
        }  
        .copy-content {  
            display: inline-block;  
            border: 1px solid #ccc;  
            border-radius: 5px;  
            background-color: #f5f5f5;  
            padding: 10px;  
            margin-bottom: 20px;  
            text-align: left; /* 根据需要调整文本对齐方式 */  
        }  
        button {  
            padding: 10px 20px;  
            font-size: 16px;  
            cursor: pointer;  
        }  
    </style>  
</head>  
<body>  
    <div class="copy-content" id="copyContent">  
        <p>这是一段要复制的文本，它可能会很长，也可能会很短。这个div会自适应内容的大小。</p>  
    </div>  
    <button id="copyButton">复制文本</button>  
    <p id="copyStatus"></p>  
  
    <script>  
        document.getElementById('copyButton').addEventListener('click', function() {  
            // 获取要复制的文本  
            const textToCopy = document.getElementById('copyContent').textContent.trim();  
  
            // 复制文本到剪贴板  
            navigator.clipboard.writeText(textToCopy).then(function() {  
                document.getElementById('copyStatus').textContent = '文本已复制到剪贴板！';  
            }).catch(function(err) {  
                // 复制失败  
                document.getElementById('copyStatus').textContent = '复制失败：' + err;  
            });  
        });  
    </script>  
</body>  
</html>
0 赞
HTML一键复制完整代码单页源码

HTML一键复制完整代码单页源码

相关文章

取消回复

随机推荐
