|
|

楼主 |
发表于 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>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|