|
|

楼主 |
发表于 2024-1-4 17:45
|
显示全部楼层
帖子代码
- <style>
- #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/bixw.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
- #papa:hover #wrap { opacity: .75; }
- #papa:hover #vid { mix-blend-mode: screen; }
- #wrap { position: absolute; left: 20px; bottom: 20px; padding: 10px; border: 1px solid tan; border-radius: 10px; background: #eee; box-shadow: 2px 2px 6px gray; font-size: 15px; opacity: 0.2; transition: opacity 1s; }
- #wrap::before { position: absolute; left: 6px; top: 4px; content: '半城夏味'; }
- #calcMsg { margin: 24px 0 8px 0; padding: 4px; height: 20px; background: white; font: normal 14px/20px sans-serif; overflow: hidden; }
- #cBox { max-width: 126px; display: flex; gap: 2px; flex-wrap: wrap; }
- #cBox span { display: grid; place-items: center; width: 30px; height: 30px; background: lightblue; border-radius: 50%; }
- #btnPlay { margin: 10px 0 0 0; padding: 2px; text-align: center; cursor: pointer; border-radius: 10px; background: lightblue; }
- #btnPlay:hover { color: red; }
- #vid { position: absolute; width: 1180px; height: 640px; mix-blend-mode: darken; object-fit: cover; pointer-events: none; }
- </style>
- <div id="papa">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=547580245" autoplay loop></audio>
- <video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/02/12/5b51b120c01fa.mp4" loop muted></video>
- <div id="wrap">
- <div id="calcMsg"></div>
- <div id="cBox"></div>
- <div id="btnPlay">暂停&播放</div>
- </div>
- </div>
- <script>
- let charIdx = 0, equation = '', btns = [], timer;
- let spans = ['0','1','2','3','4','5','6','7','8','9','.','=','+','-','*','/'];
- spans.forEach((span,key) => {
- let sp = document.createElement('span');
- sp.innerText = span;
- cBox.appendChild(sp);
- btns.push(sp);
- });
- let mkequ = () => {
- let operators = ['+','-','*','/'];
- var n1 = Math.floor(Math.random() * 1000),
- n2 = Math.floor(Math.random() * 1000),
- operate = operators[Math.floor(Math.random() * 4)];
- let res = parseFloat(eval(`${n1}${operate}${n2}`));
- if(res.toString().indexOf('.') != -1) res = res.toFixed(2);
- return `${n1}${operate}${n2}=${res}`;
- };
- equation = mkequ();
- let update = () => {
- let charNow = equation.charAt(charIdx);
- calcMsg.innerText += charNow;
- for(let j = 0; j < btns.length; j ++) {
- if(btns[j].innerText === charNow) btns[j].style.background = 'pink';
- }
- charIdx ++;
- if(charIdx > equation.length) {
- calcMsg.innerText = '';
- charIdx = 0;
- equation = mkequ();
- btns.forEach(elm => elm.style.background = 'lightblue');
- }
- timer = setTimeout(update,300);
- };
- let mState = () => {
- aud.paused ?
- (papa.style.setProperty('--state','paused'), timer = clearTimeout(timer), btnPlay.innerText = '播放', vid.pause()) :
- (papa.style.setProperty('--state','running'), timer = setTimeout(update,300), btnPlay.innerText = '暂停', vid.play());
- };
- aud.addEventListener('playing', mState, false);
- aud.addEventListener('pause', mState, false);
- btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
|