此代码来源于网络
<!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>

标签: 暂无标签