本帖最后由 sxlixiaoyang 于 2024-7-10 10:25 编辑
分享一个自己之前写的小公举
1、可以预设分数，将指定的尾号设置固定的分数，比如6666:100，前面是尾号，后面是分数，一行一个，先编辑好在粘贴在提示框里即可。
2、可以通过ws通信对接弹幕工具，实现点赞插队，也就是直播间点赞之后发送四位数字自动计算。
3、固定分数，避免相同尾号出现不同分数
欢迎二开…………[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>手机尾号评分系统</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #ff0b0b;
text-align: center;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #11c796a3;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label, input, button {
display: block;
width: 100%;
margin-bottom: 10px;
}
label {
margin-bottom: 5px;
color: #666;
}
input {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
text-align: center;
}
th, td {
padding: 8px;
border-bottom: 1px solid #c9990b;
}
th {
background-color: #edff00a6;
}
td {
text-align: center;
}
.high-score {
color: red;
}
.thumb-up {
width: 1em;
height: 1em;
vertical-align: middle;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>测一测你的手机号多少分</h1>
<div id="notificationBanner" class="banner"></div>
<label for="phoneTail">输入手机尾号（后四位）:</label>
<input type="text" id="phoneTail" maxlength="4" placeholder="例如: 1234">
<button>评分</button>
<table id="result">
<thead>
<tr>
<th>尾号</th>
<th>分数</th>
<th>优秀程度</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
let predefinedScores = {};
let giftUserIds = [];
let zanUserIds = [];
function getRandomScore() {
let random = Math.random();
if (random < 0.10) {
return Math.floor(Math.random() * 6) + 60; // 60-65
} else if (random > 0.90) {
return Math.floor(Math.random() * 5) + 96; // 96-100
} else {
return Math.floor(Math.random() * 31) + 66; // 66-95
}
}
function evaluateValue() {
const phoneTail = document.getElementById('phoneTail').value;
if (phoneTail.length !== 4 || isNaN(phoneTail)) {
alert('请输入有效的4位数字手机尾号');
return;
}
let value;
if (predefinedScores.hasOwnProperty(phoneTail)) {
value = predefinedScores[phoneTail];
} else {
value = getRandomScore();
predefinedScores[phoneTail] = value;
}
addToResultTable(phoneTail, value);
}
function addToResultTable(phoneTail, value) {
const table = document.getElementById('result');
const tbody = table.querySelector('tbody');
const newRow = document.createElement('tr');
const scoreClass = value >= 90 ? 'high-score' : '';
newRow.innerHTML = `
<td class="${scoreClass}">${phoneTail}</td>
<td class="${scoreClass}">${value}分</td>
<td class="${scoreClass}">${getExcellenceLevel(value)}</td>
`;
tbody.insertBefore(newRow, tbody.firstChild);
if (tbody.children.length > 5) {
tbody.removeChild(tbody.lastChild);
}
}
function getExcellenceLevel(value) {
if (value < 70) {
return '一般';
} else if (value < 80) {
return '中上';
} else if (value < 90) {
return '优秀';
} else {
return `超级棒 <img src="zan.png" style="width: 25px;" />`;
}
}
function showNotificationInBanner(nickname, headImgUrl) {
const banner = document.getElementById('notificationBanner');
banner.innerHTML = `
<img class="avatar-banner" src="${headImgUrl}" alt="${nickname}的头像">
<span>${nickname}，您还没有点赞，请点赞后再发身高数据哦</span>
`;
banner.classList.add("notification-active");
setTimeout(() => {
banner.innerHTML = '';
banner.classList.remove("notification-active");
}, 4000);
}
function initWebSocket() {
const ip = prompt("请输入弹幕监测服务器的IP地址（支持IPV6需要带[]）:", "127.0.0.1");
const port = prompt("请输入弹幕监测服务器的端口:", "2019");
const predefinedScoresInput = prompt("请输入预设的分数，格式为8888:60，每行一个。", "");
parsePredefinedScores(predefinedScoresInput);
socket = new WebSocket(`ws://${ip}:${port}`);
socket.onopen = function(event) {
console.log('WebSocket connection opened:', event);
};
socket.onmessage = function(event) {
console.log('Message from server:', event.data);
try {
const data = JSON.parse(event.data);
handleMessage(data);
} catch (error) {
console.error('Error parsing JSON:', error);
}
};
socket.onclose = function(event) {
console.log('WebSocket connection closed:', event);
};
socket.onerror = function(event) {
console.error('WebSocket error:', event);
};
}
function parsePredefinedScores(input) {
if (!input) return;
const lines = input.split('\n');
lines.forEach(line => {
const [number, score] = line.split(':');
if (number && score) {
predefinedScores[number.trim()] = parseInt(score.trim());
}
});
}
function handleMessage(data) {
let message = '';
switch (data.message_type) {
case 'gift':
message = `${data.user_id} 送出 ${data.gift_name} x ${data.gift_total_count}`;
giftUserIds.push(data.user_id);
break;
case 'like':
message = `抖音ID：${data.user_id} 的昵称：${data.user_nickName} 为主播点赞`;
zanUserIds.push(data.user_id);
break;
case 'join':
message = `抖音ID：${data.user_id} 的昵称：${data.user_nickName} 进入了直播间`;
break;
case 'text':
message = `${data.user_nickName}: ${data.content}`;
//if (giftUserIds.includes(data.user_id) && /^\d{4}$/.test(data.content)) {
// document.getElementById('phoneTail').value = data.content;
// evaluateValue();
// giftUserIds = giftUserIds.filter(id => id !== data.user_id);
//}
if (zanUserIds.includes(data.user_id) && /^\d{4}$/.test(data.content)) {
document.getElementById('phoneTail').value = data.content;
evaluateValue();
zanUserIds = zanUserIds.filter(id => id !== data.user_id);
}
break;
default:
message = 'Unknown message type';
}
//addMessage(`Server: ${message}`);
}
function addMessage(message) {
const banner = document.getElementById('notificationBanner');
banner.innerHTML = message;
banner.classList.add("notification-active");
setTimeout(() => {
banner.innerHTML = '';
banner.classList.remove("notification-active");
}, 4000);
}
window.onload = initWebSocket;
</script>
</body>
</html>
示例：https://w.jisuan.link/weihao/weihaozanchadui.html
运行效果：
| 
[复制链接]
发表于 2024-7-1 18:16
|
发表于 2024-7-2 12:59
