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

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

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

密码生成器

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


<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;
}

  • 版权声明:所有资源均来源于互联网,如有侵权请联系我们删除
  • 发表,

  • 转载请注明:给wordpress首页加一个密码生成器 | 「多佳科博客」
  • (0)
    多佳科多佳科
    上一篇 2025年5月25日
    下一篇 2025年5月26日

    相关推荐