心率测量仪（学习黑黑老师生命线的代码）
本帖最后由 梦江南 于 2026-8-15 18:16 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://upfile.mp3.wf/view.php/8384450c31baa007499595c7699c20f7.jpg') no-repeat center/cover; color: orange; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; top:30%; left: 36%; width: 16vw; height: 8vw; cursor: pointer; opacity: 1; }
#p1 { fill: none; stroke: hsl(0,10%,80%);stroke-width: 4; stroke-dasharray: 3; stroke-dashoffset: 100%; animation: move linear 20s infinite; }
@keyframes move { to { stroke-dashoffset: 0%; } }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/17/5e1c837dca409.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
<title>播放/暂停(Alt+X)</title>
<path id="p1" d="M0 100 H400" />
</svg>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=38019092', '生命线']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
function tzRun() {
var aud = new AudPlayer(options);
aud.aud.ontimeupdate = () => {
var tt = 60;
var str = '';
Array.from({length: tt}).forEach((_,k) => {
var x = (k + 1) * (900 / tt);
var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
str += k === 0 ? `M0 100 H${x}` : ` L${x} ${y}`;
});
path = `${str}L400 100`;
p1.setAttribute('d', path);
};
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script> 这样的心率是不是有点危险啊！{:4_173:} 有意思，把这个效果放到医学上了，江南思路灵活{:4_199:} 红影 发表于 2026-8-14 15:06
有意思，把这个效果放到医学上了，江南思路灵活
影子，这是你说过的心电图，受到你的这句话启发，就做了这帖。{:4_173:} 红影 发表于 2026-8-14 15:06
有意思，把这个效果放到医学上了，江南思路灵活
没有叫黑黑老师来评审，要么呼一下。@马黑黑 老师，梦江南交作业，请指导！{:4_180:} 来欣赏梦江南的佳作 偶然~ 发表于 2026-8-14 20:26
来欣赏梦江南的佳作
谢谢偶然欣赏支持，问好！{:4_204:} 梦江南 发表于 2026-8-14 20:29
谢谢偶然欣赏支持，问好！
{:4_180:}
健康快乐 阿姨太厉害了，这个背景图图和标题非常吻合，制作也是特别棒！ 这个黑黑的代码我还没有看见的，等一下去仔细看看，这个也是特别好玩的 欣赏阿姨精彩的制作，小辣椒欣赏加学习！{:4_178:} 不错不错 偶然~ 发表于 2026-8-14 20:36
健康快乐
周六快乐！{:4_180:} 小辣椒 发表于 2026-8-14 21:16
阿姨太厉害了，这个背景图图和标题非常吻合，制作也是特别棒！
问好小辣椒，谢谢欣赏支持，这是受影子的心电图话启发的。{:4_204:} 小辣椒 发表于 2026-8-14 21:18
这个黑黑的代码我还没有看见的，等一下去仔细看看，这个也是特别好玩的
这是黑黑老师最近的帖子，是很好玩，你一定会玩更好的。{:4_204:} 小辣椒 发表于 2026-8-14 21:19
欣赏阿姨精彩的制作，小辣椒欣赏加学习！
小辣椒谦虚，你不要急，有空再做。{:4_171:} 马黑黑 发表于 2026-8-14 21:41
不错不错
问好黑黑老师，谢谢回复。其实这线条还可以变细一点，会更像，是不是啊？{:4_190:}{:4_180:} 梦江南 发表于 2026-8-15 08:45
问好黑黑老师，谢谢回复。其实这线条还可以变细一点，会更像，是不是啊？
一切可控。直接的调整是下一句红色部分：
#p1 { fill: none; stroke: currentColor; stroke-width: 8; stroke-dasharray: 8; stroke-dashoffset: 100%; animation: move linear 20s infinite; }
stroke-width 用于设置描边线厚度，可在CSS设置，也可以在 SVG 对应子元素代码中以HTML属性设置。
一切的一切都在代码中。学习制作音画帖，要先学会看代码，然后改代码，@小辣椒 就是这么一路学过来的。 马黑黑 发表于 2026-8-15 09:07
一切可控。直接的调整是下一句红色部分：
#p1 { fill: none; stroke: currentColor; stroke-width: 8; ...
谢谢黑黑老师指点，学习了。{:4_180:} 欣赏美帖，赞！