在那银色的月光下-庄学忠

园弄桥

00:00 00:00

园弄桥

1. <table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_12012526">
   
2. <table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_497175">
   
3. <div style="position: absolute; left:0px;width:100%;margin-top:120px;">
   
4. <style>
   
5. #papa { margin: width: 1186px;height: 620px;background: url(https://cccimg.com/view.php/6e9f99b4ce5d39231eeb9aedfda0b8e2.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000; overflow: hidden; z-index: 1; position: relative;}
   
6. .inmg{width:100%; height: 620px; position:absolute; TOP:0%;LEFT: 0%;}
   
7. .start{color: #fff;position: absolute; top:84%; left: 22%;}
   
8. .end{color: #fff;position: absolute;top:84%; left: 33%;}
   
9. #btn{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 27%; top: 82%;position: absolute;z-index: 20;}
   
10. .lrc { z-index: 21; position: absolute; top: 20%; left: 41%; width: 740px; height: 350px; overflow: hidden; }
    
11. .lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
    
12. .lrc #ul li { color: #fff; font: 300 20px 'YouYuan', sans-serif; transition: .3s all ease; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 50px; line-height: 50px; margin: 0 auto; cursor: pointer; }
    
13. .lrc #ul li.active { transform: scale(1.2); color: #00FFaa; font-weight: 650; }
    
14. </style>
    
15. <div id="papa">
    
16. <div>
    
17. <marquee id="m" behavior="alternate" scrollamount="5" height=620>
    
18. <img alt=""
    
19. src="https://cccimg.com/view.php/6e9f99b4ce5d39231eeb9aedfda0b8e2.jpg" title="" style="width: 1186px;height: 620px;" /><img alt="" src="https://cccimg.com/view.php/2735744dc131df36a246b35f564cc544.jpg" title="" style="width: 1186px;height: 620px; transform: rotateY(180deg);"/><img alt=""
    
20. src=“https://cccimg.com/view.php/1ed2eb105bebfd77f8cf4211c35fe7e6.jpg" title="" style="width: 1186px;height: 620px;" /><img alt="" src="https://cccimg.com/view.php/bdd913e06c49ec1b4464ab70c979973d.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg);" /><img alt=""
    
21. src=“https://cccimg.com/view.php/a9f309a1a418a873250b72cbfadf5b93.jpg" title="" style="width: 1186px;height: 620px;"/><img alt="" src="https://cccimg.com/view.php/485227a75d5f0681a9e6ec12bb06f0a6.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg); "/><img alt=""
    
22. src=“https://cccimg.com/view.php/dac6c19bff828b396fb5454f784e2b46.jpg" title="" style="width: 1186px;height: 620px;" /><img alt="" src=“https://cccimg.com/view.php/6e9f99b4ce5d39231eeb9aedfda0b8e2.jpg" title=""style=" width: 1186px;height: 620px;transform: rotateY(180deg);" />
    
23. </marquee>
    
24. </div>
    
25. <span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
    
26. <div class="lrc">
    
27. <ul id="ul"></ul>
    
28. </div>
    
29. </div>
    
30. <audio id="aud" src="https://cccimg.com/view.php/15b322ec247d8aadd84f6c971ea646d5.mp3" autoplay loop ></audio>
    
31. <script>
    
32. var music = document.getElementById('aud');
    
33. var m= document.getElementById('m');
    
34. var m4 = document.getElementById('m4');var m1 = document.getElementById('m1');var m2 = document.getElementById('m2');var m3 = document.getElementById('m3');
    
35. var btn = document.getElementById('btn');
    
36. btn.onclick = function() {
    
37. if (aud.paused) {
    
38. aud.play();
    
39. m.start();m4.start();m1.start();m2.start();m3.start();
    
40. btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
    
41. } else {
    
42. aud.pause();m.stop();m4.stop();m1.stop();m2.stop();m3.stop();
    
43. btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
    
44. }
    
45. };
    
46. const start = document.querySelector('.start')
    
47. const end= document.querySelector('.end')
    
48. function conversion (value) {
    
49. let minute = Math.floor(value / 60)
    
50. minute = minute.toString().length === 1 ? ('0' + minute) : minute
    
51. let second = Math.round(value % 60)
    
52. second = second.toString().length === 1 ? ('0' + second) : second
    
53. return `${minute}:${second}`
    
54. }
    
55. aud.onloadedmetadata = function () {
    
56. end.innerHTML = conversion(aud.duration)
    
57. start.innerHTML = conversion(aud.currentTime)
    
58. }
    
59. setInterval(() => {
    
60. start.innerHTML = conversion(aud.currentTime)
    
61. }, 1000)
    
62. </script>
    
63. <script>
    
64. let lrc = `[00:00.000]在那银色的月光下 - 庄学忠
    
65. [00:06.830]词：王洛宾
    
66. [00:13.670]曲：王洛宾
    
67. [00:20.507]在那金色沙滩上
    
68. [00:24.427]洒着银白的月光
    
69. [00:28.151]寻找往事踪影
    
70. [00:32.167]往事踪影迷茫
    
71. [00:36.135]寻找往事踪影
    
72. [00:39.992]往事踪影迷茫
    
73. [00:53.915]往事踪影迷茫
    
74. [00:57.818]有如幻梦一样
    
75. [01:01.626]你在何处躲藏
    
76. [01:05.469]背弃我的姑娘
    
77. [01:09.628]你在何处躲藏
    
78. [01:13.433]背弃我的姑娘
    
79. [01:27.465]我骑在马上
    
80. [01:31.061]箭一样的飞翔
    
81. [01:34.973]飞呀飞呀我的马
    
82. [01:38.888]朝着他去的方向
    
83. [01:42.744]飞呀飞呀我的马
    
84. [01:46.647]朝着他去的方向
    
85. [02:04.621]往事踪影迷茫
    
86. [02:08.333]有如幻梦一样
    
87. [02:12.229]你在何处躲藏
    
88. [02:16.206]背弃我的姑娘
    
89. [02:20.095]你在何处躲藏
    
90. [02:24.029]背弃我的姑娘
    
91. [02:47.189]我骑在马上
    
92. [02:50.845]箭一样的飞翔
    
93. [02:54.833]飞呀飞呀我的马
    
94. [02:58.737]朝着他去的方向
    
95. [03:02.627]飞呀飞呀我的马
    
96. [03:06.385]朝着他去的方向
    
97. `;
    
98. let lrcArr = lrc.split('\n');
    
99. let result = [];
    
100. var audio = document.querySelector("#aud");
     
101. var ul = document.querySelector("#ul");
     
102. var container = document.querySelector(".lrc");
     
103. for (let i = 0; i < lrcArr.length; i++) {
     
104. var lrcData = lrcArr[i].split(']');
     
105. if (lrcData.length < 2) continue;
     
106. var lrcTime = lrcData[0].substring(1);
     
107. var obj = {
     
108. time: parseTime(lrcTime),
     
109. word: lrcData[1].trim()
     
110. }
     
111. result.push(obj);
     
112. }
     
113. function parseTime(lrcTime) {
     
114. let lrcTimeArr = lrcTime.split(":");
     
115. return +lrcTimeArr[0] * 60 + parseFloat(lrcTimeArr[1]);
     
116. }
     
117. function getIndex() {
     
118. let time = audio.currentTime;
     
119. for (let i = 0; i < result.length; i++) {
     
120. if (result[i].time > time) {
     
121. return i - 1;
     
122. }
     
123. }
     
124. return result.length - 1;
     
125. }
     
126. function createElements() {
     
127. let fragment = document.createDocumentFragment();
     
128. for (let i = 0; i < result.length; i++) {
     
129. let li = document.createElement("li");
     
130. li.innerText = result[i].word;
     
131. li.addEventListener("click", function () {
     
132. audio.currentTime = result[i].time;
     
133. setOffset();
     
134. });
     
135. fragment.appendChild(li);
     
136. }
     
137. ul.appendChild(fragment);
     
138. }
     
139. createElements();
     
140. let containerHeight = container.clientHeight;
     
141. let liHeight = ul.children[0]?.clientHeight || 50;
     
142. let minOffset = 0;
     
143. let maxOffset = ul.clientHeight - containerHeight;
     
144. function setOffset() {
     
145. const index = getIndex();
     
146. if (index < 0) return;
     
147. const liHeight = ul.children[0]?.clientHeight || 50;
     
148. let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
     
149. offset = Math.max(minOffset, Math.min(offset, maxOffset));
     
150. ul.style.transform = `translateY(${-offset}px)`;
     
151. ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
     
152. if (index < ul.children.length) {
     
153. ul.children[index].classList.add('active');
     
154. }
     
155. }
     
156. audio.addEventListener("timeupdate", setOffset);
     
157. </script>
     
158. </div>
     
159. <div style="height:960px;"></div>
     
160. </td></tr></table>
     
161. </td></tr></table>

复制代码

山水人家

园弄桥 发表于 2025-9-11 22:52

月光漂流，音乐缓缓，欣赏佳作，早晨问好！

潇湘翁

欣赏佳作，分享美好！

沧海笑

欣赏老师佳作！

园弄桥

山水人家 发表于 2025-9-12 06:25
月光漂流，音乐缓缓，欣赏佳作，早晨问好！

我有自知之明，谢谢加持。

园弄桥

潇湘翁 发表于 2025-9-12 06:29
欣赏佳作，分享美好！

我有自知之明，谢谢加持。

园弄桥

沧海笑 发表于 2025-9-12 08:06
欣赏老师佳作！

我有自知之明，谢谢加持。

静悟

欣赏老师佳作，问好！

园弄桥

静悟 发表于 2025-9-12 08:27
欣赏老师佳作，问好！

我有自知之明，谢谢加持