一款好看的密码弹窗
由于平时比较喜欢跟群友们玩Alist,群友们都希望给网盘加一个密码弹窗,由于之前分享的密码弹窗只是前端展示的,密码容易暴露。
故此现在重新写一个对接后端的,代码没有什么难度比较简单。会玩了的拿去改改还是不错的,也可以套用其他网站。
弹窗展示:
代码分享:
如果发现有BUG可以反馈,有大佬添加其他功能好用的也可以分享并更新
<style>
/*
这是样式,样式尽量放头部【规范】
*/
.swal2-styled {
border: 0;
border-radius: 0.8em;
padding: 10px 20px;
font-size: 16px;
line-height: 1.6;
}
.button-confirm {
background-color: green;
}
.button-visit {
background-color: red;
}
.button-qr {
background-color: blue;
}
</style>
<script>
/*
分享来源:橘子博客
制作不易 免费分享
*/
let today;
window.onload = function() {
today = new Date().toISOString().slice(0, 10);
if (localStorage.getItem('passwordVerified') === today) {
return;
}
showPasswordPrompt();
};
function showPasswordPrompt() {
Swal.fire({
icon: 'info',
title: '不良人 天暗星',
html: '<input type="password" id="swal-input1" class="swal2-input" placeholder="输入密码">',
confirmButtonText: '确定',
preConfirm: () => {
const password = document.getElementById('swal-input1').value;
if (!password) {
Swal.showValidationMessage('密码不能为空');
return false;
}
return fetch('你的接口地址', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({password: password})
})
.then(response => response.json())
.then(data => {
if (data.success) {
localStorage.setItem('passwordVerified', today);
Swal.fire('验证成功!', '', 'uccess');
} else {
Swal.showValidationMessage('密码错误,请重试。');
return false;
}
})
.catch(error => {
Swal.showValidationMessage(`请求失败: ${error}`);
return false;
});
},
allowOutsideClick: false,
allowEscapeKey: false,
didOpen: () => {
const input = document.getElementById('swal-input1');
input.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
Swal.clickConfirm();
}
});
const actions = Swal.getActions();
const confirmButton = Swal.getConfirmButton();
confirmButton.classList.add('swal2-styled');
confirmButton.style.backgroundColor = 'green';
const visitButton = document.createElement('button');
visitButton.textContent = '小橘子';
visitButton.classList.add('swal2-styled');
visitButton.style.backgroundColor ='red';
visitButton.onclick = function() { window.open('https://xjuzi.cn', '_blank'); };
actions.appendChild(visitButton);
const qrButton = document.createElement('button');
qrButton.textContent = '获取密码';
qrButton.classList.add('swal2-styled');
qrButton.style.backgroundColor = 'blue';
qrButton.onclick = showQRCode;
actions.appendChild(qrButton);
}
});
};
function showQRCode() {
Swal.fire({
title: '关注我们的公众号',
html: `
获取更多信息和更新,请扫描二维码关注我们的公众号:<br>
<img src="https://pan.xjuzi.cn/d/%E4%BD%9C_______________%E6%89%A7/%E2%9C%A8logo/WX01.png?sign=212pDFVk_Qkq6FO83PffJY8MlHO57sGzFwgGdS3DE6Q=:0" alt="QR Code"><br>
<button id="copyButton" class="swal2-styled">复制微信</button>
<button id="returnButton" class="swal2-styled">返回</button>
`,
showConfirmButton: false,
focusConfirm: false,
allowOutsideClick: false,
allowEscapeKey: false,
didOpen: () => {
document.getElementById("copyButton").addEventListener("click", function(event) {
event.preventDefault();
const tempElement = document.createElement("textarea");
tempElement.value = 'CydiaBi';
document.body.appendChild(tempElement);
tempElement.select();
document.execCommand("copy");
document.body.removeChild(tempElement);
Swal.showValidationMessage('复制成功!');
});
document.getElementById("returnButton").addEventListener("click", function(event) {
event.preventDefault();
showPasswordPrompt();
});
}
});
}
</script>
调用方法
1:复制全部代码放在自定义内容
2:新建空白js文件放在服务器调用,<script src="https://域名/666.js"></script>
3:依赖<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>这个放到头部引用就可以
<?php
/*
分享来源:橘子博客
制作不易 免费分享
*/
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type, X-Requested-With');
header('Content-Type: application/json');
$validPassword = '888';
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
echo "这是一个密码验证接口,请通过POST请求提交密码进行验证。";
exit;
}
$postData = json_decode(file_get_contents('php://input'), true);
$password = $postData['password'] ?? '';
if ($password === $validPassword) {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}
?>
使用方法:新建php文件,代码全部复制进去。放在服务器然后用上面的js对接即可
橘子站长2024-11-21 18:43
愿所有美好,都不负归期,选一种姿态让自己活得无可替代,没有所谓的运气只有绝对的努力。