马黑黑 发表于 2022-5-20 07:42

不是那球，还是那球

本帖最后由 马黑黑 于 2022-5-20 07:45 编辑 <br /><br /><style>

.circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        border: solid 10px transparent;
        border-radius: 50%;
        background-image: radial-gradient(ghostwhite, transparent), linear-gradient(to right, pink, green, red, gold);
        background-origin: border-box;
        background-clip: content-box, border-box;
        cursor: pointer;
        position: relative;
}
.circle::before {
        position: absolute;
        content: attr(data-per);
}
.hand {
        position: absolute;
        width: 6px;
        height: 45px;
        top: 6px;
        border-radius: 50%;
        background: rgba(200,20,20,.45);
        transform-origin: bottom;
}
.hand::before {
        position: absolute;
        content: '';
        width: 16px;
        height: 16px;
        left: -5px;
        bottom: -8px;
        border-radius: 50%;
        background: rgba(0,0,0,.25);
}
</style>

<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=276703.mp3" controls="controls"></audio><br><br></p>
<div class="circle" data-per="0%">
        <div class="hand"></div>
</div>

<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 07:46

原创代码：
<style>

.circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        border: solid 10px transparent;
        border-radius: 50%;
        background-image: radial-gradient(ghostwhite, transparent), linear-gradient(to right, pink, green, red, gold);
        background-origin: border-box;
        background-clip: content-box, border-box;
        cursor: pointer;
        position: relative;
}
.circle::before {
        position: absolute;
        content: attr(data-per);
}
.hand {
        position: absolute;
        width: 6px;
        height: 45px;
        top: 6px;
        border-radius: 50%;
        background: rgba(200,20,20,.45);
        transform-origin: bottom;
}
.hand::before {
        position: absolute;
        content: '';
        width: 16px;
        height: 16px;
        left: -5px;
        bottom: -8px;
        border-radius: 50%;
        background: rgba(0,0,0,.25);
}
</style>

<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=276703.mp3" controls="controls"></audio><br><br></p>
<div class="circle" data-per="0%">
        <div class="hand"></div>
</div>

<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 07:48

需要自动+循环播放、不显示播放器界面的，下面这句，

<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=276703.mp3" controls="controls"></audio><br><br></p>

改为，

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=276703.mp3" autoplay="autoplay" loop="loop"></audio>

马黑黑 发表于 2022-5-20 07:56

指针类仪表按钮的代码会多一些。原因：

一、HTML结构，不能使用单元素，因为使用单元素意味着要用伪元素，而JS对伪元素的操控能力十分有限（伪元素不属于DOM内元素，JS主要是对DOM操作）。

二、指针旋转360度要与进度的百分比建立关联，里面需要加入一个算法，虽然简单，但总会需要变量与计算代码。

马黑黑 发表于 2022-5-20 08:00

仪表的颜色请修改第十一行：

background-image: radial-gradient(ghostwhite, transparent), linear-gradient(to right, pink, green, red, gold);

第一组颜色，radial-gradient是仪表里面的背景渐变颜色，也可改用线性渐变；第二组颜色是边框渐变颜色，top right是方向，其他颜色可增可减，可删可改，自己满意就好

马黑黑 发表于 2022-5-20 08:03

播放器和仪表盘建立了关联，手动控制播放器的进度仪表盘会同步变化

红影 发表于 2022-5-20 08:54

这个换成指针加进度百分比了，不同的表现方式{:4_187:}

加林森 发表于 2022-5-20 11:57

又看见一个新的播放器了。老黑厉害。这下又可以玩了。{:4_189:}

马黑黑 发表于 2022-5-20 12:08

加林森 发表于 2022-5-20 11:57
又看见一个新的播放器了。老黑厉害。这下又可以玩了。

嗯，这个有这个的玩法

马黑黑 发表于 2022-5-20 12:09

红影 发表于 2022-5-20 08:54
这个换成指针加进度百分比了，不同的表现方式

小小的改变，长相又不一样了

加林森 发表于 2022-5-20 12:09

马黑黑 发表于 2022-5-20 12:08
嗯，这个有这个的玩法

嗯嗯，还得把图片装进去才行。

马黑黑 发表于 2022-5-20 12:11

加林森 发表于 2022-5-20 12:09
嗯嗯，还得把图片装进去才行。

这是个工具，放到你的帖子里去就行啊

加林森 发表于 2022-5-20 12:27

马黑黑 发表于 2022-5-20 12:11
这是个工具，放到你的帖子里去就行啊

嗯嗯。老黑，你去我那个帖看看，我的代码是不是有问题啊？怎么蝴蝶翻不出来呢？

马黑黑 发表于 2022-5-20 13:03

加林森 发表于 2022-5-20 12:27
嗯嗯。老黑，你去我那个帖看看，我的代码是不是有问题啊？怎么蝴蝶翻不出来呢？

已经修改过

加林森 发表于 2022-5-20 13:07

马黑黑 发表于 2022-5-20 13:03
已经修改过

看见了，谢谢啦！

马黑黑 发表于 2022-5-20 18:08

加林森 发表于 2022-5-20 13:07
看见了，谢谢啦！

不客气

加林森 发表于 2022-5-20 18:30

马黑黑 发表于 2022-5-20 18:08
不客气

嗯嗯。

马黑黑 发表于 2022-5-20 19:08

加林森 发表于 2022-5-20 18:30
嗯嗯。

{:4_190:}

加林森 发表于 2022-5-20 19:12

马黑黑 发表于 2022-5-20 19:08


谢谢！

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

加林森 发表于 2022-5-20 19:12
谢谢！

不客气的
页: [1] 2
查看完整版本: 不是那球，还是那球