给wordpress首页加一个密码生成器

多佳科 • 2025年5月26日上午5:49 • SEO优化

下面的是效果可以试试使用一下

密码生成器

长度: 大写字母数字特殊符号

下面的是代码，用自定义打开


<div class="password-generator">
    <h3>密码生成器</h3>
    <div class="password-result">
        <input type="text" id="generated-password" readonly>
        <button onclick="copyPassword()">复制</button>
    </div>
    <div class="password-options">
        <label>
            长度: <input type="number" id="password-length" min="8" max="64" value="12">
        </label>
        <label>
            <input type="checkbox" id="uppercase" checked> 大写字母
        </label>
        <label>
            <input type="checkbox" id="numbers" checked> 数字
        </label>
        <label>
            <input type="checkbox" id="symbols" checked> 特殊符号
        </label>
    </div>
    <button onclick="generatePassword()">生成密码</button>
</div>

<script>
function generatePassword() {
    const length = document.getElementById('password-length').value;
    const uppercase = document.getElementById('uppercase').checked;
    const numbers = document.getElementById('numbers').checked;
    const symbols = document.getElementById('symbols').checked;
    
    let charset = 'abcdefghijklmnopqrstuvwxyz';
    if (uppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    if (numbers) charset += '0123456789';
    if (symbols) charset += '!@#$%^&*()_+~`|}{[]\\:;?><,./-=';
    
    let password = '';
    for (let i = 0; i < length; i++) {
        password += charset.charAt(Math.floor(Math.random() * charset.length));
    }
    
    document.getElementById('generated-password').value = password;
}

function copyPassword() {
    const passwordField = document.getElementById('generated-password');
    passwordField.select();
    document.execCommand('copy');
    alert('密码已复制到剪贴板');
}
</script>

CSS样式建议

你可以添加一些CSS来美化密码生成器：

.password-generator {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 5px;
    max-width: 500px;
    margin: 20px auto;
}

.password-result {
    display: flex;
    margin-bottom: 15px;
}

.password-result input {
    flex-grow: 1;
    padding: 8px;
    font-size: 16px;
}

.password-options {
    margin-bottom: 15px;
}

.password-options label {
    display: block;
    margin-bottom: 8px;
}

由 多佳科 发表，江汉SEO|江汉SEO优化|分享江汉网站建设优化知识-【多佳科】。

转载请注明：给wordpress首页加一个密码生成器 | 「多佳科博客」