本帖最后由 qyc0 于 2024-11-13 16:57 编辑
原帖地址:自用挪车二维码,免服务器,可微信通知,可拨打电话 https://www.52pojie.cn/thread-1979717-1-1.html
已经在原帖第550楼po过修改后的代码了
因我个人需要做Server酱的整合通知,同时也有服务器,目前适配了方糖的SCT微信通知整合以及用PHP规避了前端js泄露,同时加入了时间戳,一分钟只能通知一次,避免消息轰炸。
第二次更新在6楼,6楼代码已更新支持PushDeer。
2024/11/13测试过可在宝塔环境下部署。nginx:1.25.5;php8.0
index.html
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通知车主挪车</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; background: #f0f2f5; color: #333; }
.container { text-align: center; padding: 20px; width: 100%; max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); background: #fff; }
h1 { font-size: 24px; margin-bottom: 20px; color: #007bff; }
p { margin-bottom: 20px; font-size: 16px; color: #555; }
button {
width: 100%;
padding: 15px;
margin: 10px 0;
font-size: 18px;
font-weight: bold;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s;
}
.notify-btn { background: #28a745; }
.notify-btn:hover { background: #218838; }
.call-btn { background: #17a2b8; }
.call-btn:hover { background: #138496; }
.disabled {
background: #6c757d !important;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<h1>通知车主挪车</h1>
<p>如需通知车主,请点击以下按钮</p>
<button id="notifyButton" class="notify-btn">通知车主挪车</button>
<button class="call-btn">拨打车主电话</button>
</div>
<script>
function startCooldown(duration) {
const button = document.getElementById('notifyButton');
button.disabled = true;
button.classList.add('disabled');
// 使用后端提供的冷却时间
let cooldown = duration;
button.textContent = `冷却中 (${cooldown}s)`;
const interval = setInterval(() => {
cooldown -= 1;
if (cooldown > 0) {
button.textContent = `冷却中 (${cooldown}s)`;
} else {
clearInterval(interval);
button.disabled = false;
button.classList.remove('disabled');
button.textContent = "通知车主挪车";
}
}, 1000);
}
function notifyOwner() {
fetch("/fetch.php")
.then(response => response.json())
.then(data => {
if (data.code === 0) {
alert("通知已发送!");
// 这里启动60秒的冷却
startCooldown(60);
} else if (data.code === 1 && data.cooldown) {
// 如果有冷却时间,则开始冷却计时
startCooldown(data.cooldown);
alert(data.message);
} else {
alert("通知发送失败,请稍后重试。");
}
})
.catch(error => {
console.error("Error sending notification:", error);
alert("通知发送出错,请检查网络连接。");
});
}
function callOwner() {
window.location.href = "tel:13188888888";
}
</script>
</body>
</html>
网站同目录下创建fetch.php
[Asm] 纯文本查看 复制代码 <?php
// fetch.php
// 定义用于保存时间戳的文件路径
$timestampFile = '/tmp/api_call_timestamp.txt';
$cooldownTime = 60; // 冷却时间(秒)
// 当前时间戳
$currentTime = time();
// 检查文件是否存在以及是否在冷却中
if (file_exists($timestampFile)) {
$lastCalled = file_get_contents($timestampFile);
$timeElapsed = $currentTime - (int)$lastCalled;
if ($timeElapsed < $cooldownTime) {
$remainingTime = $cooldownTime - $timeElapsed;
exit(json_encode(['code' => 1, 'message' => '请求过于频繁,请稍后再试', 'cooldown' => $remainingTime]));
}
}
// 执行外部 API 调用
$apiUrl = 'https://sctapi.ftqq.com/<sendkey>.send?title=挪车通知&desp=有人扫码通知你挪车啦'; //<sendkey>请自行为自己的SCT开头的密钥
$ch = curl_init($apiUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
if ($response === false) {
echo json_encode(['code' => 1, 'message' => '请求失败: ' . curl_error($ch)]);
} else {
// 保存当前时间戳到文件中
file_put_contents($timestampFile, $currentTime);
echo $response;
}
curl_close($ch);
?> |