78 lines
2.5 KiB
JavaScript
78 lines
2.5 KiB
JavaScript
// 主要功能和交互
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 初始化提示框
|
||
const toasts = document.querySelectorAll('.toast');
|
||
if (toasts.length) {
|
||
toasts.forEach(toast => {
|
||
new bootstrap.Toast(toast).show();
|
||
});
|
||
}
|
||
|
||
// 密码强度检查
|
||
const passwordInputs = document.querySelectorAll('input[type="password"]');
|
||
passwordInputs.forEach(input => {
|
||
input.addEventListener('input', function() {
|
||
checkPasswordStrength(this);
|
||
});
|
||
});
|
||
|
||
// 主题切换效果
|
||
const themeSwitch = document.querySelector('.theme-switch a');
|
||
if (themeSwitch) {
|
||
themeSwitch.addEventListener('click', function(e) {
|
||
// 先进行动画效果，然后让链接正常跳转
|
||
document.body.style.opacity = '0.5';
|
||
setTimeout(() => {
|
||
document.body.style.opacity = '1';
|
||
}, 300);
|
||
});
|
||
}
|
||
|
||
// 服务卡片hover效果增强
|
||
const serviceCards = document.querySelectorAll('.service-card');
|
||
serviceCards.forEach(card => {
|
||
card.addEventListener('mouseenter', function() {
|
||
this.style.transform = 'translateY(-10px)';
|
||
});
|
||
card.addEventListener('mouseleave', function() {
|
||
this.style.transform = 'translateY(0)';
|
||
});
|
||
});
|
||
});
|
||
|
||
// 密码强度检查函数
|
||
function checkPasswordStrength(input) {
|
||
const password = input.value;
|
||
let strength = 0;
|
||
|
||
// 长度检查
|
||
if (password.length >= 8) strength += 1;
|
||
|
||
// 包含数字
|
||
if (/\d/.test(password)) strength += 1;
|
||
|
||
// 包含小写字母
|
||
if (/[a-z]/.test(password)) strength += 1;
|
||
|
||
// 包含大写字母
|
||
if (/[A-Z]/.test(password)) strength += 1;
|
||
|
||
// 包含特殊字符
|
||
if (/[^A-Za-z0-9]/.test(password)) strength += 1;
|
||
|
||
// 移除旧的强度指示器
|
||
const oldIndicator = input.parentNode.querySelector('.password-strength');
|
||
if (oldIndicator) oldIndicator.remove();
|
||
|
||
// 如果密码长度大于0，显示强度指示器
|
||
if (password.length > 0) {
|
||
const strengthText = ['很弱', '弱', '中等', '强', '很强'][Math.min(strength, 4)];
|
||
const strengthClass = ['very-weak', 'weak', 'medium', 'strong', 'very-strong'][Math.min(strength, 4)];
|
||
|
||
const indicator = document.createElement('div');
|
||
indicator.className = `password-strength ${strengthClass}`;
|
||
indicator.textContent = `密码强度: ${strengthText}`;
|
||
|
||
input.parentNode.appendChild(indicator);
|
||
}
|
||
} |