长沙娱乐频道直播节目 (长沙娱乐频道直播)
长沙品茶
05-09
阅读：32
评论：0
直播流
节目表
| 时间 | 节目名称 | 主持人 |
|---|
聊天室
style.css
css
body {font-family: Arial, sans-serif;font-size: 16px;line-height: 1.5em;
}header {background-color: 333;color: fff;padding: 10px;text-align: center;
}h1 {font-size: 24px;
}main {display: flex;flex-direction: row;justify-content: space-between;
}live-stream {flex: 1;padding: 10px;
}stream-container {width: 100%;height: 500px;background-color: 000;
}program-guide {flex: 1;padding: 10px;
}table {width: 100%;border-collapse: collapse;
}th, td {padding: 5px;border: 1px solid ccc;
}chat {flex: 1;padding: 10px;
}chat-messages {list-style-type: none;padding: 0;
}chat-form {display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}chat-input {flex: 1;padding: 5px;border: 1px solid ccc;
}chat-button {padding: 5px;border: 1px solid ccc;background-color: 333;color: fff;
}footer {background-color: 333;color: fff;padding: 10px;text-align: center;
}script.js
javascript
// 获取视频播放器元素
const streamContainer = document.getElementById('stream-container');// 创建视频播放器
const player = new Plyr(streamContainer);// 填充节目单数据
const programGuide = document.getElementById('program-guide');
const programData = [{time: '19:00 - 20:00',programName: '娱乐新闻',host: '张伟'},{time: '20:00 - 21:00',programName: '脱口秀大会',host: '王建国'},{time: '21:00 - 22:00',programName: '音乐盛典',host: '李诞'}
];for (const program of programData) {const row = document.createElement('tr');const timeCell = document.createElement('td');const programNameCell = document.createElement('td');const hostCell = document.createElement('td');timeCell.innerHTML = program.time;programNameCell.innerHTML = program.programName;hostCell.innerHTML = program.host;row.appendChild(timeCell);row.appendChild(programNameCell);row.appendChild(hostCell);programGuide.appendChild(row);
}// 填充聊天室消息
const chatMessages = document.getElementById('chat-messages');
const chatData = [{user: '张三',message: '大家好，欢迎来到长沙娱乐频道直播！'},{user: '李四',message: '今天的节目好精彩啊！'},{user: '王五',message: '主持人好帅气！'}
];for (const message of chatData) {const li = document.createElement('li');li.innerHTML = `
${message.user}
: ${message.message}`;chatMessages.appendChild(li);
}// 处理聊天室表单提交
const chatForm = document.getElementById('chat-form');
chatForm.addEventListener('submit', (e) => {e.preventDefault();const input = document.getElementById('chat-input');const message = input.value;if (message) {const li = document.createElement('li');li.innerHTML = `
我
: ${message}`;chatMessages.appendChild(li);input.value = '';}
});
版权声明
本文仅代表作者观点，不代表长沙桑拿立场。
本文系作者授权发表，未经许可，不得转载。
