你看时间等过谁 - 学习亚伦老师帖《我是你路过的风》 - 音乐沙龙 - 花潮论坛

杨帆发表于 2025-7-11 21:56

你看时间等过谁 - 学习亚伦老师帖《我是你路过的风》

本帖最后由杨帆于 2025-7-11 23:42 编辑 <br /><br />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你看时间等过谁</title>
</head>
<body>
<style>
   #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height:750px; background: #333 url('https://bbs.cnzv.cc/up/upload/pic/12/20250213-3dc8791fc55473d70185ddb9940c45ff.jpg') 0 0/100% 105%; box-shadow: 3px 3px 6px 6px gray; perspective: 500px; position: relative; overflow: hidden; user-select: none; z-index: 1; }
   #reflect-right { width:100%;z-index: 2;position:absolute;margin: 0px 0px;-webkit-box-reflect:left;}
   #xuhui { left: 36%; top: 85%; position: absolute; font: normal 2.5em Microsoft YaHei; color: #00BFFF; }
   #lrc, #lrcc { --state: paused; --motion: cover2; --tt: 2s; --bg: linear-gradient(89deg, #EE0000 12%, #078504 35%, #060344 65%, #DE0000 90%); border: 0px solid black; position: absolute; z-index: 6; font: normal 3em 华文新魏; color: #222222; white-space: pre; -webkit-background-clip: text; filter: drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0); }
   #lrc { left: 20%; top: 8%; }
   #lrcc { left: 80%; transform: translate(-102%); top: 18%; }
   #lrcc::before, #lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
   @keyframes cover1 { to { clip-path: inset(0 0% 0 0); } }
   @keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
   #vid1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; object-fit: cover; pointer-events: none; opacity: .99; mix-blend-mode: screen; mask: radial-gradient(transparent 10%, red); -webkit-mask: radial-gradient(transparent 10%, red); }
   #vid2 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; object-fit: cover; pointer-events: none; opacity: .99; mix-blend-mode: screen; mask: linear-gradient(to top, transparent, transparent 60%, red); -webkit-mask: linear-gradient(to top, transparent, transparent 60%, red); }
   #vid3 { position: absolute; width: 50%; height: 50%; top:45%; left: 26%; z-index: 1; object-fit: cover; pointer-events: none; opacity: .8; mix-blend-mode: screen; mask: linear-gradient(to ltft, red 75%, transparent 99%, transparent); -webkit-mask: linear-gradient(to left, red 75%, transparent 99%, transparent); }
   #pa { position: absolute; width: 50%; height: 50%; top:75%; left:34%; text-align: center; }
   #hHand, #mHand, #sHand { animation: turning var(--dur) linear infinite; }
   #hHand { --begin: 0deg; --dur: 216000s; }
   #mHand { --begin: 0deg; --dur: 3600s; }
   #sHand { --begin: 0deg; --dur: 60s; }
   #kedu { font: normal 16px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-anchor: middle; dominant-baseline: middle; fill: cyan; user-select: none; }
   @keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }
   #clock { position: absolute; z-index: 5; bottom: 350px; right: 360px; opacity: .5; transform-style: preserve-3d; transform: rotateX(-45deg) rotateY(25deg) rotateZ(0deg); }
   #dt { mix-blend-mode: screen; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0%; left: 0%; }
   #dt img { width: 100%; height: 100%; }
</style>
<div id="papa">
   <div id="dt">
         <img src="https://pic1.imgdb.cn/item/6850372b58cb8da5c851ea47.gif" style="mix-blend-mode: screen;" id="IMG" />
   </div>
   <div id="pa">
         <svg id="clock" width="300" height="300" viewBox="-100 -100 200 200">
            <defs>
               <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
                     <stop offset="0%" stop-color="red" />
                     <stop offset="50%" stop-color="green" />
                     <stop offset="100%" stop-color="FloralWhite" />
               </linearGradient>
            </defs>
            <circle cx="0" cy="0" r="90" fill="#2d12fa" stroke="Turquoise" stroke-width="1" />
            <g id="kedu">
               <text font-size="10" fill="GhostWhite" text-anchor="middle">
                     <tspan id="tdate" x="0" y="-30">日期</tspan>
                     <tspan id="tday" x="0" y="-10">星期</tspan>
                     <tspan x="0" y="30" fill="Cornsilk">北京</tspan>
               </text>
            </g>
            <line id="hHand" x1="0" y1="0" x2="0" y2="-65" stroke="whitesmoke" stroke-width="4" />
            <line id="mHand" x1="0" y1="0" x2="0" y2="-75" stroke="snow" stroke-width="3" />
            <line id="sHand" x1="0" y1="0" x2="0" y2="-85" stroke="Magenta" stroke-width="2" />
            <circle cx="0" cy="0" r="5" fill="red" stroke="Crimson" stroke-width="2" />
         </svg>
   </div>
<marquee id="m" behavior="scroll" scrollamount="8" height=750>
<img src="https://638183.freep.cn/638183/t24/w4/red001.webp" id="reflect-right">
</marquee>
   <video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/55/video63662a4394bff.mp4" autoplay loop muted></video>
   <video id="vid2" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6013989ad7d5ecfc36c5452969773c28_preview.mp4" autoplay loop muted></video>
   <video id="vid3" src="https://file.uhsea.com/2507/84abaec8b3450c6832983a88f3f8d7b8B9.mp4" autoplay loop muted></video>
   <img src="https://638183.freep.cn/638183/t24/w4/red001.webp" class="reflect-right">
   <div id="xuhui"></div>
   <audio id="aud" src="https://file.uhsea.com/2507/1d3043b1975856e3c3339c9d32ad0694EO.mp3" autoplay loop></audio>
   <div id="lrc" data-lrc=""></div>
   <div id="lrcc" data-lrc=""></div>
</div>
<span id="lrcStr" style="visibility: hidden;">
   你看时间等过谁(Live 合唱版)
   作词：张凤敏
   作曲：徐信
   演唱：韩小欠
   和声：盛夏合唱团
   后期：徐晴超
   出品：峰羿文化
   OP：海酝
   你看时间啊它等过谁
   你看心灰啊它层层堆
   你看身边啊还剩下了谁
   你看某天啊谁还记得谁
   泼出去的水要怎么收回
   走散的人要怎么找回
   碎了的心要怎么缝合
   走过的路要怎么倒退
   故事结局要怎么追悔
   人已不在要怎么去给
   青春时光要怎么留住
   满头白发要怎么变黑
   你看时间啊它等过谁
   你看这人啊多么可悲
   你看当初啊什么都不对
   你看后来啊只会掉眼泪
   你看时间啊它等过谁
   你看心灰啊它层层堆
   你看身边啊还剩下了谁
   你看某天啊谁还记得谁
   故事结局要怎么追悔
   人已不在要怎么去给
   青春时光要怎么留住
   满头白发要怎么变黑
   你看时间啊它等过谁
   你看这人啊多么可悲
   你看当初啊什么都不对
   你看后来啊只会掉眼泪
   你看时间啊它等过谁
   你看心灰啊它层层堆
   你看身边啊还剩下了谁
   你看某天啊谁还记得谁
   你看时间啊它等过谁
   你看这人啊多么可悲
   你看当初啊什么都不对
   你看后来啊只会掉眼泪
   你看时间啊它等过谁
   你看心灰啊它层层堆
   你看身边啊还剩下了谁
   你看某天啊谁还记得谁
</span>
<script>
   (function () {
         /*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
         let mKey = 0, averAdd = 0.3;
         const aud = document.getElementById('aud');
         const lrc = document.getElementById('lrc');
         const lrcc = document.getElementById('lrcc');
         const lrcStr = document.getElementById('lrcStr');

         /*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
         let lrcTime = (ar) => {
            let tmpAr = [];
            for (let j = 0; j < ar.length - 1; j++) {
               if (j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
            }
            let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;
            tmpAr.push(aver);
            tmpAr.forEach((item, key) => {
               ar = item > aver ? aver : item;
            });
            return ar;
         };

         /*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
         let getLrcAr = (text) => {
            let lrcAr = [];
            let calcRule = ;
            for (let x of text.split('\n')) {
               let ar = [];
               let re = /\d+[\.:]\d+([\.:]\d+)?/g;
               let geci = x.replace(re, '');
               if (geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g, '');
                     let time = x.match(re);
                     if (time != null) {
                        for (let y of time) {
                           let tmp = y.match(/\d+/g);
                           let sec = 0;
                           for (let z in tmp) sec += tmp * calcRule;
                           ar = ;
                           lrcAr.push(ar);
                        }
                     }
               }
            }
            lrcAr.sort((a, b) => a - b);
            return (lrcTime(lrcAr));
         };

         /*函数：模拟显示同步歌词*/
         let showLrc = (time) => {
            let lrca = lrcAr;
            let lrcb = mKey + 1 < lrcAr.length ? lrcAr : "";
            let Y = String(mKey / 2).indexOf(".");
            if (Y === -1) {
               if (mKey === 0) lrc.innerHTML = lrca;
               lrc.dataset.lrc = lrca;
               lrcc.innerHTML = lrcb;
               lrcc.dataset.lrc = "";
               lrc.style.setProperty('--motion', 'cover1');
               lrc.style.setProperty('--tt', time + 's');
               lrc.style.setProperty('--state', 'running');
               lrcc.style.setProperty('--motion', 'cover2');
            } else {
               lrc.innerHTML = lrcb;
               lrcc.dataset.lrc = lrca;
               lrc.dataset.lrc = "";
               lrcc.style.setProperty('--motion', 'cover1');
               lrcc.style.setProperty('--tt', time + 's');
               lrcc.style.setProperty('--state', 'running');
               lrc.style.setProperty('--motion', 'cover2');
            }
            mKey += 1;
         };

         /*函数：处理当前歌词索引 mKey*/
         let calcKey = () => {
            for (let j = 0; j < lrcAr.length; j++) {
               if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
               }
            }
            if (mKey < 0) mKey = 0;
            if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
            let time = lrcAr - (aud.currentTime - lrcAr);
            showLrc(time);
         };

         /*函数：关键帧动画状态切换*/
         let mState = () => {
            if (aud.paused) {
               lrc.style.setProperty("--state", "paused");
               lrcc.style.setProperty("--state", "paused");
            } else {
               lrc.style.setProperty("--state", "running");
               lrcc.style.setProperty("--state", "running");
            }
         };

         /*监听播放进度*/
         aud.addEventListener('timeupdate', () => {
            for (let j = 0; j < lrcAr.length; j++) {
               if (aud.currentTime >= lrcAr) {
                     if (mKey === j) showLrc(lrcAr);
               }
            }
         });

         aud.addEventListener('pause', () => mState()); /*监听暂停事件*/
         aud.addEventListener('play', () => mState()); /*监听播放事件*/
         aud.addEventListener('seeked', () => calcKey()); /*监听查询事件*/

         let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
   })();

   pa.onmousemove = () => {
pa.title = document ? '播放/暂停' : '';
pa.style.cursor = document ? 'pointer' : 'default';

}
   document.addEventListener('DOMContentLoaded', function () {
         const audioElement = document.getElementById('aud');
         const pa = document.getElementById('pa');
         const vid1 = document.getElementById('vid1');
         const vid2 = document.getElementById('vid2');
         const vid3 = document.getElementById('vid3');
         const image = document.getElementById('IMG');
         const xuhui = document.getElementById('xuhui');
         const hHand = document.getElementById('hHand');
         const mHand = document.getElementById('mHand');
         const sHand = document.getElementById('sHand');
         const m = document.getElementById('m');

         let isPlaying = true;
         let timeInterval;
         let clockInterval;
         function start() {
            audioElement.play();
            vid1.play(); vid2.play();vid3.play();
            image.style.display = '';
            timeInterval = setInterval(() => {
               xuhui.innerHTML = new Date().toLocaleString();
            }, 1000);
            clockInterval = setInterval(() => {
               var now = new Date();
               var hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
                     min = now.getMinutes(),
                     sec = now.getSeconds(),
                     msec = now.getMilliseconds();
               var hDeg = hr * 30 + (min * 6 / 12),
                     mDeg = min * 6 + (sec * 6 / 60),
                     sDeg = sec * 6 + (msec * 0.36 / 1000);
               hHand.style.setProperty('--begin', hDeg + 'deg');
               mHand.style.setProperty('--begin', mDeg + 'deg');
               sHand.style.setProperty('--begin', sDeg + 'deg');
            }, 100);
         }

         function pause() {
            audioElement.pause();
            vid1.pause();vid2.pause();vid3.pause();
            image.style.display = 'none';
            clearInterval(timeInterval);
            clearInterval(clockInterval);
         }

         pa.addEventListener('click', function () {
            if (isPlaying) {
               pause();
            } else {
               start();
            }
            isPlaying = !isPlaying;
         });

         start();
   });

   pa.onclick = function() {
         if (aud.paused) {
            aud.play();m.start();
                           } else {aud.pause();m.stop();
            }
};

   setAttr = (elm, objData) => {
         for (var key in objData) {
            elm.setAttribute(key, objData);
         }
   };

   mkScale = (total = 60) => {
         var deg = 360 / total;
         Array(total).fill('').forEach((l, k) => {
            var w = -6;
            if (k % 5 === 0) {
               var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
               setAttr(t, { transform: `rotate(${deg * k - 60} 0 0) translate(75) rotate(${-1 * (deg * k - 60)} 0 0)` });
               t.textContent = k / 5 + 1;
               kedu.appendChild(t);
               w = -4;
            }
            l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            setAttr(l, { transform: `rotate(${deg * k - 60} 0 0) translate(90)`, x1: 0, y1: 0, x2: w, y2: 0, stroke: 'cyan' });
            kedu.appendChild(l);
         });
   };

   mkScale();
</script>
</body>
</html>

红影发表于 2025-7-11 22:25

这个好，有漂亮的时钟，还有数字时钟，用来体现时间不等人，真的非常恰当呢{:4_187:}

红影发表于 2025-7-11 22:26

这个能一键全控，不过几秒钟后，好像滚动图就又动了呢{:4_173:}
欣赏杨帆好帖{:4_199:}

杨帆发表于 2025-7-11 23:03

红影发表于 2025-7-11 22:25
这个好，有漂亮的时钟，还有数字时钟，用来体现时间不等人，真的非常恰当呢

谢谢影子鼓励，祝开心{:4_204:}

红影发表于 2025-7-11 23:25

杨帆发表于 2025-7-11 23:03
谢谢影子鼓励，祝开心

这个制作特别漂亮{:4_187:}

杨帆发表于 2025-7-11 23:52

红影发表于 2025-7-11 22:26
这个能一键全控，不过几秒钟后，好像滚动图就又动了呢
欣赏杨帆好帖

暂停后滚动的自动滚动问题已修复，谢谢{:4_204:}

杨帆发表于 2025-7-11 23:53

红影发表于 2025-7-11 23:25
这个制作特别漂亮

问好影子，感谢鼓励{:4_190:}

红影发表于 2025-7-12 10:36

杨帆发表于 2025-7-11 23:52
暂停后滚动的自动滚动问题已修复，谢谢

嗯嗯，试过了，现在已经不会自动滚动了，厉害{:4_187:}

红影发表于 2025-7-12 10:36

杨帆发表于 2025-7-11 23:53
问好影子，感谢鼓励

问好杨帆，周六快乐{:4_187:}

杨帆发表于 2025-7-12 12:38

红影发表于 2025-7-12 10:36
嗯嗯，试过了，现在已经不会自动滚动了，厉害

谢谢影子鼓励，多鼓捣，就不会自动滚动了{:4_173:}

红影发表于 2025-7-12 19:53

杨帆发表于 2025-7-12 12:38
谢谢影子鼓励，多鼓捣，就不会自动滚动了

能找到问题所在，也很厉害呢{:4_187:}

页: [1]

花潮论坛's Archiver

你看时间等过谁 - 学习亚伦老师帖《我是你路过的风》