<style> body {font-family: Arial, Helvetica, sans-serif;}h1 {font-size: 24px; margin-bottom: 10px;}ul {list-style-type: none;padding: 0;margin: 0;}li {display: flex;justify-content: space-between;align-items: center;padding: 5px 10px;margin-bottom: 5px;background-color: eee;}.team-name {font-weight: bold;}.score {calhost:8080');// 当WebSocket连接打开时执行socket.onopen = function () {console.log('WebSocket连接已打开');};// 当收到 WebSocket 消息时执行socket.onmessage = function (event) {// 将接收到的数据解析为 JSON 对象const data = JSON.parse(event.data);// 创建一个新的 li 元素const li = document.createElement('li');// 创建两个 span 元素，分别显示球队名称和比分const team1 = document.createElement('span');team1.classList.add('team-name');team1.textContent = data.team1;const score =document.createElement('span');score.classList.add('score');score.textContent = data.score;const team2 = document.createElement('span');team2.classList.add('team-name');team2.textContent = data.team2;// 创建一个 span 元素，显示比赛时间const time = document.createElement('span');time.classList.add('time');time.textContent = data.time;// 将 span 元素添加到 li 元素中li.appendChild(team1);li.appendChild(score);li.appendChild(team2);li.appendChild(time);// 将 li 元素添加到 ul 元素中const liveScores = document.getElementById('live-scores');liveScores.appendChild(li);};// 当 WebSocket 连接关闭时执行socket.onclose = function () {console.log('WebSocket连接已关闭');};})();</script> </style>

相关阅读： 即时足球比分追踪 让你不错过任何精彩时刻