马黑黑 发表于 2022-5-20 20:05

夏雪冬花

<style>
.wrap {
        left: -30px;
        width: 820px; height: 528px;
        background: teal url('/data/attachment/forum/202205/20/200139juu3xx33cu31rp61.jpg') no-repeat center/cover;
        position: relative;
}
.circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px; height: 80px;
        left: 10px; bottom: 10px;
        border: solid 6px transparent;
        border-radius: 50%;
        background-image: radial-gradient(ghostwhite, transparent), linear-gradient(120deg,tomato,green,red,gold);
        background-origin: border-box;
        background-clip: content-box, border-box;
        cursor: pointer;
        font: normal 14px sans-serif;
        position: absolute;
}
.circle::before { position: absolute; content: attr(data-per); bottom: 20%;}
.circle::after { position: absolute; content: ''; width: 10px; height: 10px; background: olive; border-radius: 50%; }
.hand {
        position: absolute; width: 2px; height: 50%;
        bottom: 50%; background: rgba(200,20,20,.45);
        transform-origin: bottom;
}
</style>

<div class="wrap">
        <div class="circle" data-per="0%">
                <div class="hand"></div>
        </div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2021/09/24/16249fde90a266e3a554e9324c83c3b8.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let circle = document.querySelector('.circle');
let hand = document.querySelector('.hand');
let aud = document.querySelector('#aud');
let current, task;

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

circle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        hand.style.transform = `rotate(${360*prog/100}deg`;
        circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>

马黑黑 发表于 2022-5-20 20:06

主要是演示一下如何使用新播放器按钮：
<style>
.wrap {
        left: -30px;
        width: 820px; height: 528px;
        background: teal url('/data/attachment/forum/202205/20/200139juu3xx33cu31rp61.jpg') no-repeat center/cover;
        position: relative;
}
.circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px; height: 80px;
        left: 10px; bottom: 10px;
        border: solid 6px transparent;
        border-radius: 50%;
        background-image: radial-gradient(ghostwhite, transparent), linear-gradient(120deg,tomato,green,red,gold);
        background-origin: border-box;
        background-clip: content-box, border-box;
        cursor: pointer;
        font: normal 14px sans-serif;
        position: absolute;
}
.circle::before { position: absolute; content: attr(data-per); bottom: 20%;}
.circle::after { position: absolute; content: ''; width: 10px; height: 10px; background: olive; border-radius: 50%; }
.hand {
        position: absolute; width: 2px; height: 50%;
        bottom: 50%; background: rgba(200,20,20,.45);
        transform-origin: bottom;
}
</style>

<div class="wrap">
        <div class="circle" data-per="0%">
                <div class="hand"></div>
        </div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2021/09/24/16249fde90a266e3a554e9324c83c3b8.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let circle = document.querySelector('.circle');
let hand = document.querySelector('.hand');
let aud = document.querySelector('#aud');
let current, task;

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

circle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        hand.style.transform = `rotate(${360*prog/100}deg`;
        circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>


红影 发表于 2022-5-20 20:17

这个好像和纯粹按钮展示的时候有点不一样呢，那个指针和进度百分比的位置都做了调整。黑黑真细心{:4_187:}

红影 发表于 2022-5-20 20:18

外语歌，听了半天没听出歌词{:4_173:}

加林森 发表于 2022-5-20 20:36

老黑这个制作真漂亮，图片还专门制作了五星的，看见以为跑国外的圣山了呢。歌曲也很美的。{:4_199:}

马黑黑 发表于 2022-5-20 20:53

红影 发表于 2022-5-20 20:17
这个好像和纯粹按钮展示的时候有点不一样呢，那个指针和进度百分比的位置都做了调整。黑黑真细心

嗯，和单纯推出的有所区别，一点点微调

小辣椒 发表于 2022-5-20 20:53

黑黑~~太美了{:4_178:}

小辣椒 发表于 2022-5-20 20:54

这个可以和转盘一样中间加个其他颜色吗

马黑黑 发表于 2022-5-20 20:54

小辣椒 发表于 2022-5-20 20:53
黑黑~~太美了

播放器的颜色像玉石一样的效果

马黑黑 发表于 2022-5-20 20:55

小辣椒 发表于 2022-5-20 20:54
这个可以和转盘一样中间加个其他颜色吗

随便的

马黑黑 发表于 2022-5-20 20:57

红影 发表于 2022-5-20 20:18
外语歌，听了半天没听出歌词

听歌调子就行

马黑黑 发表于 2022-5-20 20:58

加林森 发表于 2022-5-20 20:36
老黑这个制作真漂亮，图片还专门制作了五星的，看见以为跑国外的圣山了呢。歌曲也很美的。

认得回家的路就好

加林森 发表于 2022-5-20 20:59

马黑黑 发表于 2022-5-20 20:58
认得回家的路就好

当然啦。找不到北可不行的。

马黑黑 发表于 2022-5-20 21:04

加林森 发表于 2022-5-20 20:59
当然啦。找不到北可不行的。

星星指路

加林森 发表于 2022-5-20 21:05

马黑黑 发表于 2022-5-20 21:04
星星指路

对头

大猫咪 发表于 2022-5-20 21:19

新代码真漂亮   老黑辛苦   继续学习    {:4_187:}{:4_179:}周末快乐！{:4_191:}

马黑黑 发表于 2022-5-20 21:44

大猫咪 发表于 2022-5-20 21:19
新代码真漂亮   老黑辛苦   继续学习    周末快乐！

啊？到周末了？

小辣椒 发表于 2022-5-20 21:44

马黑黑 发表于 2022-5-20 20:55
随便的

做的时候再看看了，现在小辣椒懒得动脑子了

马黑黑 发表于 2022-5-20 21:45

小辣椒 发表于 2022-5-20 21:44
做的时候再看看了，现在小辣椒懒得动脑子了

慢慢来

小辣椒 发表于 2022-5-20 21:46

马黑黑 发表于 2022-5-20 20:54
播放器的颜色像玉石一样的效果

美{:4_189:}
页: [1] 2
查看完整版本: 夏雪冬花