加林森 发表于 2022-5-21 10:34

《山茶花》- 邓丽君


<style>
.wrap {
      left: -42px;
      width: 844px; height: 472px;
      background: teal url('https://pic.imgdb.cn/item/62884dbd0947543129d15522.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="https://www.joy127.com/url/90449.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-21 10:34

山茶花 - 邓丽君 (Teresa Teng)

词：庄奴

曲：远藤实

山茶花

你说他的家

开满山茶花

每当那春天三月

乡野如图画

村里姑娘上山采茶

歌声荡漾山坡下

年十七 年纪十八

偷偷在说悄悄话

羞答答 羞答答

梦里总是梦见他

一朵花

他说你美丽

就像一朵花

他希望总有一天

把你摘回家

村里姑娘也会羡慕

羡慕你像一朵花

年十七 年纪十八

偷偷在说悄悄话

羞答答 羞答答

梦里总是梦见他

一朵花

但愿你美丽

能像一朵花

更希望有那一天

跟他转回家

村里姑娘出来欢迎

欢迎你这一朵花

年十七 年纪十八

偷偷在说悄悄话

羞答答 羞答答

梦里总是梦见他

马黑黑 发表于 2022-5-21 10:42

经典老歌，欣赏

加林森 发表于 2022-5-21 10:51

马黑黑 发表于 2022-5-21 10:42
经典老歌，欣赏

是的，老歌好听。

红影 发表于 2022-5-21 11:00

好看，这个按钮和那些花朵相映成趣。邓丽君的歌好听{:4_187:}

加林森 发表于 2022-5-21 11:06

红影 发表于 2022-5-21 11:00
好看，这个按钮和那些花朵相映成趣。邓丽君的歌好听

红影上午好。我就是在试播放器配各种图片是什么效果的。

梦油 发表于 2022-5-21 11:18

想当初，能听到邓丽君的歌可不容易，那时他的歌可是被冠以 “靡靡之音” 啊。

加林森 发表于 2022-5-21 11:21

梦油 发表于 2022-5-21 11:18
想当初，能听到邓丽君的歌可不容易，那时他的歌可是被冠以 “靡靡之音” 啊。

是的，谁敢听就抓起来的。

梦油 发表于 2022-5-21 11:27

加林森 发表于 2022-5-21 11:21
是的，谁敢听就抓起来的。

是啊，那时都偷着听。

小辣椒 发表于 2022-5-21 11:32

队长测试多种颜色背景了{:4_199:}

马黑黑 发表于 2022-5-21 11:34

小辣椒 发表于 2022-5-21 11:32
队长测试多种颜色背景了

就看是否协调而已，这个播放控制器能在任何场合使用

加林森 发表于 2022-5-21 11:35

梦油 发表于 2022-5-21 11:27
是啊，那时都偷着听。

是的。

加林森 发表于 2022-5-21 11:36

小辣椒 发表于 2022-5-21 11:32
队长测试多种颜色背景了

小辣椒上来啦。中午好！就是在测试播放器的颜色变化。

梦油 发表于 2022-5-21 14:59

加林森 发表于 2022-5-21 11:35
是的。

现在，可以敞开听了，这就是社会的进步吧。

小辣椒 发表于 2022-5-21 15:45

马黑黑 发表于 2022-5-21 11:34
就看是否协调而已，这个播放控制器能在任何场合使用

队长真的速度的，已经做了几个了，小辣椒还没有动手的

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

加林森 发表于 2022-5-21 11:36
小辣椒上来啦。中午好！就是在测试播放器的颜色变化。

队长你速度的，刚才是手机 回帖会吃字，我就下了，现在上来看看

加林森 发表于 2022-5-21 15:51

小辣椒 发表于 2022-5-21 15:46
队长你速度的，刚才是手机 回帖会吃字，我就下了，现在上来看看

我现在是用手机在回帖呢！

加林森 发表于 2022-5-21 15:53

梦油 发表于 2022-5-21 14:59
现在，可以敞开听了，这就是社会的进步吧。

她唱的歌很好听的。

小辣椒 发表于 2022-5-21 15:53

加林森 发表于 2022-5-21 15:51
我现在是用手机在回帖呢！

队长一面锻炼，一面回帖{:4_173:}

加林森 发表于 2022-5-21 16:08

小辣椒 发表于 2022-5-21 15:53
队长一面锻炼，一面回帖

是啊。就是在走路的。{:4_189:}
页: [1] 2
查看完整版本: 《山茶花》- 邓丽君