小辣椒 发表于 2022-9-10 13:22

祝大家中秋节快乐！


<style>
#papa { left: -420px; width: 1437px; height: 719px; top: 150px; box-shadow: 3px 3px 20px #000; background: lightblue url('https://wj.zp68.com/lxx/yunhua/2022/09/09/IF.gif') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; left: calc(50% - 80px); bottom: 30px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 100px; height: 100px; left: 480px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 495px; width: 20px; height: 20px; background: #3d0114; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 500px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #3d0114; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left:520px; font: normal 16px sans-serif; color: #3d0114; }
#lrctext { position: absolute; left: calc(50% + 30px); 140px; bottom: 80px; font: bold 1.5em sans-serif; color: snow; text-shadow: 1px 1px 1px #000; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: Sienna; }
#dt{ position: absolute; width: 326px; height: 148px; top: 565px; left: 114px; }
#lpgo{ position: absolute; width: 95px; height: 95px; top: 593px; left: 1122px; }
</style>

<div id="papa">
   <img id="lpgo" src="https://wj.zp68.com/lxx/yunhua/2022/09/09/yueb.png" alt="" />
   <img id="dt" src="https://wj.zp68.com/lxx/yunhua/2022/09/09/zqj.png" alt="" />
      <div id="btnwrap">
                <span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
                <span id="tmsg">00:00<br>00:00</span>
      </div>
      <div id="lrctext">半个月亮爬上来</div>
</div>

<script>
let aud = new Audio();
let lrcAr = [
                ['00.00','半个月亮爬上来'],
        ['5.97','咿啦啦 爬上来'],
        ['12.61','照着我的姑娘梳妆台'],
        ['19.67','咿啦啦 梳妆台'],
        ['26.31','为什么我的姑娘不出来'],
        ['33.42','咿啦啦 不出来'],
        ['40.18','请你把那纱窗快打开'],
        ['46.84','咿啦啦 快打开'],
        ['53.81','咿啦啦 快打开'],
        ['62.92','半个月亮爬上来'],
        ['71.05','咿啦啦 爬上来'],
        ['77.45','照着我的姑娘梳妆台'],
        ['84.27','咿啦啦 梳妆台'],
        ['90.82','为什么我的姑娘不出来'],
        ['97.51','咿啦啦 不出来'],
        ['105.55','LRC编辑：小辣椒'],
        ['115.57','半个月亮爬上来'],
        ['120.96','咿啦啦 爬上来'],
        ['127.75','照着我的姑娘梳妆台'],
        ['134.32','咿啦啦 梳妆台'],
        ['140.91','为什么我的姑娘不出来'],
        ['147.80','咿啦啦 不出来'],
        ['155.35','祝朋友们中秋节快乐！'],
        ['163.38','Lrc编辑：小辣椒'],
        ['184.48','请你把那纱窗快打开'],
        ['190.92','咿啦啦 快打开'],
        ['197.57','咿啦啦 快打开'],
        ['204.40','请你把那纱窗快打开'],
        ['210.87','咿啦啦 快打开'],
        ['217.47','咿啦啦 快打开'],
        ['224.10','再把你那玫瑰摘一朵'],
        ['231.02','轻轻的 扔下来'],
        ['237.58','再把你那玫瑰摘一朵'],
        ['244.46','轻轻的 扔下来'],
        ['253.44','祝论坛的朋友们中秋节快乐！'],
        ['270.73','祝论坛的朋友们中秋节快乐！']
];
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/09/01.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
      if (isHover(e.offsetX, e.offsetY)) {
                let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
      }
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
      tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
      h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
      for (j = 0; j < lrcAr.length;j ++) {
                if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
      }
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
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>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-9-10 13:23

今天是中秋节，祝论坛的朋友们中秋节快乐！

小辣椒 发表于 2022-9-10 13:23

记得吃月饼啊{:4_172:}

梦油 发表于 2022-9-10 15:15

小辣椒朋友辛苦了！谢谢你，也祝你中秋节快乐！

梦缘 发表于 2022-9-10 15:30

精美的贺帖，欣赏问好老师，制作真漂亮！{:4_191:}

红影 发表于 2022-9-10 15:37

天上一个月亮，播放器里一个月饼，这个中秋贺帖太有创意了。欣赏亲爱的好帖，同祝大家中秋快乐{:4_187:}

小九 发表于 2022-9-10 15:42

小辣椒中秋快乐！{:4_187:}

好漂亮的制作！美！{:4_199:}

马黑黑 发表于 2022-9-10 17:23

华丽丽的效果。

马黑黑 发表于 2022-9-10 17:24

今天天气有点跟俺们做对，上午晴朗，下午阴霾，估计快要下雨了

千羽 发表于 2022-9-10 19:56

图图漂亮歌儿好听，俺这儿是圆圆月亮升上来了{:4_181:}

千羽 发表于 2022-9-10 19:57

小辣椒节日开心快乐{:4_185:}

醉美水芙蓉 发表于 2022-9-10 20:18

绿叶清舟 发表于 2022-9-11 10:51

还有月饼啊，创意太棒了，今天继续乐

顾-念 发表于 2022-9-12 18:33

为啥半个月亮。那半拉月亮呢{:4_203:}过节吃月饼了么

这歌挺高雅，美声唱法
页: [1]
查看完整版本: 祝大家中秋节快乐！