小辣椒 发表于 2022-7-10 10:39
下载了个app，和手表绑定，每天检测睡眠质量，里面有许多功能，包括睡眠音乐等等
不知效果如何
马黑黑 发表于 2022-7-10 10:42
不知效果如何
上班后睡眠慢慢好起来了，主要在家里休息的时候生活不规律，现在就是玩的时间少了一点，睡眠应该好了一点
本帖最后由 加林森 于 2022-9-6 16:56 编辑 <br /><br />红影 发表于 2022-7-10 08:10
队长连动图也用的黑黑的啊，可以换个动图呢
我喜欢这个小飞碟。就直接用上去了。
<style>
#papa { left: -214px; width: 1024px; height: 576px; background: gray url('https://pic.imgdb.cn/item/6316b13116f2c2beb14b2a99.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
/* svg按钮↓*/
#mplayer { position: absolute; bottom: 0; }
#btnpause { display: none; }
#btnwrap, #btnplay, #btnpause { cursor: pointer; }
#btnplay:hover + btnwrap, #btnpause:hover + btnwrap { fill: gold; }
#btnwrap:hover { fill: gold; }
#btnwrap:hover + #btnplay + #btnpause { fill: red;}
#tmsg { dominant-baseline: middle; fill: snow; }
#track { shape-rendering: crispEdges; cursor: pointer; }
/* svg 歌词及动态效果 ↓ */
#lrc { position: absolute; width: 1000px; height: 80px; top: 10px; }
.text { font: bold 3em sans-serif; text-anchor: middle; dominant-baseline: middle; letter-spacing: 4px; fill: none; stroke-width: 1.5px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: snow; text-shadow: 0 0 5px red; animation-delay: -1.5s; }
.text-2{ stroke: orange; text-shadow: 0 0 5px green; animation-delay: -3s; }
.text-3{ stroke: gold; text-shadow: 0 0 5px blue; animation-delay: -4.5s; }
.text-4{ stroke: tomato; text-shadow: 0 0 5px purple; animation-delay: -6s; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
</style>
<div id="papa">
<div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif" alt="" /></div>
<svg id="lrc">
<text x="50%" y="50%" class="text text-1">lrc歌词</text>
<text x="50%" y="50%" class="text text-2">lrc歌词</text>
<text x="50%" y="50%" class="text text-3">lrc歌词</text>
<text x="50%" y="50%" class="text text-4">lrc歌词</text>
</svg>
<svg id="mplayer" width="400" height="60">
<circle id="btnwrap" cx="20" cy="30" r="15" fill="olive" />
<polygon id="btnplay" points="15 20, 15 40, 30 30" fill="snow" />
<g id="btnpause" fill="snow">
<rect x= "15" y="20" width="3" height="20" />
<rect x="22" y="20" width="3" height="20" />
</g>
<g id="track"stroke-width="2">
<line x1="45" y1="30" x2="245" y2="30" stroke="transparent" stroke-width = "20" />
<line x1="45" y1="30" x2="245" y2="30" stroke="snow" />
<line id="prog" x1="45" y1="30" x2="245" y2="30" stroke="red" stroke-dasharray="200" stroke-dashoffset="200" />
</g>
<text id="tmsg" x="260" y="30">00:00 | 00:00</text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','献天缘-HITA / 吾恩'],
['28.08','（女）一笑拈花让恩怨倦'],
['32.60','一念灭尘世化成天'],
['36.89','一恋成痴心爱恨纠结'],
['42.05','心痛离别 那是缘'],
['47.08','（男）渡千年 箫声远'],
['51.36','意绵绵 眼泪滴成莲'],
['55.87','等你我相约挥情剑'],
['60.99','（合）谁能够破茧 看穿恩怨'],
['63.54','仙逍遥在人间'],
['65.89','（合）贪尘世妄言绝千恋'],
['70.16','莫被谣言迷了眼'],
['74.04','愿化作云烟'],
['76.25','晓梦托蝴蝶'],
['79.03','烟火阑珊倚人间'],
['101.31','（男）渡千年 箫声远'],
['105.70','意绵绵 眼泪滴成莲'],
['110.23','等你我相约挥情剑'],
['115.08','（合）谁能够破茧 看穿恩怨'],
['117.50','仙逍遥在人间'],
['120.13','（合）贪尘世妄言绝千恋'],
['124.42','莫被谣言迷了眼'],
['128.34','愿化作云烟'],
['130.54','晓梦托蝴蝶'],
['133.39','烟火阑珊倚人间'],
['154.68','贪尘世妄言绝千恋'],
['158.34','莫被谣言迷了眼'],
['162.25','愿化作云烟'],
['164.50','晓梦托蝴蝶'],
['167.29','烟火阑珊倚人间'],
['174.66','贪尘世妄言绝千恋'],
['178.73','莫被谣言迷了眼'],
['182.73','愿化作云烟'],
['184.90','晓梦托蝴蝶'],
['187.85','烟火阑珊倚人间'],
['200.00','谢谢欣赏']
];
let aud = new Audio(), lw = prog.getTotalLength(), txtAr = document.querySelectorAll('.text');
aud.src = 'https://music.163.com/song/media/outer/url?id=28631330.mp3';
aud.autoplay = true;
aud.loop = true;
track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - prog.getAttribute('x1')) / lw;
btnwrap.onclick = btnpause.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = lw - lw * aud.currentTime / aud.duration + 'px';
tmsg.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) {
for(ele of txtAr) ele.textContent = lrcAr;
}
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
红影 发表于 2022-7-10 08:10
恭喜队长做成功了
谢谢！
小辣椒 发表于 2022-7-10 10:37
队长这个也是做成功了
小辣椒上午好。老黑说你可以用的。
小辣椒 发表于 2022-7-10 10:37
我很多没有做了
不急的。慢慢来。
加林森 发表于 2022-7-10 11:00
不急的。慢慢来。
前面的不做了，今天黑黑出来的准备做一次
加林森 发表于 2022-7-10 10:59
小辣椒上午好。老黑说你可以用的。
黑黑指音乐催眠{:4_170:}
小辣椒 发表于 2022-7-10 10:46
上班后睡眠慢慢好起来了，主要在家里休息的时候生活不规律，现在就是玩的时间少了一点，睡眠应该好了一点
睡眠是人能够健康的重要依托，睡眠逐步好转是个好现象。
马黑黑 发表于 2022-7-10 11:06
睡眠是人能够健康的重要依托，睡眠逐步好转是个好现象。
是啊，其实正确的作息时间，规律的生活方式很重要，我以前已经完全乱套了。。。。
小辣椒 发表于 2022-7-10 11:10
是啊，其实正确的作息时间，规律的生活方式很重要，我以前已经完全乱套了。。。。
现在调整不迟
小辣椒 发表于 2022-7-10 11:01
前面的不做了，今天黑黑出来的准备做一次
要得的。
马黑黑 发表于 2022-7-10 11:11
现在调整不迟
现在是感觉不调整不行了，否则上班吃不消了
小辣椒 发表于 2022-7-10 11:02
黑黑指音乐催眠
知道啊，我去网易专门找的催眠曲。就是时间有点长。
加林森 发表于 2022-7-10 11:15
要得的。
套用我可以马上做出来，现在按黑黑的要求我可能今天完不成
加林森 发表于 2022-7-10 11:17
知道啊，我去网易专门找的催眠曲。就是时间有点长。
我手机里面多的是
小辣椒 发表于 2022-7-10 11:17
套用我可以马上做出来，现在按黑黑的要求我可能今天完不成
不急的。
小辣椒 发表于 2022-7-10 11:18
我手机里面多的是
我制作这个帖子差点把我催眠了。{:4_170:}
队长学习的真快啊{:5_116:}{:4_187:}赞！{:4_179:}
大猫咪 发表于 2022-7-10 11:24
队长学习的真快啊 赞！
猫猫上来玩了。有空你也可以制作的。{:4_179:}