畅聊盲 - 主界面
所有房间
4 阳光明媚 4小时前 100次点击
大家好呀,我要给大家分享一个我用豆包的html代码写的社交软件。我会把代码发到评论区,大家可以直接保存为 Html文件就可以用了
看就是这个代码,直接保存为html文件就行
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", sans-serif;
background: #121212; color: #fff;
padding: 20px;
touch-action: manipulation; /* 优化触摸体验 */
}
.container {
max-width: 800px; margin: 0 auto;
background: #1E1E1E; border-radius: 12px;
padding: 30px; box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
button {
padding: 16px 24px; margin: 12px 0; border: none; border-radius: 8px;
background: #1E88E5; color: #fff; font-size: 18px; font-weight: 600;
cursor: pointer; width: 100%; transition: all 0.2s;
display: flex; align-items: center; justify-content: center;
}
button:active { background: #1565C0; transform: scale(0.98); }
button.secondary { background: #FFC107; color: #121212; }
button.secondary:active { background: #FFA000; }
button.guest { background: #666; }
button.guest:active { background: #555; }
button.contact { background: #7B1FA2; }
button.contact:active { background: #6A1B9A; }
button.vip { background: #FF5722; }
button.vip:active { background: #E64A19; }
button.live { background: #F44336; }
button.live:active { background: #D32F2F; }
input, textarea, select {
width: 100%; padding: 14px; margin: 12px 0; border: 2px solid #444;
border-radius: 8px; background: #2D2D2D; color: #fff; font-size: 18px;
caret-color: #1E88E5; /* 光标高亮,方便视障用户定位 */
}
input:focus, textarea:focus, select:focus {
outline: none; border-color: #1E88E5;
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.3);
}
label { font-size: 18px; margin: 12px 0 8px; display: block; }
.title { text-align: center; margin-bottom: 30px; font-size: 32px; color: #FFC107; }
.subtitle { text-align: center; margin: 15px 0; font-size: 20px; color: #ccc; }
.user-info {
text-align: center; margin: 20px 0; padding: 15px;
background: #2D2D2D; border-radius: 8px;
}
.score-box {
font-size: 22px; color: #FFEB3B; margin: 10px 0;
}
.vip-tag {
display: inline-block; padding: 5px 15px;
background: #FF5722; border-radius: 20px; font-size: 16px;
margin: 5px 0;
}
.question-box { background: #2D2D2D; padding: 20px; border-radius: 8px; margin: 20px 0; }
.chat-room, .live-room {
background: #2D2D2D; padding: 18px; border-radius: 8px;
margin: 12px 0; cursor: pointer; transition: background 0.2s;
border-left: 4px solid #1E88E5;
}
.live-room { border-left: 4px solid #F44336; }
.chat-room:hover, .live-room:hover { background: #383838; }
#chatArea, #liveArea {
height: 350px; border: 2px solid #444; border-radius: 8px;
padding: 15px; margin: 20px 0; overflow-y: auto;
display: flex; flex-direction: column; gap: 12px;
background: #252525;
}
.message {
padding: 12px 16px; border-radius: 8px; max-width: 80%;
word-wrap: break-word; /* 文字换行,避免溢出 */
}
.sent { background: #1E88E5; align-self: flex-end; }
.received { background: #383838; align-self: flex-start; }
.live-message { background: #F44336; align-self: flex-end; }
.msg-time {
font-size: 12px; color: #aaa; margin-top: 4px;
opacity: 0.7;
}
.tip { color: #aaa; font-size: 16px; text-align: center; margin: 15px 0; }
.empty-tip {
text-align: center; color: #aaa; padding: 50px 0;
font-size: 18px;
}
.room-number-tip {
color: #888; font-size: 14px; margin: -8px 0 12px;
}
/* 联系作者弹窗 */
.modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
z-index: 999; display: none;
}
.modal-content {
background: #1E1E1E; padding: 30px; border-radius: 12px;
width: 90%; max-width: 500px; text-align: center;
}
.modal-title {
font-size: 24px; color: #FFC107; margin-bottom: 20px;
}
.author-info, .vip-info {
font-size: 18px; margin: 15px 0; line-height: 1.8;
}
.email-box {
background: #2D2D2D; padding: 15px; border-radius: 8px;
margin: 20px 0; font-size: 18px; word-break: break-all;
}
.modal-buttons {
display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px;
}
文字传情,无障碍相通
密保问题登录
脑筋急转弯登录
按钮点击有震动,状态变化有提示音,支持屏幕阅读器
系统已生成唯一六位数,可手动修改(100000-999999)
// 全局状态管理
let currentUser = null; // 当前登录用户
let currentRoom = null; // 当前所在房间
let currentLive = null; // 当前所在直播间
const STORAGE_KEYS = {
USERS: 'chat_blind_users',
ROOMS: 'chat_blind_rooms',
MESSAGES: 'chat_blind_messages',
LIVES: 'chat_blind_lives',
LIVE_MESSAGES: 'chat_blind_live_messages',
CURRENT_USER: 'chat_blind_current_user'
};
// 初始化:加载所有数据+生成默认六位数房间号
window.onload = function() {
loadCurrentUser();
loadAllRooms();
loadLiveRooms();
initAudioContext();
initAccessibilityFeatures();
generateRandomRoomNumber();
};
// 1. 生成唯一六位数房间号
function generateRandomRoomNumber() {
const rooms = getStorage(STORAGE_KEYS.ROOMS);
const existingNumbers = rooms.map(room => room.roomNumber);
let randomNum;
do {
randomNum = Math.floor(100000 + Math.random() * 900000).toString(); // 100000-999999
} while (existingNumbers.includes(randomNum));
document.getElementById('roomNumber').value = randomNum;
}
// 2. 无障碍核心功能初始化
let audioContext;
function initAudioContext() {
try {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
} catch (e) {
console.error("Web Audio API不受支持,提示音功能无法使用", e);
alert("你的浏览器不支持Web Audio API,提示音功能无法使用");
}
}
// 按钮点击震动
function vibrate() {
if (navigator.vibrate) {
navigator.vibrate(60); // 震动60毫秒,适配触觉反馈
}
}
// QQ发送消息提示音(Web Audio API合成)
function playQQSendSound() {
if (!audioContext) return;
const osc1 = audioContext.createOscillator();
const osc2 = audioContext.createOscillator();
const gain = audioContext.createGain();
osc1.type = 'sine';
osc1.frequency.setValueAtTime(880, audioContext.currentTime);
osc1.frequency.exponentialRampToValueAtTime(440, audioContext.currentTime + 0.15);
osc2.type = 'sine';
osc2.frequency.setValueAtTime(1320, audioContext.currentTime + 0.05);
osc2.frequency.exponentialRampToValueAtTime(660, audioContext.currentTime + 0.2);
gain.gain.setValueAtTime(0.3, audioContext.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
osc1.connect(gain);
osc2.connect(gain);
gain.connect(audioContext.destination);
osc1.start();
osc2.start();
osc1.stop(audioContext.currentTime + 0.3);
osc2.stop(audioContext.currentTime + 0.3);
}
// 钉钉接收消息提示音(Web Audio API合成)
function playDingReceiveSound() {
if (!audioContext) return;
const osc = audioContext.createOscillator();
const gain = audioContext.createGain();
osc.type = 'square';
osc.frequency.setValueAtTime(660, audioContext.currentTime);
osc.frequency.setValueAtTime(1320, audioContext.currentTime + 0.08);
osc.frequency.setValueAtTime(1980, audioContext.currentTime + 0.16);
gain.gain.setValueAtTime(0.2, audioContext.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
osc.connect(gain);
gain.connect(audioContext.destination);
osc.start();
osc.stop(audioContext.currentTime + 0.3);
}
// 直播互动提示音(Web Audio API合成)
function playLiveSound() {
if (!audioContext) return;
const osc = audioContext.createOscillator();
const gain = audioContext.createGain();
osc.type = 'triangle';
osc.frequency.setValueAtTime(1500, audioContext.currentTime);
osc.frequency.exponentialRampToValueAtTime(750, audioContext.currentTime + 0.2);
gain.gain.setValueAtTime(0.2, audioContext.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
osc.connect(gain);
gain.connect(audioContext.destination);
osc.start();
osc.stop(audioContext.currentTime + 0.3);
}
// 通用操作提示音(叮)
function playTipSound() {
if (!audioContext) return;
const osc = audioContext.createOscillator();
const gain = audioContext.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(1000, audioContext.currentTime);
gain.gain.setValueAtTime(0.2, audioContext.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
osc.connect(gain);
gain.connect(audioContext.destination);
osc.start();
osc.stop(audioContext.currentTime + 0.1);
}
// 初始化无障碍功能(按钮震动+提示音)
function initAccessibilityFeatures() {
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', () => {
vibrate();
playTipSound();
});
});
// 输入框聚焦提示音
document.querySelectorAll('input, textarea, select').forEach(input => {
input.addEventListener('focus', () => {
playTipSound();
});
});
}
// 3. 本地存储工具函数
function getStorage(key) {
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : [];
}
function setStorage(key, data) {
localStorage.setItem(key, JSON.stringify(data));
}
// 4. 用户管理(含政绩、会员)
function saveUser(user) {
const users = getStorage(STORAGE_KEYS.USERS);
const existingIndex = users.findIndex(u => u.id === user.id);
if (existingIndex > -1) {
users[existingIndex] = user;
} else {
users.push(user);
}
setStorage(STORAGE_KEYS.USERS, users);
setStorage(STORAGE_KEYS.CURRENT_USER, [user]); // 数组存储,保持一致性
currentUser = user;
updateUserInfo(); // 更新界面显示
}
function loadCurrentUser() {
const users = getStorage(STORAGE_KEYS.CURRENT_USER);
if (users.length > 0) {
currentUser = users[0];
// 自动跳转到主界面
document.querySelector('.page.active').classList.remove('active');
document.getElementById('mainPage').classList.add('active');
updateUserInfo();
loadAllRooms();
loadLiveRooms();
}
}
// 更新用户信息(政绩+会员)显示
function updateUserInfo() {
const scoreEl = document.getElementById('userScore');
const vipTagEl = document.getElementById('userVipTag');
const vipModalScoreEl = document.getElementById('vipModalScore');
// 初始化政绩(实名认证用户153000,游客0)
if (currentUser.isVerified && currentUser.score === undefined) {
currentUser.score = 153000;
saveUser(currentUser);
}
// 显示政绩
scoreEl.textContent = currentUser.score || 0;
vipModalScoreEl.textContent = currentUser.score || 0;
// 显示会员身份
const vipType = currentUser.vipType || '普通用户';
vipTagEl.textContent = vipType;
vipTagEl.style.display = 'inline-block';
}
// 会员兑换
function exchangeVip(vipType, needScore) {
const currentScore = currentUser.score || 0;
if (currentScore >= needScore) {
// 扣除政绩,更新会员类型
currentUser.score = currentScore - needScore;
currentUser.vipType = vipType;
saveUser(currentUser);
playTipSound();
alert(`兑换${vipType}成功!`);
closeVipModal();
} else {
alert(`政绩不足,兑换${vipType}需要${needScore}政绩`);
}
}
function logout() {
localStorage.removeItem(STORAGE_KEYS.CURRENT_USER);
currentUser = null;
currentRoom = null;
currentLive = null;
playTipSound();
setTimeout(() => {
document.querySelector('.page.active').classList.remove('active');
document.getElementById('loginPage').classList.add('active');
}, 500);
}
// 5. 登录相关
function showLoginType(type) {
document.getElementById('secretLogin').style.display = 'none';
document.getElementById('riddleLogin').style.display = 'none';
document.getElementById(`${type}Login`).style.display = 'block';
}
// 密保问题登录
function submitSecret() {
const answer = document.getElementById('secretAnswer').value.trim();
if (!answer) {
alert('请输入你的性格特点');
return;
}
// 创建用户(ID用时间戳保证唯一性)
const user = {
id: Date.now().toString(),
type: 'secret',
secretAnswer: answer,
isVerified: false,
score: 0,
vipType: '普通用户'
};
saveUser(user);
playTipSound();
setTimeout(() => {
document.querySelector('.page.active').classList.remove('active');
document.getElementById('certPage').classList.add('active');
}, 500);
}
// 脑筋急转弯登录
function submitRiddle() {
const answer = document.getElementById('riddleAnswer').value.trim();
const correctAnswers = ['傻瓜', '傻瓜', 'shagua', 'SHAgua'];
if (!correctAnswers.includes(answer)) {
alert('答案错误,请重新输入');
return;
}
// 创建用户
const user = {
id: Date.now().toString(),
type: 'riddle',
riddleAnswer: answer,
isVerified: false,
score: 0,
vipType: '普通用户'
};
saveUser(user);
playTipSound();
setTimeout(() => {
document.querySelector('.page.active').classList.remove('active');
document.getElementById('certPage').classList.add('active');
}, 500);
}
// 游客登录
function gotoVisitor() {
const user = {
id: 'guest_' + Date.now().toString(),
type: 'guest',
isVerified: true,
score: 0,
vipType: '普通用户'
};
saveUser(user);
playTipSound();
setTimeout(() => {
document.querySelector('.page.active').classList.remove('active');
document.getElementById('mainPage').classList.add('active');
loadAllRooms();
loadLiveRooms();
}, 500);
}
// 提交实名认证
function submitCert() {
const name = document.getElementById('realName').value.trim();
const idCard = document.getElementById('idCard').value.trim();
const idReg = /^\d{17}[\dXx]$/;
if (!name) {
alert('请输入真实姓名');
return;
}
if (!idReg.test(idCard)) {
alert('请输入正确的18位身份证号码');
return;
}
// 更新用户认证状态+发放初始政绩153000
currentUser.realName = name;
currentUser.idCard = idCard;
currentUser.isVerified = true;
currentUser.score = 153000;
saveUser(currentUser);
playTipSound();
setTimeout(() => {
document.querySelector('.page.active').classList.remove('active');
document.getElementById('mainPage').classList.add('active');
loadAllRooms();
loadLiveRooms();
}, 500);
}
// 6. 房间管理(聊天房间)
function submitCreateRoom() {
const roomNumber = document.getElementById('roomNumber').value.trim();
const roomName = document.getElementById('roomName').value.trim();
const roomDesc = document.getElementById('roomDesc').value.trim();
const roomSize = document.getElementById('roomSize').value;
if (!roomName) {
alert('请输入房间名称');
return;
}
if (!roomNumber || roomNumber.length !== 6) {
alert('请输入有效的六位数房间号');
return;
}
// 检查房间号是否重复
const rooms = getStorage(STORAGE_KEYS.ROOMS);
const isDuplicate = rooms.some(room => room.roomNumber === roomNumber);
if (isDuplicate) {
alert('该房间号已被使用,请更换');
generateRandomRoomNumber();
return;
}
// 创建房间(ID唯一,关联创建者)
const room = {
id: Date.now().toString(),
roomNumber: roomNumber,
name: roomName,
desc: roomDesc || '无介绍',
maxSize: roomSize,
creatorId: currentUser.id,
memberIds: [currentUser.id], // 创建者自动加入
createTime: new Date().toLocaleString()
};
// 保存房间到本地存储
rooms.push(room);
setStorage(STORAGE_KEYS.ROOMS, rooms);
playTipSound();
setTimeout(() => {
currentRoom = room;
enterRoom(room);
}, 500);
}
// 加载所有房间
function loadAllRooms() {
const rooms = getStorage(STORAGE_KEYS.ROOMS);
const roomListEl = document.getElementById('roomList');
const emptyTip = document.getElementById('roomEmptyTip');
if (rooms.length === 0) {
emptyTip.style.display = 'block';
roomListEl.innerHTML = '';
return;
}
emptyTip.style.display = 'none';
roomListEl.innerHTML = rooms.map(room => `
${room.desc}
创建时间:${room.createTime} | 最大人数:${room.maxSize}人
`).join('');
}
// 加载我的房间(创建或加入的房间)
function loadMyRooms() {
const rooms = getStorage(STORAGE_KEYS.ROOMS);
const myRooms = rooms.filter(room => room.memberIds.includes(currentUser.id));
const roomListEl = document.getElementById('roomList');
const emptyTip = document.getElementById('roomEmptyTip');
if (myRooms.length === 0) {
emptyTip.style.display = 'block';
emptyTip.textContent = '你还没有加入任何房间~';
roomListEl.innerHTML = '';
return;
}
emptyTip.style.display = 'none';
roomListEl.innerHTML = myRooms.map(room => `
${room.desc}
创建时间:${room.createTime} | 最大人数:${room.maxSize}人
`).join('');
}
// 进入聊天房间
function enterRoom(room) {
currentRoom = room;
// 检查是否已加入房间,未加入则添加
const rooms = getStorage(STORAGE_KEYS.ROOMS);
const roomIndex = rooms.findIndex(r => r.id === room.id);
if (roomIndex > -1 && !rooms[roomIndex].memberIds.includes(currentUser.id)) {
rooms[roomIndex].memberIds.push(currentUser.id);
setStorage(STORAGE_KEYS.ROOMS, rooms);
}
// 更新界面
document.getElementById('chatRoomTitle').textContent = room.name;
document.getElementById('roomNumberDisplay').textContent = `房间号:${room.roomNumber}`;
document.querySelector('.page.active').classList.remove('active');
document.getElementById('chatPage').classList.add('active');
// 加载历史消息
loadRoomMessages();
}
// 7. 直播管理
function submitCreateLive() {
const liveName = document.getElementById('liveName').value.trim();
const liveDesc = document.getElementById('liveDesc').value.trim();
if (!liveName) {
alert('请输入直播间名称');
return;
}
// 创建直播间(ID唯一,关联创建者)
const live = {
id: Date.now().toString(),
name: liveName,
desc: liveDesc || '无介绍',
creatorId: currentUser.id,
creatorName: currentUser.realName || '用户',
createTime: new Date().toLocaleString(),
isActive: true
};
// 保存直播间到本地存储
const lives = getStorage(STORAGE_KEYS.LIVES);
lives.push(live);
setStorage(STORAGE_KEYS.LIVES, lives);
playTipSound();
setTimeout(() => {
currentLive = live;
enterLive(live);
}, 500);
}
// 加载所有直播间
function loadLiveRooms() {
const lives = getStorage(STORAGE_KEYS.LIVES);
const roomListEl = document.getElementById('roomList');
const emptyTip = document.getElementById('roomEmptyTip');
if (lives.length === 0) {
emptyTip.style.display = 'block';
emptyTip.textContent = '暂无直播间,快去创建第一个直播间吧~';
roomListEl.innerHTML = '';
return;
}
emptyTip.style.display = 'none';
roomListEl.innerHTML = lives.map(live => `
${live.desc}
创建者:${live.creatorName} | 创建时间:${live.createTime}
`).join('');
}
// 进入直播间
function enterLive(live) {
currentLive = live;
// 更新界面
document.getElementById('liveRoomTitle').textContent = live.name;
document.getElementById('liveDescDisplay').textContent = live.desc;
document.querySelector('.page.active').classList.remove('active');
document.getElementById('livePage').classList.add('active');
// 加载直播历史互动消息
loadLiveMessages();
// 模拟欢迎消息
setTimeout(() => {
addLiveMsg(`欢迎进入${live.name}直播间!`, '系统通知');
}, 800);
}
// 8. 聊天消息功能
function loadRoomMessages() {
const allMessages = getStorage(STORAGE_KEYS.MESSAGES);
const roomMessages = allMessages.filter(msg => msg.roomId === currentRoom.id)
.sort((a, b) => new Date(a.time) - new Date(b.time));
const chatArea = document.getElementById('chatArea');
chatArea.innerHTML = '';
if (roomMessages.length === 0) {
chatArea.innerHTML = '
return;
}
// 渲染消息
roomMessages.forEach(msg => {
const isSentByMe = msg.senderId === currentUser.id;
const msgEl = document.createElement('div');
msgEl.className = `message ${isSentByMe ? 'sent' : 'received'}`;
msgEl.innerHTML = `
${msg.content}
`;
chatArea.appendChild(msgEl);
});
// 滚动到底部
chatArea.scrollTop = chatArea.scrollHeight;
}
// 发送聊天消息
function sendMsg() {
const msgContent = document.getElementById('msgInput').value.trim();
if (!msgContent || !currentRoom) return;
// 创建消息
const message = {
id: Date.now().toString(),
roomId: currentRoom.id,
senderId: currentUser.id,
senderName: currentUser.realName || (currentUser.type === 'guest' ? '游客' : '用户'),
content: msgContent,
time: new Date().toLocaleString()
};
// 保存消息
const allMessages = getStorage(STORAGE_KEYS.MESSAGES);
allMessages.push(message);
setStorage(STORAGE_KEYS.MESSAGES, allMessages);
// 渲染消息
const chatArea = document.getElementById('chatArea');
const msgEl = document.createElement('div');
msgEl.className = 'message sent';
msgEl.innerHTML = `
${msgContent}
`;
chatArea.appendChild(msgEl);
chatArea.scrollTop = chatArea.scrollHeight;
// 清空输入框+播放QQ发送提示音
document.getElementById('msgInput').value = '';
playQQSendSound();
// 模拟对方回复(5秒后)
setTimeout(() => {
const replies = [
'收到你的消息啦!',
'哈哈,我也是这么认为的~',
'谢谢你的分享!',
'能具体说说吗?',
'一起交流学习呀!'
];
const randomReply = replies[Math.floor(Math.random() * replies.length)];
const replyMsg = {
id: Date.now().toString(),
roomId: currentRoom.id,
senderId: 'system_' + Date.now().toString(),
senderName: '系统模拟用户',
content: randomReply,
time: new Date().toLocaleString()
};
allMessages.push(replyMsg);
setStorage(STORAGE_KEYS.MESSAGES, allMessages);
const replyEl = document.createElement('div');
replyEl.className = 'message received';
replyEl.innerHTML = `
${randomReply}
`;
chatArea.appendChild(replyEl);
chatArea.scrollTop = chatArea.scrollHeight;
playDingReceiveSound();
}, 5000);
}
// 9. 直播互动功能
function loadLiveMessages() {
const allLiveMsg = getStorage(STORAGE_KEYS.LIVE_MESSAGES);
const liveMsg = allLiveMsg.filter(msg => msg.liveId === currentLive.id)
.sort((a, b) => new Date(a.time) - new Date(b.time));
const liveArea = document.getElementById('liveArea');
liveArea.innerHTML = '';
if (liveMsg.length === 0) {
liveArea.innerHTML = '
return;
}
// 渲染互动消息
liveMsg.forEach(msg => {
const isSentByMe = msg.senderId === currentUser.id;
const msgEl = document.createElement('div');
msgEl.className = `message ${isSentByMe ? 'live-message' : 'received'}`;
msgEl.innerHTML = `
${msg.content}
`;
liveArea.appendChild(msgEl);
});
// 滚动到底部
liveArea.scrollTop = liveArea.scrollHeight;
}
// 发送直播互动消息
function sendLiveMsg() {
const msgContent = document.getElementById('liveMsgInput').value.trim();
if (!msgContent || !currentLive) return;
// 创建互动消息
const message = {
id: Date.now().toString(),
liveId: currentLive.id,
senderId: currentUser.id,
senderName: currentUser.realName || (currentUser.type === 'guest' ? '游客' : '用户'),
content: msgContent,
time: new Date().toLocaleString()
};
// 保存消息
const allLiveMsg = getStorage(STORAGE_KEYS.LIVE_MESSAGES);
allLiveMsg.push(message);
setStorage(STORAGE_KEYS.LIVE_MESSAGES, allLiveMsg);
// 渲染消息
addLiveMsg(msgContent, message.senderName, true);
// 清空输入框+播放直播提示音
document.getElementById('liveMsgInput').value = '';
playLiveSound();
// 模拟主播回复(6秒后)
if (currentLive.creatorId === currentUser.id) return; // 自己创建的直播间不模拟回复
setTimeout(() => {
const replies = [
'感谢互动!',
'这个问题问得好~',
'欢迎大家积极发言!',
'谢谢支持!',
'我们继续交流~'
];
const randomReply = replies[Math.floor(Math.random() * replies.length)];
addLiveMsg(randomReply, currentLive.creatorName);
}, 6000);
}
// 添加直播消息到界面
function addLiveMsg(content, senderName, isSelf = false) {
const liveArea = document.getElementById('liveArea');
const msgEl = document.createElement('div');
msgEl.className = `message ${isSelf ? 'live-message' : 'received'}`;
const time = new Date().toLocaleString();
msgEl.innerHTML = `
${content}
`;
liveArea.appendChild(msgEl);
liveArea.scrollTop = liveArea.scrollHeight;
if (!isSelf) playLiveSound();
}
// 10. 弹窗管理
function openContactModal() {
document.getElementById('contactModal').style.display = 'flex';
}
function closeContactModal() {
document.getElementById('contactModal').style.display = 'none';
}
function openVipModal() {
document.getElementById('vipModalScore').textContent = currentUser.score || 0;
document.getElementById('vipModal').style.display = 'flex';
}
function closeVipModal() {
document.getElementById('vipModal').style.display = 'none';
}
// 复制邮箱
function copyEmail() {
const email = document.getElementById('authorEmail').textContent;
navigator.clipboard.writeText(email).then(() => {
alert('邮箱复制成功!');
}).catch(err => {
alert('复制失败,请手动复制');
console.error('复制失败:', err);
});
}
// 11. 页面跳转辅助函数
function showCreateRoom() {
generateRandomRoomNumber(); // 重新生成房间号,避免重复
document.querySelector('.page.active').classList.remove('active');
document.getElementById('createRoomPage').classList.add('active');
}
function showCreateLive() {
document.querySelector('.page.active').classList.remove('active');
document.getElementById('createLivePage').classList.add('active');
}
function backToLogin() {
document.querySelector('.page.active').classList.remove('active');
document.getElementById('loginPage').classList.add('active');
}
function backToMain() {
document.querySelector('.page.active').classList.remove('active');
document.getElementById('mainPage').classList.add('active');
loadAllRooms();
loadLiveRooms();
}
因为这是纯前端本地版啊
他就是完全离线可用的,不需要联网
那就是一个页面展示,没有社交功能啊。需要社交功能的话,需要有一台服务器。
都不知道怎么给他搞成安装包,光有个代码,你让一般人怎么整
要不你把那个弄安装包的软件给我,我来弄一个安装包
这个软件,我第一次弄。我通过预览环境的方式预览了一下,觉得还很好用的