大王叫我来巡山

马黑黑

lrc歌词 00:00 | 00:00

马黑黑

巡山珠子代码：

① 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);
});

马黑黑

代码

1. <style>
   
2. #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; }
   
3. #lrc { position: absolute; left: 370px; top: 40px; font: bold 1.5em sans-serif; color: #306052; text-shadow: 1px 1px 2px #000; letter-spacing: 2px; }
   
4. #mplayer { position: absolute; left: 370px; top: 80px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
   
5. #btnwrap { width: 28px; height: 28px; background: #9AB38B; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
   
6. #btnwrap:hover { background: #418147; }
   
7. #btnplay { width: 16px; height: 16px; background: gold; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
   
8. #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent gold; display: none; }
   
9. #prog { width: 200px; height: 2px; background: #CDD8DD linear-gradient(90deg,red,olive,red) no-repeat ; background-size: 1px 2px; position: relative; cursor: pointer; }
   
10. #prog::before { position: absolute; top: -5px; height: 12px; width: 200px; content: ''; }
    
11. #tmsg { left: 260px; bottom: 16px; color: #306052; }
    
12. .ball { position: absolute; left: -10px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: red; animation: move 40s var(--ss) linear infinite; }
    
13. @keyframes move {
    
14.         0%, 100% { left: 0; top: 0; }
    
15.         25% { left: calc(100% - 10px); top: 0; }
    
16.         50% { left: calc(100% - 10px); top: calc(100% - 10px); }
    
17.         75% { left: 0; top: calc(100% - 10px); }
    
18. }
    
19. </style>
    
20. 
    
21. <div id="papa">
    
22.         <span id="lrc">lrc歌词</span>
    
23.         <span id="mplayer">
    
24.                 <span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span>
    
25.                 <span id="prog"></span>
    
26.                 <span id="tmsg">00:00 | 00:00</span>
    
27.         </span>
    
28. </div>
    
29. 
    
30. <script>
    
31. let lrcAr = [
    
32.         ['0.00','大王叫我来巡山'],
    
33.         ['4.08','作词：赵英俊'],
    
34.         ['5.10','作曲：赵英俊'],
    
35.         ['25.02','太阳对我眨眼睛'],
    
36.         ['28.07','鸟儿唱歌给我听'],
    
37.         ['32.08','我是一个努力干活儿'],
    
38.         ['36.03','还不粘人的小妖精'],
    
39.         ['40.03','别问我从哪里来'],
    
40.         ['44.01','也别问我到哪里去'],
    
41.         ['47.09','我要摘下最美的花儿'],
    
42.         ['51.08','献给我的小公举'],
    
43.         ['57.04','大王叫我来巡山'],
    
44.         ['61.02','我把人间转一转'],
    
45.         ['65.01','打起我的鼓敲起我的锣'],
    
46.         ['68.08','生活充满节奏感'],
    
47.         ['72.06','大王叫我来巡山'],
    
48.         ['76.04','抓个和尚做晚餐'],
    
49.         ['80.01','这山涧的水无比的甜'],
    
50.         ['84.01','不羡鸳鸯不羡仙'],
    
51.         ['87.07','太阳对我眨眼睛'],
    
52.         ['91.07','鸟儿唱歌给我听'],
    
53.         ['95.08','我是一个努力干活儿'],
    
54.         ['99.01','还不粘人的小妖精'],
    
55.         ['103.03','别问我从哪里来'],
    
56.         ['106.09','也别问我到哪去'],
    
57.         ['110.10','我要摘下最美的花儿'],
    
58.         ['114.05','献给我的小公举'],
    
59.         ['120.04','大王叫我来巡山'],
    
60.         ['124.02','我把人间转一转'],
    
61.         ['127.09','打起我的鼓敲起我的锣'],
    
62.         ['131.08','生活充满节奏感'],
    
63.         ['135.06','大王叫我来巡山'],
    
64.         ['139.03','抓个和尚做晚餐'],
    
65.         ['143.00','这山涧的水无比的甜'],
    
66.         ['146.09','不羡鸳鸯不羡仙'],
    
67.         ['165.09','大王 大王'],
    
68.         ['167.08','叫我来巡山'],
    
69.         ['169.09','大王大王叫我来巡山'],
    
70.         ['173.06','大王大王叫我来巡山'],
    
71.         ['177.06','大王大王他叫我来巡山'],
    
72.         ['181.03','大王叫我来巡山'],
    
73.         ['185.02','我把人间转一转'],
    
74.         ['188.09','打起我的鼓敲起我的锣'],
    
75.         ['192.07','生活充满节奏感'],
    
76.         ['196.05','大王叫我来巡山'],
    
77.         ['200.03','抓个和尚做晚餐'],
    
78.         ['204.00','这山涧的水无比的甜'],
    
79.         ['207.10','不羡鸳鸯不羡仙']
    
80. ];
    
81. let aud = new Audio(), lw = prog.offsetWidth;
    
82. aud.src = 'https://music.163.com/song/media/outer/url?id=36492807.mp3';
    
83. aud.autoplay = true;
    
84. aud.loop = true;
    
85. 
    
86. Array.from({length: 60}).forEach((item,key) => {
    
87.         item = document.createElement('span');
    
88.         item.className = 'ball';
    
89.         item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(-6)};`;
    
90.         papa.appendChild(item);
    
91. });
    
92. 
    
93. prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
94. 
    
95. btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
96. aud.addEventListener('playing', ()  => btnstate());
    
97. aud.addEventListener('pause', ()  => btnstate());
    
98. 
    
99. aud.addEventListener('timeupdate', () => {
    
100.         prog.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
     
101.         tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
     
102.         for(j = 0; j < lrcAr.length;  j ++) {
     
103.                 if(aud.currentTime >= lrcAr[j][0]) lrc.innerText = lrcAr[j][1];
     
104.         }
     
105. });
     
106. 
     
107. let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
     
108. 
     
109. let toMin = (val)  => {
     
110.         if (!val) return '00:00';
     
111.         val = Math.floor(val);
     
112.         let min = parseInt(val / 60), sec = parseFloat(val % 60);
     
113.         if(min < 10) min = '0' + min;
     
114.         if(sec < 10) sec = '0' + sec;
     
115.         return min + ':' + sec;
     
116. }
     
117. </script>

复制代码

红影

这么多彩珠，太有趣了

红影

小珠子们整装待发，一起开始巡山了

红影

可以再多点或者距离拉开点，让它们首尾相接也不错

东篱闲人

黑黑总玩这技术含量高的。。。。

梦油

图美、曲好，特别是那游动的彩珠真漂亮。无与伦比！！！

加林森

好活跃的帖子。好玩好玩。

马黑黑

红影 发表于 2022-9-1 09:18
这么多彩珠，太有趣了

太多了老旧电脑的风扇会增速转动

马黑黑

东篱闲人 发表于 2022-9-1 09:55
黑黑总玩这技术含量高的。。。。

几个珠子而已，没啥含量

马黑黑

红影 发表于 2022-9-1 09:22
小珠子们整装待发，一起开始巡山了

珠子就是小妖精

马黑黑

红影 发表于 2022-9-1 09:23
可以再多点或者距离拉开点，让它们首尾相接也不错

对的，但巡逻队伍一般不会首尾相接。你看大鹅对付小乌龟的“打反击”，也就是让出几个村子，小乌龟“得胜”之后都纷纷奔赴黄泉。这叫“网开一面”的战术，巡逻也是如此，逻辑上不会采用闭合手法。

马黑黑

加林森 发表于 2022-9-1 11:45
好活跃的帖子。好玩好玩。

符合题意

马黑黑

梦油 发表于 2022-9-1 10:08
图美、曲好，特别是那游动的彩珠真漂亮。无与伦比！！！

“小妖精”都是漂漂亮亮的

加林森

马黑黑 发表于 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%套用

好的。