一个独立站用户制作了一个Landing Page，Contact us部分需要2个特别的WhatsAPP和Line按钮，点击按钮会轮流弹出不同的客服号码。示例如下
功能要求
- 只需要一个WhatsAPP按钮，一个Line按钮
- 每个按钮可以设置多个客服号码
- 按不同用户，每点击一次，弹出不同的客服号码
代码片段
要创建一个 WhatsApp 按钮，每次点击时在新窗口弹出，并轮流显示三个号码，你可以使用 JavaScript 来实现。以下是一个基本的示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhatsApp 链接</title>
<script>
let numbers = [
"12345678901",
"10987654321",
"11223344556"
];
let currentIndex = 0;
function openWhatsApp() {
let number = numbers[currentIndex];
currentIndex = (currentIndex + 1) % numbers.length; // 循环
let url = `https://wa.me/${number}`;
window.open(url, '_blank');
}
</script>
<style>
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #25D366; /* WhatsApp 绿色 */
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.btn:hover {
background-color: #128C7E; /* 鼠标悬停时的颜色 */
}
</style>
</head>
<body>
<a href="#" class="btn" onclick="openWhatsApp(); return false;">联系我</a>
</body>
</html>
以上只能实现同一个人点击轮询弹出，不能实现多人轮询
如果要实现不同的人点击后轮流显示不同的号码（而不是同一个人点击循环），可以使用浏览器的 localStorage 来跟踪用户的点击次数。这样，每个用户第一次点击时显示第一个号码，第二个用户点击时显示第二个号码，以此类推。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhatsApp 和 LINE 链接</title>
<script>
let whatsappNumbers = [
"12345678901",
"10987654321",
"11223344556"
];
let lineIds = [
"line_id_1",
"line_id_2",
"line_id_3"
];
// 获取当前的轮次计数
function getCurrentIndex() {
let index = localStorage.getItem('currentIndex');
return index ? parseInt(index) : 0;
}
// 更新轮次计数
function updateIndex() {
let index = getCurrentIndex();
index = (index + 1) % whatsappNumbers.length; // 每次点击增加，循环使用号码
localStorage.setItem('currentIndex', index); // 存储新的轮次
}
function openWhatsApp() {
let index = getCurrentIndex();
let number = whatsappNumbers[index];
let url = `https://wa.me/${number}`;
window.open(url, '_blank');
updateIndex(); // 更新计数
}
function openLine() {
let index = getCurrentIndex();
let id = lineIds[index];
let url = `https://line.me/R/msg/text/?${encodeURIComponent("Hello!")}&to=${id}`;
window.open(url, '_blank');
updateIndex(); // 更新计数
}
</script>
<style>
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #25D366; /* WhatsApp 绿色 */
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
margin-right: 10px; /* 按钮间距 */
}
.btn.line {
background-color: #00B900; /* LINE 绿色 */
}
.btn:hover {
opacity: 0.8; /* 鼠标悬停效果 */
}
</style>
</head>
<body>
<a href="#" class="btn" onclick="openWhatsApp(); return false;">联系我 (WhatsApp)</a>
<a href="#" class="btn line" onclick="openLine(); return false;">联系我 (LINE)</a>
</body>
</html>
说明
localStorage 被用来存储用户的点击计数，保证每个不同的用户点击时号码会依次轮换。
getCurrentIndex() 函数从 localStorage 中读取当前的计数，默认从 0 开始。
updateIndex() 在每次点击后更新号码的计数，确保下一个点击的用户看到不同的号码。
这个方案适用于不同的用户或同一个用户通过刷新页面后点击时显示不同的号码。
