数学公式用马老师的几何代码作为素材制作

霜染枫丹 发表于 2026-6-23 20:14

本帖最后由霜染枫丹于 2026-6-23 20:31 编辑 <br /><br /><style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';

.pa {
   --offsetX: 80px;
   --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/23/6a3a714d79c85.gif') no-repeat center/cover;
   --ma-size: 6%;
   width: 1300px;
   height: 731px;
   position: relative;
   overflow: hidden;
}

.pa *, .pa *::before, .pa *::after {
   content: none !important;
}

/* 【修复全屏问题】改用 bottom 定位，永远贴在底部 */
#custom-lrc-container {
   position: absolute;
   bottom: 6px;    /* 关键：距离底部 50px，全屏不变，可修改 */
   left: 0;
   width: 100%;
   text-align: center;
   z-index: 9999;
   pointer-events: none;

   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
}

/* 每一句歌词的样式 */
.lrc-line {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   white-space: nowrap;
   color: #fefefe;
   font-size: 28px;
   font-family: "隶书", "LiSu", serif;
   font-weight: normal;
   text-shadow: 0 0 10px rgba(0,0,0,0.8);
   opacity: 0;
   transition: opacity 0.5s ease, transform 0.5s ease;
   margin: 0;
   top: 0;
}

.lrc-line.active {
   opacity: 1;
   transform: translateX(-50%) scale(1.1);
   z-index: 10;
}
</style>

<div class="pa">
<div id="custom-lrc-container"></div>
</div>

<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';

const tz = TZ.TZ('pa');

tz.add('audio', '', '', { src: 'https://imgimg.qqdsw8.cn/view.php/0203421ce30c7aeb7f87666680fec973.mp3' });
tz.add('video', '', 'pd-vid', {src: 'http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4'}).style('opacity: 0.2;');
tz.add('img', '', 'ma', { src: 'https://pic1.imgdb.cn/item/6a36c2802830ce602a508060.gif' }).style('bottom: 60px;').playmp3();

tz.bgprog().style('bottom: 20px; color: #fefefe; width: 240px;');
tz.fs().style('left: 20px; top: 15px;');

const lrcString = `
数学公式
演唱：边程邓智元
首先来一起找规律
集合与函数的交集
观察图像别分心要努力
幂函数性质要记清
反函数要找定义域
解题技巧要分析是核心
WU 注意结构函数名的定义
WU 和差倍半和诱导记心里
COME ON
一起
指数和对数函数
它们互为反函数
同角关系记清楚
熟读公式是基础
赛因二倍阿尔法
等于二倍赛因
乘以考赛因阿尔法
推算过程多练习
符号看象限
奇变偶不变
化繁为简
记得要割补转换辅助线
Wow
函数一线牵
几何图形
学会仔细思量温习
证明排列组合
Wow
数形巧结合
勤学苦练
再看几次解析立体几何
验算总会有结果
万能公式总会给我们圆满的组合`;

function initCustomLrc(lrcText) {
   const container = document.getElementById('custom-lrc-container');
   const lines = [];

   const lineRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/;
   const rawLines = lrcText.split('\n');

   rawLines.forEach(text => {
         const match = text.match(lineRegex);
         if (match) {
            const minutes = parseInt(match);
            const seconds = parseInt(match);
            const milliseconds = parseInt(match);
            const time = minutes * 60 + seconds + milliseconds / 1000;
            let content = match.trim();

            // 【关键修复】过滤乱码 ‌ 等所有 HTML 实体
            content = content.replace(/&#\d+;/g, '').trim();

            if (content) {
               lines.push({ time, content, element: null });
            }
         }
   });

   lines.forEach((line) => {
         const div = document.createElement('div');
         div.className = 'lrc-line';
         div.textContent = line.content;
         container.appendChild(div);
         line.element = div;
   });

   const audio = document.querySelector('.pa audio');

   if (audio) {
         audio.addEventListener('timeupdate', () => {
            const currentTime = audio.currentTime;
            let activeIndex = -1;

            for (let i = 0; i < lines.length; i++) {
               if (currentTime >= lines.time) {
                     activeIndex = i;
               } else {
                     break;
               }
            }

            lines.forEach((line, idx) => {
               if (idx === activeIndex) {
                     line.element.classList.add('active');
               } else {
                     line.element.classList.remove('active');
               }
            });
         });

         audio.addEventListener('ended', () => {
            lines.forEach(line => line.element.classList.remove('active'));
         });
   }
}

setTimeout(() => {
   const audioEl = document.querySelector('.pa audio');
   if(audioEl) {
         initCustomLrc(lrcString);
   } else {
         const observer = new MutationObserver(() => {
            const aud = document.querySelector('.pa audio');
            if(aud) {
               initCustomLrc(lrcString);
               observer.disconnect();
            }
         });
         observer.observe(document.querySelector('.pa'), { childList: true, subtree: true });
   }
}, 500);

</script>

霜染枫丹 发表于 2026-6-23 20:15

本帖最后由霜染枫丹于 2026-6-23 20:37 编辑

数学公式
演唱：边程邓智元

首先来一起找规律
集合与函数的交集
观察图像别分心要努力
幂函数性质要记清
反函数要找定义域
解题技巧要分析是核心
WU 注意结构函数名的定义
WU 和差倍半和诱导记心里
COME ON
一起
指数和对数函数
它们互为反函数
同角关系记清楚
熟读公式是基础
赛因二倍阿尔法
等于二倍赛因
乘以考赛因阿尔法
推算过程多练习
符号看象限
奇变偶不变
化繁为简
记得要割补转换辅助线
Wow
函数一线牵
几何图形
学会仔细思量温习
证明排列组合
Wow
数形巧结合
勤学苦练
再看几次解析立体几何
验算总会有结果
万能公式总会给我们圆满的组合

杨帆发表于 2026-6-23 20:25

很特别的歌曲，很特别的制作，谢谢枫丹老师精彩分享{:4_204:}

霜染枫丹 发表于 2026-6-23 20:36

霜染枫丹 发表于 2026-6-23 20:40

杨帆发表于 2026-6-23 20:25
很特别的歌曲，很特别的制作，谢谢枫丹老师精彩分享

扬帆晚上好~~

感谢您的支持，挺喜欢这些几何图形的，马老师用代码画出来感到很生动。得到支持很高兴，祝您夏安{:4_204:}{:4_190:}

魏淑芬 发表于 2026-6-23 20:46

用歌唱出枯燥的数学公式，很有趣，俺是不明觉厉了，哈哈。{:4_173:}

魏淑芬 发表于 2026-6-23 20:47

用歌唱出枯燥的数学公式，很有趣，俺是不明觉厉了，哈哈。{:4_173:}

霜染枫丹 发表于 2026-6-23 20:56

魏淑芬发表于 2026-6-23 20:47
用歌唱出枯燥的数学公式，很有趣，俺是不明觉厉了，哈哈。

这首歌还是我儿子当年刚发行的时候推荐给我的，我也不知道唱的是什么{:4_173:}{:4_172:}{:4_204:}

红影发表于 2026-6-23 22:46

有意思，这歌曲很特别。这制作也很奇特，欣赏枫丹好帖{:4_199:}

霜染枫丹 发表于 2026-6-23 23:22

红影发表于 2026-6-23 22:46
有意思，这歌曲很特别。这制作也很奇特，欣赏枫丹好帖

红影晚上好~~

童声的数学相关的歌曲有一些，可听起来都是小学水平，就像一去二三里“。还是这首歌说的我不懂{:4_173:}，能配和马老师的我同样不懂的代码生成，一开始做的文件太大了，就选了这几个几何图形。谢您的支持，夏安！！{:4_204:}{:4_190:}

马黑黑 发表于 2026-6-23 23:57

来学学数学公式{:4_173:}

霜染枫丹 发表于 2026-6-24 00:15

马黑黑发表于 2026-6-23 23:57
来学学数学公式

这些马老师肯定是懂得，否则那些相关的计算是出不来的，谢谢您的无私分享，引领着如我这样真不懂得人也对代码的应用有了兴趣。在这里我学习了播放器的制作。就像您的编辑器，我就存了普通版的链接，因为变红了边绿了我都不认识{:4_173:}

红影发表于 2026-6-24 17:27

霜染枫丹发表于 2026-6-23 23:22
红影晚上好~~

童声的数学相关的歌曲有一些，可听起来都是小学水平，就像一去二三里“。还是这首歌说的 ...

还是头一次听到这样的歌曲，把数学规则编写成歌曲，特别有趣呢{:4_173:}

马黑黑 发表于 2026-6-24 22:44

霜染枫丹发表于 2026-6-24 00:15
这些马老师肯定是懂得，否则那些相关的计算是出不来的，谢谢您的无私分享，引领着如我这样真不懂得人也对 ...

俺也不懂，都是瞎蒙的{:4_170:}

霜染枫丹 发表于 2026-6-25 01:05

马黑黑发表于 2026-6-24 22:44
俺也不懂，都是瞎蒙的

哈哈~~那是蒙不对的，只能算对{:4_173:}{:4_190:}

马黑黑 发表于 2026-6-25 12:09

霜染枫丹发表于 2026-6-25 01:05
哈哈~~那是蒙不对的，只能算对

你说算对就算是对了{:4_170:}

页: [1]

花潮论坛's Archiver

数学公式 用马老师的几何代码作为素材制作

数学公式用马老师的几何代码作为素材制作