|
|
楼主 |
发表于 2023-7-1 07:38
|
显示全部楼层
代码中出现的错误主要是帖子父元素设置了 pointer-events: none; 属性和值，该属性用于禁止、开放鼠标点击动作。我常常使用这个属性，目的在于高效利用伪元素。你这个帖子，不需要伪元素的交互操作，父元素就不需要设置此属性，可将所有的 pointer-events 属性和值全部删除。很多属性会有继承性，你在父元素设置了相应属性，子孙元素会跟着继承。
整理后的代码如下：
- <style>
- #papa {
- margin: 0px 0 0 calc(50% - 593px);
- width: 1024px;
- height: 630px;
- background: gray url('https://pic.imgdb.cn/item/611351cc5132923bf8ef79cb.jpg') no-repeat center/cover;
- box-shadow: 3px 3px 20px #000;
- position: relative;
- }
- #mydiv {
- position: absolute;
- left: 60px; top: 178px;
- padding: 20px 10px;
- width:270px;
- height:206px;
- border-radius:25px 15px;
- box-shadow: 0px 0px 2px #eaeaea;
- color: navy;
- background: #eaeaea;
- --state: paused;
- }
- #mydiv::before {
- content: attr(data-tt);
- position: absolute;
- left: 86px;
- bottom: -6px;
- padding: 0 20px;
- font-size: 14px;
- line-height: 20px;
- }
- #mydiv p { padding: 8px 0; font-size: 16px; }
- #mplayer {
- position: absolute;
- width: 58px;
- height: 58px;
- background: conic-gradient(DimGray,LightGrey,DimGray,LightGrey);
- border-radius: 50%;
- bottom: -76px;
- left: 116px;
- cursor: pointer;
- animation: rot 5s infinite linear var(--state);
- }
- #mlist { margin: 20px; column-count: 2; column-rule: 2px solid transparent; column-gap: 30px; column-fill: balance; }
- #mlist > span { display: block; width: fit-content; }
- #mlist a { text-decoration: none; }
- #mlist > span > a:hover { cursor: pointer; color: red; }
- .lighten > a { color: red; }
- .normal > a { color: var(--fColor); }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
- <div id="papa">
- <div id="mydiv" data-tt="00:00/00:00">
- <div id="mlist" ></div>
- <div id="mplayer"></div>
- </div>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=444323047" autoplay="autoplay"></audio>
- <script>
- (function () {
- let spans = [];
- let ypAr = [['444323047','步步莲花'],['30413344','水墨兰亭'],['131149','紫禁花园'],['522467506','云门'],['522468278','一拂尘烟'],['30413351','禅茶人生'],['131245','平遥古韵'],['522467321','天地行云'],['30413352','云水潇湘'],['30413343','太极幻影']];
- ypAr.forEach((item) => item[0] = 'https://music.163.com/song/media/outer/url?id=' + item[0]);
- ypAr.forEach((item, key) => {let sp = document.createElement('span');sp.className = 'normal';sp.innerHTML = `${key+1} <a onclick="javascript:mplay(${key})">${ypAr[key][1]}</a>`;mlist.appendChild(sp);spans.push(sp);});
- 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;};
- mplay = (idx, flag = 0) => {aud.src = ypAr[idx][0];if (flag >= 0) aud.play();spans[lastIdx].className = 'normal';spans[idx].className = 'lighten';lastIdx = idx;}
- let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('ended', () => mplay(Math.floor(Math.random() * ypAr.length)));
- aud.addEventListener('timeupdate', () => mydiv.dataset.tt = toMin(aud.currentTime) + ' / ' + toMin(aud.duration));
- mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
- let lastIdx = Math.floor(Math.random() * ypAr.length);
- mplay(lastIdx);
- })();
- </script>
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
楼主: 马黑黑
显身卡
发表于 2023-7-1 00:32
发表于 2023-7-1 11:40
发表于 2023-7-1 18:18