大王叫我来巡山
本帖最后由 马黑黑 于 2022-9-1 07:53 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/Pic/81/dw3.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; z-index: 1; }
#lrc { position: absolute; left: 370px; top: 40px; font: bold 1.5em sans-serif; color: #306052; text-shadow: 1px 1px 2px #000; letter-spacing: 2px; }
#mplayer { position: absolute; left: 370px; top: 80px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 28px; height: 28px; background: #9AB38B; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnwrap:hover { background: #418147; }
#btnplay { width: 16px; height: 16px; background: gold; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent gold; display: none; }
#prog { width: 200px; height: 2px; background: #CDD8DD linear-gradient(90deg,red,olive,red) no-repeat ; background-size: 1px 2px; position: relative; cursor: pointer; }
#prog::before { position: absolute; top: -5px; height: 12px; width: 200px; content: ''; }
#tmsg { left: 260px; bottom: 16px; color: #306052; }
.ball { position: absolute; left: -10px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: red; animation: move 40s var(--ss) linear infinite; }
@keyframes move {
0%, 100% { left: 0; top: 0; }
25% { left: calc(100% - 10px); top: 0; }
50% { left: calc(100% - 10px); top: calc(100% - 10px); }
75% { left: 0; top: calc(100% - 10px); }
}
</style>
<div id="papa">
<span id="lrc">lrc歌词</span>
<span id="mplayer">
<span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span>
<span id="prog"></span>
<span id="tmsg">00:00 | 00:00</span>
</span>
</div>
<script>
let lrcAr = [
['0.00','大王叫我来巡山'],
['4.08','作词：赵英俊'],
['5.10','作曲：赵英俊'],
['25.02','太阳对我眨眼睛'],
['28.07','鸟儿唱歌给我听'],
['32.08','我是一个努力干活儿'],
['36.03','还不粘人的小妖精'],
['40.03','别问我从哪里来'],
['44.01','也别问我到哪里去'],
['47.09','我要摘下最美的花儿'],
['51.08','献给我的小公举'],
['57.04','大王叫我来巡山'],
['61.02','我把人间转一转'],
['65.01','打起我的鼓敲起我的锣'],
['68.08','生活充满节奏感'],
['72.06','大王叫我来巡山'],
['76.04','抓个和尚做晚餐'],
['80.01','这山涧的水无比的甜'],
['84.01','不羡鸳鸯不羡仙'],
['87.07','太阳对我眨眼睛'],
['91.07','鸟儿唱歌给我听'],
['95.08','我是一个努力干活儿'],
['99.01','还不粘人的小妖精'],
['103.03','别问我从哪里来'],
['106.09','也别问我到哪去'],
['110.10','我要摘下最美的花儿'],
['114.05','献给我的小公举'],
['120.04','大王叫我来巡山'],
['124.02','我把人间转一转'],
['127.09','打起我的鼓敲起我的锣'],
['131.08','生活充满节奏感'],
['135.06','大王叫我来巡山'],
['139.03','抓个和尚做晚餐'],
['143.00','这山涧的水无比的甜'],
['146.09','不羡鸳鸯不羡仙'],
['165.09','大王 大王'],
['167.08','叫我来巡山'],
['169.09','大王大王叫我来巡山'],
['173.06','大王大王叫我来巡山'],
['177.06','大王大王他叫我来巡山'],
['181.03','大王叫我来巡山'],
['185.02','我把人间转一转'],
['188.09','打起我的鼓敲起我的锣'],
['192.07','生活充满节奏感'],
['196.05','大王叫我来巡山'],
['200.03','抓个和尚做晚餐'],
['204.00','这山涧的水无比的甜'],
['207.10','不羡鸳鸯不羡仙']
];
let aud = new Audio(), lw = prog.offsetWidth;
aud.src = 'https://music.163.com/song/media/outer/url?id=36492807.mp3';
aud.autoplay = true;
aud.loop = true;
Array.from({length: 60}).forEach((item,key) => {
item = document.createElement('span');
item.className = 'ball';
item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(-6)};`;
papa.appendChild(item);
});
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script> 巡山珠子代码：
① CSS ——
.ball { position: absolute; left: -10px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: red; animation: move 40s var(--ss) linear infinite; }
@keyframes move {
0%, 100% { left: 0; top: 0; }
25% { left: calc(100% - 10px); top: 0; }
50% { left: calc(100% - 10px); top: calc(100% - 10px); }
75% { left: 0; top: calc(100% - 10px); }
}
</style>
② JS ——
Array.from({length: 60}).forEach((item,key) => {
item = document.createElement('span');
item.className = 'ball';
item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(-6)};`;
papa.appendChild(item);
}); 本帖最后由 马黑黑 于 2022-9-1 07:44 编辑
代码<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/Pic/81/dw3.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; }
#lrc { position: absolute; left: 370px; top: 40px; font: bold 1.5em sans-serif; color: #306052; text-shadow: 1px 1px 2px #000; letter-spacing: 2px; }
#mplayer { position: absolute; left: 370px; top: 80px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 28px; height: 28px; background: #9AB38B; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnwrap:hover { background: #418147; }
#btnplay { width: 16px; height: 16px; background: gold; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent gold; display: none; }
#prog { width: 200px; height: 2px; background: #CDD8DD linear-gradient(90deg,red,olive,red) no-repeat ; background-size: 1px 2px; position: relative; cursor: pointer; }
#prog::before { position: absolute; top: -5px; height: 12px; width: 200px; content: ''; }
#tmsg { left: 260px; bottom: 16px; color: #306052; }
.ball { position: absolute; left: -10px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: red; animation: move 40s var(--ss) linear infinite; }
@keyframes move {
0%, 100% { left: 0; top: 0; }
25% { left: calc(100% - 10px); top: 0; }
50% { left: calc(100% - 10px); top: calc(100% - 10px); }
75% { left: 0; top: calc(100% - 10px); }
}
</style>
<div id="papa">
<span id="lrc">lrc歌词</span>
<span id="mplayer">
<span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span>
<span id="prog"></span>
<span id="tmsg">00:00 | 00:00</span>
</span>
</div>
<script>
let lrcAr = [
['0.00','大王叫我来巡山'],
['4.08','作词：赵英俊'],
['5.10','作曲：赵英俊'],
['25.02','太阳对我眨眼睛'],
['28.07','鸟儿唱歌给我听'],
['32.08','我是一个努力干活儿'],
['36.03','还不粘人的小妖精'],
['40.03','别问我从哪里来'],
['44.01','也别问我到哪里去'],
['47.09','我要摘下最美的花儿'],
['51.08','献给我的小公举'],
['57.04','大王叫我来巡山'],
['61.02','我把人间转一转'],
['65.01','打起我的鼓敲起我的锣'],
['68.08','生活充满节奏感'],
['72.06','大王叫我来巡山'],
['76.04','抓个和尚做晚餐'],
['80.01','这山涧的水无比的甜'],
['84.01','不羡鸳鸯不羡仙'],
['87.07','太阳对我眨眼睛'],
['91.07','鸟儿唱歌给我听'],
['95.08','我是一个努力干活儿'],
['99.01','还不粘人的小妖精'],
['103.03','别问我从哪里来'],
['106.09','也别问我到哪去'],
['110.10','我要摘下最美的花儿'],
['114.05','献给我的小公举'],
['120.04','大王叫我来巡山'],
['124.02','我把人间转一转'],
['127.09','打起我的鼓敲起我的锣'],
['131.08','生活充满节奏感'],
['135.06','大王叫我来巡山'],
['139.03','抓个和尚做晚餐'],
['143.00','这山涧的水无比的甜'],
['146.09','不羡鸳鸯不羡仙'],
['165.09','大王 大王'],
['167.08','叫我来巡山'],
['169.09','大王大王叫我来巡山'],
['173.06','大王大王叫我来巡山'],
['177.06','大王大王他叫我来巡山'],
['181.03','大王叫我来巡山'],
['185.02','我把人间转一转'],
['188.09','打起我的鼓敲起我的锣'],
['192.07','生活充满节奏感'],
['196.05','大王叫我来巡山'],
['200.03','抓个和尚做晚餐'],
['204.00','这山涧的水无比的甜'],
['207.10','不羡鸳鸯不羡仙']
];
let aud = new Audio(), lw = prog.offsetWidth;
aud.src = 'https://music.163.com/song/media/outer/url?id=36492807.mp3';
aud.autoplay = true;
aud.loop = true;
Array.from({length: 60}).forEach((item,key) => {
item = document.createElement('span');
item.className = 'ball';
item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(-6)};`;
papa.appendChild(item);
});
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
这么多彩珠，太有趣了{:4_199:} 小珠子们整装待发，一起开始巡山了{:4_205:} 可以再多点或者距离拉开点，让它们首尾相接也不错{:4_173:} 黑黑总玩这技术含量高的。。。。{:5_116:} 图美、曲好，特别是那游动的彩珠真漂亮。无与伦比！！！ 好活跃的帖子。好玩好玩。 红影 发表于 2022-9-1 09:18
这么多彩珠，太有趣了
太多了老旧电脑的风扇会增速转动{:4_173:} 东篱闲人 发表于 2022-9-1 09:55
黑黑总玩这技术含量高的。。。。
几个珠子而已，没啥含量 红影 发表于 2022-9-1 09:22
小珠子们整装待发，一起开始巡山了
珠子就是小妖精{:4_173:} 红影 发表于 2022-9-1 09:23
可以再多点或者距离拉开点，让它们首尾相接也不错
对的，但巡逻队伍一般不会首尾相接。你看大鹅对付小乌龟的“打反击”，也就是让出几个村子，小乌龟“得胜”之后都纷纷奔赴黄泉。这叫“网开一面”的战术，巡逻也是如此，逻辑上不会采用闭合手法。 加林森 发表于 2022-9-1 11:45
好活跃的帖子。好玩好玩。
符合题意{:4_173:} 梦油 发表于 2022-9-1 10:08
图美、曲好，特别是那游动的彩珠真漂亮。无与伦比！！！
“小妖精”都是漂漂亮亮的{:4_170:} 马黑黑 发表于 2022-9-1 12:14
符合题意
就是，特别好玩。 加林森 发表于 2022-9-1 12:15
就是，特别好玩。
合适玩玩之用 马黑黑 发表于 2022-9-1 12:16
合适玩玩之用
我也去试一试。 加林森 发表于 2022-9-1 12:18
我也去试一试。
嗯，加入自己的创意，尽量避免100%套用 马黑黑 发表于 2022-9-1 12:19
嗯，加入自己的创意，尽量避免100%套用
好的。