醉美水芙蓉 发表于 2023-8-6 20:22

测试东篱音画

本帖最后由 醉美水芙蓉 于 2023-8-6 20:22 编辑 <br /><br /> <style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64cced6c1ddac507ccfdb0ec.jpg') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:85%;top:10%; transform: translate(-50%, 10px);font:normal 1.5em/ 40px 华文隶书; color:#0000;filter:hue-rotate(360deg)contrast(120%)brightness(200%)drop-shadow( 0px 2px 0px #ffffff); z-index: 2; writing-mode: vertical-rl;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#E00000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);writing-mode: vertical-rl; }
@keyframes cover1{0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }
@keyframes cover2 {0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }

#clock {z-index: 20;
      margin: 40% 5%;
      width: 280px;
      height: 150px;
          color: #eeeeee;
       border-radius: 0px 150px 0px 150px;
      display: grid;background: url('https://pic.imgdb.cn/item/64cce8621ddac507ccf1b726.jpg') center/cover no-repeat;
box-shadow:0 0px 0px 2px #ffffff;

      place-items: center;
      position: relative;
      cursor: pointer;
      opacity: 1;
      --state: paused;
}
#clock::before, #clock::after {
      position: absolute;
      content: '';
      width: 3px;
      height: 68px;
}
#clock::after {
      --deg: 360deg;
      bottom: 50%;
      background: #00ff00;
      opacity: 1;
      transform-origin: 50% 100%;
      animation: rot var(--time) infinite linear var(--state);
}
#clock::before {
      --deg: 25deg;
      top: 50%;
      background: #ff0000;
      transform: rotate(-45deg);
      transform-origin: 50% 0;
      animation: rot .3s infinite alternate linear var(--state);
}
#clock > span {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #eeeeee;
      z-index: 2;
}
#clock > span:nth-of-type(2) {
      top: 0px;
      width: 0px;
      height: 0px;
      background: #cccccc;
}
@keyframes rot {
      to {transform: rotate(var(--deg)); }}

.photo {width: 50%; height: 50%;

position: absolute;z-index: 1;
top:25%; left:30%;filter:contrast(120%)brightness(100%);
opacity: 0;box-shadow:0 0px 0px 2px #ffffff;
animation-name: round ;animation-duration: 180s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round{0% {
-webkit-transform:rotate(0)scale(1)translate(-50%,-40%);
opacity:1}
5% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,30%);
opacity:1}
8% {
-webkit-transform:rotate(-20deg)scale(1)translate(-50%,30%);
opacity:1}
11% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,-50%);
opacity:1}

15% {
-webkit-transform:rotate(-20deg)scale(0.6)translate(100%,-60%);
opacity:1}
18% {
-webkit-transform:rotate(80deg)scale(0)translate(-600%,450%);
opacity:0}
}

img:nth-child(1) {animation-delay: 168s;}
img:nth-child(2) {animation-delay: 156s;}
img:nth-child(3) {animation-delay: 144s;}
img:nth-child(4) {animation-delay: 132s;}
img:nth-child(5) {animation-delay: 120s;}
img:nth-child(6) {animation-delay: 108s;}
img:nth-child(7) {animation-delay: 96s;}
img:nth-child(8) {animation-delay: 84s;}
img:nth-child(9) {animation-delay: 72s;}
img:nth-child(10){animation-delay: 60s;}
img:nth-child(11){animation-delay: 48s;}
img:nth-child(12){animation-delay: 36s;}
img:nth-child(13){animation-delay: 24s;}
img:nth-child(14) {animation-delay: 12s;}
img:nth-child(15) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10),
.stop img:nth-child(11),
.stop img:nth-child(12),
.stop img:nth-child(13),
.stop img:nth-child(14),
.stop img:nth-child(15){animation-play-state: paused;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:3%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="testImg"><img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd5ad1ddac507ccc9ad32.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd5ef1ddac507ccca2da5.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd61c1ddac507ccca969c.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd6551ddac507cccb111d.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd68d1ddac507cccb8071.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd6c01ddac507cccbe320.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7031ddac507cccc5b2a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7311ddac507ccccb6fd.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd75f1ddac507cccd2107.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7c41ddac507ccce05b9.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7fc1ddac507ccce785c.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd83a1ddac507cccefe4e.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd8661ddac507cccf5c3a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd8c41ddac507ccd0157a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd9281ddac507ccd0d7d8.jpg">
</div>
<div id="clock" style="--time:NaNs;">00:00 &nbsp; &nbsp; 00:00<span></span><span></span></div>
<div id="lrc" data-lrc="代码：亚伦影音工作室">代码：亚伦影音工作室</div>
</div>

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

<script>
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;};
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => clock.style.setProperty('--state','running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => clock.style.setProperty('--time',aud.duration + 's'));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + ' &nbsp; &nbsp; ' +toMin(aud.duration) + '<span></span><span></span>');
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };
</script>

<script>
(function() {
      let mKey = 0, mFlag = true;
      let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
      let averAdd = 0, offset = 0;
      let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
      let geci = ` 作词 : 徐杰 作曲 : 路勇
编辑、配图：东篱闲人
月色入壶清凉如水
焚香煮炉故友相对
天地辽阔敞开心扉
悟却禅机收获智慧
茶香四溢自在入微
莲花盛开菩提相随
琴声悠悠举杯同醉
广结善缘喫茶为媒
岁月蹉跎融入茶禅一味
浮浮沉沉阅尽千山万水
苦涩甘甜都在清茶一杯
荡涤红尘我们用心体会
世事沧桑化作茶禅一味
起起落落上演离合喜悲
爱恨情仇不过淡茶一杯
放下所有才懂此中真味

茶香四溢自在入微
莲花盛开菩提相随
琴声悠悠举杯同醉
广结善缘喫茶为媒
岁月蹉跎融入茶禅一味
浮浮沉沉阅尽千山万水
苦涩甘甜都在清茶一杯
荡涤红尘我们用心体会
世事沧桑化作茶禅一味
起起落落上演离合喜悲
爱恨情仇不过淡茶一杯
放下所有才懂此中真味

岁月蹉跎融入茶禅一味
浮浮沉沉阅尽千山万水
苦涩甘甜都在清茶一杯
荡涤红尘我们用心体会
世事沧桑化作茶禅一味
起起落落上演离合喜悲
爱恨情仇不过淡茶一杯
放下所有才懂此中真味
放下所有才懂此中真味


`;
      let lrcAr = getLrcAr(geci);
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
      let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
      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;}
      let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('seeked', () => calcKey());
      aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
      mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
var image = document.getElementById("testImg"),
    button = document.getElementById("clock");

if (image.classList && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>

醉美水芙蓉 发表于 2023-8-6 20:22

本帖最后由 醉美水芙蓉 于 2023-8-6 20:24 编辑

<style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64cced6c1ddac507ccfdb0ec.jpg') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:85%;top:10%; transform: translate(-50%, 10px);font:normal 1.5em/ 40px 华文隶书; color:#0000;filter:hue-rotate(360deg)contrast(120%)brightness(200%)drop-shadow( 0px 2px 0px #ffffff); z-index: 2; writing-mode: vertical-rl;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#E00000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);writing-mode: vertical-rl; }
@keyframes cover1{0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }
@keyframes cover2 {0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }

#clock {z-index: 20;
      margin: 40% 5%;
      width: 280px;
      height: 150px;
          color: #eeeeee;
       border-radius: 0px 150px 0px 150px;
      display: grid;background: url('https://pic.imgdb.cn/item/64cce8621ddac507ccf1b726.jpg') center/cover no-repeat;
box-shadow:0 0px 0px 2px #ffffff;

      place-items: center;
      position: relative;
      cursor: pointer;
      opacity: 1;
      --state: paused;
}
#clock::before, #clock::after {
      position: absolute;
      content: '';
      width: 3px;
      height: 68px;
}
#clock::after {
      --deg: 360deg;
      bottom: 50%;
      background: #00ff00;
      opacity: 1;
      transform-origin: 50% 100%;
      animation: rot var(--time) infinite linear var(--state);
}
#clock::before {
      --deg: 25deg;
      top: 50%;
      background: #ff0000;
      transform: rotate(-45deg);
      transform-origin: 50% 0;
      animation: rot .3s infinite alternate linear var(--state);
}
#clock > span {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #eeeeee;
      z-index: 2;
}
#clock > span:nth-of-type(2) {
      top: 0px;
      width: 0px;
      height: 0px;
      background: #cccccc;
}
@keyframes rot {
      to {transform: rotate(var(--deg)); }}

.photo {width: 50%; height: 50%;

position: absolute;z-index: 1;
top:25%; left:30%;filter:contrast(120%)brightness(100%);
opacity: 0;box-shadow:0 0px 0px 2px #ffffff;
animation-name: round ;animation-duration: 180s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round{0% {
-webkit-transform:rotate(0)scale(1)translate(-50%,-40%);
opacity:1}
5% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,30%);
opacity:1}
8% {
-webkit-transform:rotate(-20deg)scale(1)translate(-50%,30%);
opacity:1}
11% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,-50%);
opacity:1}

15% {
-webkit-transform:rotate(-20deg)scale(0.6)translate(100%,-60%);
opacity:1}
18% {
-webkit-transform:rotate(80deg)scale(0)translate(-600%,450%);
opacity:0}
}

img:nth-child(1) {animation-delay: 168s;}
img:nth-child(2) {animation-delay: 156s;}
img:nth-child(3) {animation-delay: 144s;}
img:nth-child(4) {animation-delay: 132s;}
img:nth-child(5) {animation-delay: 120s;}
img:nth-child(6) {animation-delay: 108s;}
img:nth-child(7) {animation-delay: 96s;}
img:nth-child(8) {animation-delay: 84s;}
img:nth-child(9) {animation-delay: 72s;}
img:nth-child(10){animation-delay: 60s;}
img:nth-child(11){animation-delay: 48s;}
img:nth-child(12){animation-delay: 36s;}
img:nth-child(13){animation-delay: 24s;}
img:nth-child(14) {animation-delay: 12s;}
img:nth-child(15) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10),
.stop img:nth-child(11),
.stop img:nth-child(12),
.stop img:nth-child(13),
.stop img:nth-child(14),
.stop img:nth-child(15){animation-play-state: paused;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:3%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="testImg"><img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd5ad1ddac507ccc9ad32.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd5ef1ddac507ccca2da5.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd61c1ddac507ccca969c.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd6551ddac507cccb111d.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd68d1ddac507cccb8071.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd6c01ddac507cccbe320.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7031ddac507cccc5b2a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7311ddac507ccccb6fd.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd75f1ddac507cccd2107.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7c41ddac507ccce05b9.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd7fc1ddac507ccce785c.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd83a1ddac507cccefe4e.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd8661ddac507cccf5c3a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd8c41ddac507ccd0157a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd9281ddac507ccd0d7d8.jpg">
</div>
<div id="clock" style="--time:NaNs;">00:00 &nbsp; &nbsp; 00:00<span></span><span></span></div>
<div id="lrc" data-lrc="代码：亚伦影音工作室">代码：亚伦影音工作室</div>
</div>

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

<script>
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;};
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => clock.style.setProperty('--state','running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => clock.style.setProperty('--time',aud.duration + 's'));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + ' &nbsp; &nbsp; ' +toMin(aud.duration) + '<span></span><span></span>');
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };
</script>

<script>
(function() {
      let mKey = 0, mFlag = true;
      let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
      let averAdd = 0, offset = 0;
      let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
      let geci = ` 作词 : 徐杰 作曲 : 路勇
编辑、配图：东篱闲人
月色入壶清凉如水
焚香煮炉故友相对
天地辽阔敞开心扉
悟却禅机收获智慧
茶香四溢自在入微
莲花盛开菩提相随
琴声悠悠举杯同醉
广结善缘喫茶为媒
岁月蹉跎融入茶禅一味
浮浮沉沉阅尽千山万水
苦涩甘甜都在清茶一杯
荡涤红尘我们用心体会
世事沧桑化作茶禅一味
起起落落上演离合喜悲
爱恨情仇不过淡茶一杯
放下所有才懂此中真味

茶香四溢自在入微
莲花盛开菩提相随
琴声悠悠举杯同醉
广结善缘喫茶为媒
岁月蹉跎融入茶禅一味
浮浮沉沉阅尽千山万水
苦涩甘甜都在清茶一杯
荡涤红尘我们用心体会
世事沧桑化作茶禅一味
起起落落上演离合喜悲
爱恨情仇不过淡茶一杯
放下所有才懂此中真味

岁月蹉跎融入茶禅一味
浮浮沉沉阅尽千山万水
苦涩甘甜都在清茶一杯
荡涤红尘我们用心体会
世事沧桑化作茶禅一味
起起落落上演离合喜悲
爱恨情仇不过淡茶一杯
放下所有才懂此中真味
放下所有才懂此中真味


`;
      let lrcAr = getLrcAr(geci);
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
      let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
      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;}
      let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('seeked', () => calcKey());
      aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
      mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
var image = document.getElementById("testImg"),
    button = document.getElementById("clock");

if (image.classList && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>

醉美水芙蓉 发表于 2023-8-6 20:23

@东篱闲人 老师请查收！

红影 发表于 2023-8-6 20:57

水芙蓉美女太棒了。东篱大哥没弄明白的地方，你帮着弄好了{:4_199:}

红影 发表于 2023-8-6 20:57

东篱大哥快来看@东篱闲人{:4_187:}

东篱闲人 发表于 2023-8-6 21:52

就是这意思！{:5_116:}

东篱闲人 发表于 2023-8-6 21:52

芙蓉辛苦了，必须喝水。。。{:4_180:}

东篱闲人 发表于 2023-8-6 21:52

红影 发表于 2023-8-6 20:57
东篱大哥快来看@东篱闲人

来啦。。。{:4_187:}

醉美水芙蓉 发表于 2023-8-6 22:01

东篱闲人 发表于 2023-8-6 21:52
芙蓉辛苦了，必须喝水。。。

东篱老师代码收好，你的代码前面后面好多多余的代码记得删除！

醉美水芙蓉 发表于 2023-8-6 22:02

红影 发表于 2023-8-6 20:57
水芙蓉美女太棒了。东篱大哥没弄明白的地方，你帮着弄好了

红影美女比我懂得多，向你学习呢！

东篱闲人 发表于 2023-8-6 22:02

醉美水芙蓉 发表于 2023-8-6 22:01
东篱老师代码收好，你的代码前面后面好多多余的代码记得删除！

俺就保存你这个了，，，{:5_112:}

红影 发表于 2023-8-6 22:08

东篱闲人 发表于 2023-8-6 21:52
来啦。。。

芙蓉帮你调好还附加了代码，很仔细呢。

红影 发表于 2023-8-6 22:09

醉美水芙蓉 发表于 2023-8-6 22:02
红影美女比我懂得多，向你学习呢！

哪里，我也不懂啊，每次都磕磕绊绊的{:4_173:}
页: [1]
查看完整版本: 测试东篱音画