小辣椒的音乐不能关闭测试

马黑黑

修改后的代码：

1. <style>
   
2. #papa { left: -318px; width: 1200px; height: 739px; display: flex; justify-content: center; background: #000 url('http://wx.ttt.dj/data/nfs/img/002.jpg') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; font-size: 18px; position: relative; }
   
3. #papa h2 { position: absolute; margin-top: 20px; font: bold 30px / 30px sans-serif; color: #222; text-shadow: 1px 2px 3px #aaa; }
   
4. #wrapper { position: absolute; left: 40%;top: 220px; width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
   
5. #ball { position: absolute; left: -560px; top: 100px; width: 481px; height: 221px; border-radius: 50%; transform: translateZ(20px);  }
   
6. #btnPlay { position: absolute; left: 40px; bottom: 40px; outline: none; cursor: pointer; }
   
7. #yyMsg { position: absolute; left: 110px; bottom: 40px; color:Black; }
   
8. #btnBegin { position: absolute; bottom: 40px; outline: none; cursor: pointer; }
   
9. #mkMsg { position: absolute; left: 300px; bottom: 40px; }
   
10. </style>
    
11. 
    
12. <div id="papa">
    
13.         <h2></h2>
    
14.         <div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/62e89dd416f2c2beb192d047.gif" alt="" /></div>
    
15.         <input id="btnPlay" type="button" value="音乐停" />
    
16.         <span id="yyMsg">背景音乐 -爱难求情难断</span>
    
17.         <span id="mkMsg"></span>
    
18. </div>
    
19. 
    
20. <script>
    
21. let aud = new Audio();
    
22. aud.src = 'https://wx.ttt.dj/data/nfs/mp3/anqiu.mp3';
    
23. aud.loop = true;
    
24. aud.autoplay = true;
    
25. 
    
26. btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
27. 
    
28. aud.addEventListener('playing', () => btnPlay.value = '音乐停');
    
29. aud.addEventListener('pause', () => btnPlay.value = '音乐放');
    
30. 
    
31. </script>

复制代码

马黑黑

背景音乐 -爱难求情难断

马黑黑

音乐是可以控制的

加林森

老黑无所不能了，太厉害了。我拜你为师吧！

马黑黑

加林森 发表于 2022-8-2 22:34
老黑无所不能了，太厉害了。我拜你为师吧！

对不起，我不收徒

小辣椒

黑黑，太强大了

加林森

马黑黑 发表于 2022-8-2 22:36
对不起，我不收徒

啊，不收就算了！

小辣椒

就是要这个效果

小辣椒

谢谢黑黑，我感觉这个玩音画绝对漂亮@东篱闲人 @千羽

马黑黑

小辣椒 发表于 2022-8-2 22:43
谢谢黑黑，我感觉这个玩音画绝对漂亮@东篱闲人 @千羽

去除空行，30行代码不到的

马黑黑

加林森 发表于 2022-8-2 22:42
啊，不收就算了！

另外去找

马黑黑

小辣椒 发表于 2022-8-2 22:42
就是要这个效果

其实还可以简化一两句，不过也没关系

小辣椒

马黑黑 发表于 2022-8-2 22:30
音乐是可以控制的

现在非常完美

小辣椒

马黑黑 发表于 2022-8-2 22:45
其实还可以简化一两句，不过也没关系

可以有这个效果出来就可以了

马黑黑

小辣椒 发表于 2022-8-2 22:47
现在非常完美

wrapper相关的还是多余的，它原本是用来装盒子的父框，不过也没关系

马黑黑

小辣椒 发表于 2022-8-2 22:48
可以有这个效果出来就可以了

代码冗余问题还是存在的，只是没啥影响

小辣椒

马黑黑 发表于 2022-8-2 22:49
代码冗余问题还是存在的，只是没啥影响

这个问题是我经常出现的

小辣椒

马黑黑 发表于 2022-8-2 22:49
wrapper相关的还是多余的，它原本是用来装盒子的父框，不过也没关系

黑黑要求比较高，做事比较严谨，好老师

加林森

马黑黑 发表于 2022-8-2 22:44
另外去找

马黑黑

加林森 发表于 2022-8-2 23:17

到处有