玩弹幕，发送美好
本帖最后由 杨帆 于 2026-2-2 19:17 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>玩弹幕，把美好发送给他（她）</title>
<link rel="preload" href="https://www.helloimg.com/i/2026/02/01/697f55ac17946.png" as="image" crossorigin>
</head>
<body>
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
.papa { margin: 130px 0 20px calc(50% - 790px); background: url('https://pic.imgdb.cn/item/6747df64d0e0a243d4d83f53.png') no-repeat center/cover; width: 1400px; height: 760px; box-shadow: 3px 3px 6px gray; overflow: hidden; border: 8px solid #c9b88f; border-radius: 4px; position: relative; user-select: none; z-index: 1;--state:running; }
#mydiv { position: absolute; top:8%; right:52px; z-index:10; width: 60px; height:60px; display: grid; place-items: center; filter: drop-shadow(0 0 1px #8A2BE2); animation: rot 5s linear infinite var(--state); transition:opacity 0.3s;opacity: 0; cursor: pointer;}
#mydiv:hover { animation-play-state:paused !important; }
#mydiv > span { position: absolute; width: 65%; height: 65%; background: linear-gradient(75deg, #F5F5F5 1%, #E63946, #C1121F, #6B0F1A, #3D070B); border-radius: 100% 0; transform: rotate(var(--deg)) translate(50%,-50%); }
#mydiv > span:nth-of-type(1) { --deg: 0deg; }
#mydiv > span:nth-of-type(2) { --deg: 72deg; }
#mydiv > span:nth-of-type(3) { --deg: 144deg; }
#mydiv > span:nth-of-type(4) { --deg: 216deg; }
#mydiv > span:nth-of-type(5) { --deg: 288deg; }
#mydiv:hover { filter: unset !important; }
@keyframes rot { to { transform: rotate(1turn); } }
#fullscreen { position: absolute; top:5%; left:5%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 1.8em华文新魏; opacity: 0; cursor: pointer; z-index: 10;}
#fullscreenon{position: absolute;width: 42px;height: 42px;background: url('https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png') no-repeat center/cover;opacity: 1;}
#fullscreenoff {position: absolute;width: 42px;height: 42px;cursor: pointer;opacity: 1;background: url('https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png') no-repeat center/cover; }
#papa:hover #fullscreen, #papa:hover #mydiv, #papa:hover .status-display { transition: .7s; opacity: .99;}
.status-display { position: absolute; z-index: 1; font: 20px/1.5 menu,"Helvetica Neue", Helvetica, sans-serif; background: linear-gradient(90deg, #ff0000, #ff0000, #ff4500, #ffd700, #00ff7f, #1e90ff, #9370db, #ff69b4); background-size: 300% 150%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow 8s ease infinite var(--state); text-shadow: 0 1px 2px rgba(0,0,0,0.2);right: -20px;top: 20%;transform: translateX(0);min-width: 180px;text-align: center;white-space: nowrap;padding: 6px 12px; border-radius: 20px; background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(5px); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0);opacity: 0; }
.status-display:hover { transform:scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.5); }
@keyframes rainbow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.carousel-img { width: 100%; height: 100%; display: block;z-index: 2; }
.barrage-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 6; }
.barrage-item { position: absolute; font-size: 25px;font-family:"Ma Shan Zheng","SimHei",cursive; user-select:none;font-weight: bold;white-space: nowrap; pointer-events: none; z-index: 6; padding: 5px 10px; border-radius: 20px; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(1px); left: 100%; animation: barrageFly linear forwards; }
@keyframes barrageFly { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-200vw); opacity: 0.8; } }
.rainbow-text { background: linear-gradient(90deg,#ff0000,#ff8000,#ffff00,#00ff00,#0080ff,#0000ff,#8000ff,#ff00ff); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 400% 100%; animation: rainbowFlow 3s linear infinite; }
@keyframes rainbowFlow { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }
.barrage-send { position: absolute; bottom: 0; width: 100%; height: 80px; line-height: 80px; background-color: rgba(10,10,10,0); text-align: center; z-index: 25; border-top: 0px solid #ffd700; }
.barrage-input-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 700px; max-width: 90%; font-size: 0; }
.barrage-input { float: left; width: calc(100% - 120px); height: 45px; border: none; border-radius: 8px 0 0 8px; padding: 0 15px; font-size: 18px; background-color: rgba(255,255,255,0.9); color: #333; overflow-x: auto; white-space: nowrap; max-width: 100%; box-sizing: border-box; }
.barrage-input::-webkit-scrollbar { height: 4px; }
.barrage-input::-webkit-scrollbar-track { background: rgba(255,255,255,0.2); border-radius: 2px; }
.barrage-input::-webkit-scrollbar-thumb { background: #ffd700; border-radius: 2px; }
.barrage-btn { float: left; width: 120px; height: 45px; background: linear-gradient(to bottom,#ff3030,#b22222); line-height: 45px; font-size: 18px; color: #ffd700; cursor: pointer; border: none; border-radius: 0 8px 8px 0; font-weight: bold; transition: all 0.3s; }
.barrage-btn:hover { background: linear-gradient(to bottom,#ff4500,#8b0000); transform: scale(1.05); }
.speed-control { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #ffd700; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.speed-slider { width: 100px; }
.barrage-counter { position: absolute; left: 20px; top: 55%; transform: translateY(-50%); color: #ffd700; font-size: 15px; background: rgba(0,0,0,0.1); width: 100px; height: 40px; border-radius: 5px; display: grid; place-items: center; line-height: 40px; }
@media (max-width:768px) { .barrage-item { font-size: 18px; } .barrage-input-container { width: 90%; } .barrage-input { width: calc(100% - 100px); height: 40px; font-size: 16px; padding: 0 10px; } .barrage-btn { width: 100px; height: 40px; line-height: 40px; font-size: 16px; } .speed-control, .barrage-counter { display: none; } }
</style>
<div class="papa" id="papa">
<audio id="aud" src="https://i.uik.cc/view.php/4070a0476705e014083f2b61ab88ad54.mp3" loop autoplay></audio>
<div class="status-display" id="statusDisplay">请点击按钮开始播放</div>
<div id="mydiv">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span id="fullscreen" title="全屏/退出"><div id="fullscreenon"></div><div id="fullscreenoff"></div></span>
<img src="https://www.helloimg.com/i/2026/02/01/697f5ed0af0bc.png" alt="" class="carousel-img" id="carousel-main">
<div class="barrage-container" id="barrageContainer"></div>
<div class="barrage-send">
<div class="barrage-counter" id="barrageCounter">弹幕计数: 0</div>
<div class="barrage-input-container">
<input type="text" class="barrage-input" placeholder="输入美好祝福，发送给他（她）……" id="barrageInput" maxlength="100">
<button class="barrage-btn" id="barrageBtn">发送祝福</button>
</div>
<div class="speed-control">
<span>弹幕速度:</span>
<input type="range" min="5" max="30" value="15" class="speed-slider" id="speedSlider">
</div>
</div>
</div>
<script>
const papa = document.getElementById('papa');
const statusDisplay = document.getElementById('statusDisplay');
const aud = document.getElementById('aud');
const mydiv = document.getElementById('mydiv');
let defaultBarrageTimeout = null;
let defaultBarrageInterval = null;
function formatTime(seconds) {
const absSeconds = Math.abs(seconds);
const mins = Math.floor(absSeconds / 60);
const secs = Math.floor(absSeconds % 60);
const sign = seconds < 0 ? '-' : '';
return `${sign}${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
aud.addEventListener('timeupdate', () => {
if (!aud.paused && !isNaN(aud.duration)) {
const currentTime = aud.currentTime;
const remainingTime = aud.duration - currentTime;
statusDisplay.textContent = `播放中: ${formatTime(-remainingTime)}`;
}
});
function clearAllBarrages() {
const barrageContainer = document.getElementById('barrageContainer');
while (barrageContainer.firstChild) {
barrageContainer.removeChild(barrageContainer.firstChild);
}
}
function setBarrageAnimationState(isPaused) {
const allBarrages = document.querySelectorAll('.barrage-item');
allBarrages.forEach(barrage => {
barrage.style.animationPlayState = isPaused ? 'paused' : 'running';
});
}
var mState = () => {
mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mydiv.title = aud.paused ? '播放' : '暂停';
if (isNaN(aud.duration)) {
statusDisplay.textContent = '音频加载中...';
} else {
if (aud.paused) {
statusDisplay.textContent = '已暂停';
clearAllBarrages();
setBarrageAnimationState(true);
clearTimeout(defaultBarrageTimeout);
clearInterval(defaultBarrageInterval);
} else {
statusDisplay.textContent = '播放中';
setBarrageAnimationState(false);
initDefaultBarrages();
}
}
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
mState();
const carouselMain = document.getElementById('carousel-main');
const carousel1="https://www.helloimg.com/i/2026/02/01/697f5ed0af0bc.png";
const carousel2 ="https://www.helloimg.com/i/2026/02/01/697f55ac17946.png";
carouselMain.addEventListener('mouseover', () => {
carouselMain.src = carousel2;
});
carouselMain.addEventListener('mouseout', () => {
carouselMain.src = carousel1;
});
var barrageContainer = document.getElementById('barrageContainer');
var barrageInput = document.getElementById('barrageInput');
var barrageBtn = document.getElementById('barrageBtn');
var speedSlider = document.getElementById('speedSlider');
var barrageCounter = document.getElementById('barrageCounter');
var barrageSpeed = 15;
var lastSendTime = 0;
var sendInterval = 1000;
var barrageCount = 0;
var defaultBarrages = [
"新年快乐，万事如意",
"马到成功，马跃新程",
"马年大吉，龙马精神",
"阖家幸福，幸福安康",
"恭喜发财，红包拿来",
"福到运到，好运连连",
"辞旧迎新，喜迎新春",
"身体健康，万事顺心",
"财源广进，步步高升",
"吉祥如意，心想事成"
];
function getRandomColor() {
var colors = [
'#ff0000', '#ff3333', '#ff1493', '#ff0033',
'#ff4500', '#ff5500', '#ff8000', '#ff9900',
'#ffd700', '#ffff00', '#ffee00', '#ffff33'
];
return colors;
}
function createBarrage(text, isRainbow, isUser) {
var barrage = document.createElement('div');
barrage.className = 'barrage-item';
var top = 10 + Math.random() * 60;
barrage.style.top = top + '%';
var duration = barrageSpeed + Math.random() * 5;
barrage.style.animationDuration = duration + 's';
barrage.style.animationPlayState = aud.paused ? 'paused' : 'running';
if (isRainbow) {
barrage.classList.add('rainbow-text');
} else {
barrage.style.color = isUser ? '#ffd700' : getRandomColor();
if (isUser) {
barrage.style.fontWeight = 'bolder';
barrage.style.textShadow = '0 0 10px #ffd700, 0 0 20px #ff4500';
barrage.style.backgroundColor = 'rgba(205, 32, 32, 0.6)';
}
}
barrage.textContent = text;
barrageContainer.appendChild(barrage);
if (isUser) {
barrageCount++;
barrageCounter.textContent = '弹幕计数: ' + barrageCount;
}
setTimeout(function() {
if (barrage.parentNode) {
barrage.parentNode.removeChild(barrage);
}
}, duration * 1000 + 1000);
}
function sendBarrage() {
var now = Date.now();
if (now - lastSendTime < sendInterval) {
barrageBtn.textContent = '太快了';
setTimeout(function() {
barrageBtn.textContent = '发送祝福';
}, 500);
return;
}
var text = barrageInput.value.trim();
if (!text) {
alert('请输入祝福语！');
return;
}
if (text.length > 100) {
alert('祝福语不能超过100个字！');
return;
}
createBarrage(text, false, true);
barrageInput.value = '';
lastSendTime = now;
barrageBtn.textContent = '已发送！';
setTimeout(function() {
barrageBtn.textContent = '发送祝福';
}, 1000);
console.log('用户弹幕发送成功: "' + text + '"');
}
barrageBtn.addEventListener('click', sendBarrage);
barrageInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendBarrage();
}
});
barrageInput.addEventListener('input', function() {
this.scrollLeft = this.scrollWidth;
});
speedSlider.addEventListener('input', function() {
barrageSpeed = 35 - this.value;
var barrages = document.querySelectorAll('.barrage-item');
barrages.forEach(function(barrage) {
barrage.style.animationDuration = (barrageSpeed + Math.random() * 5) + 's';
});
});
function initDefaultBarrages() {
clearTimeout(defaultBarrageTimeout);
clearInterval(defaultBarrageInterval);
defaultBarrageTimeout = setTimeout(function() {
defaultBarrages.forEach(function(text, index) {
setTimeout(function() {
createBarrage(text, index % 3 === 0);
}, index * 2000);
});
}, 3000);
defaultBarrageInterval = setInterval(function() {
if (barrageContainer.children.length < 15 && !aud.paused) {
var randomTexts = [
"春节快乐", "恭喜发财", "万事如意",
"阖家欢乐", "身体健康", "幸福美满",
"福星高照", "吉祥如意", "年年有余",
"新春大吉", "喜气洋洋", "金玉满堂",
"龙马精神", "福寿安康", "笑口常开",
"心想事成", "好运连连", "财源滚滚"
];
var randomText = randomTexts;
createBarrage(randomText, Math.random() > 0.7);
}
}, 3000);
}
initDefaultBarrages();
let fs = true;
fullscreen.onclick = () => {
fs ? (papa.requestFullscreen(), fullscreenon.style.opacity = '0', fullscreenoff.style.opacity = '1') : (document.exitFullscreen(), fullscreenon.style.opacity = '1', fullscreenoff.style.opacity = '0');
fs = !fs;
}
</script>
</body>
</html> 有意思，杨帆也玩弹幕了，这个很好玩呢。
欣赏杨帆好帖{:4_187:} 杨帆这帖很赞，也很好玩。{:4_187:} 谢谢杨帆精彩分享！祝精彩无限！{:4_204:} 梦江南 发表于 2026-2-2 09:30
杨帆这帖很赞，也很好玩。
问好江南，谢谢鼓励，祝玩得开心{:4_204:} 红影 发表于 2026-2-1 22:20
有意思，杨帆也玩弹幕了，这个很好玩呢。
欣赏杨帆好帖
问好影子，谢谢鼓励，祝玩得开心{:4_204:} 很精美的制作，很有趣，好玩~~{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-2-2 13:23
很精美的制作，很有趣，好玩~~
问好枫丹，谢谢鼓励，祝玩得开心{:4_204:}
页:
[1]