前端js html css 基础巩固4

这是生成了不同的按钮 进行显示

每一个按钮对应一个音频

点击按钮 会播放对应的音频

直接上代码

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


        * {
            box-sizing: border-box;
        }

        body {
            background-color: rgb(161, 100, 223);
            font-family: 'Roboto', sans-serif;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100vh;
            overflow: hidden;
            margin: 0;
        }

        .btn {
            background-color: rebeccapurple;
            border-radius: 3px;
            border: none;
            color: #fff;
            margin: 1rem;
            padding: 1.5rem 3rem;
            font-size: 1.2rem;
            font-family: inherit;
            cursor: pointer;
        }

        .btn:hover {
            opacity: .9;
        }

        .btn:focus {
            outline: none;
        }
    </style>
</head>

<body>
    <audio id="applause" src="./sounds/applause.mp3"></audio>
    <audio id="boo" src="./sounds/boo.mp3"></audio>
    <audio id="gasp" src="./sounds/gasp.mp3"></audio>
    <audio id="tada" src="./sounds/tada.mp3"></audio>
    <audio id="victory" src="./sounds/victory.mp3"></audio>
    <audio id="wrong" src="./sounds/wrong.mp3"></audio>
    <div id="buttons"></div>

    <script>
        const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong'];
        sounds.forEach((sound) => {
            const btn = document.createElement('button')
            btn.classList.add('btn')
            btn.innerText = sound

            btn.addEventListener('click', () => {
                stopSongs()
                document.getElementById(sound).play()
            })
            document.getElementById("buttons").appendChild(btn)

        })

        function stopSongs() {
            sounds.forEach((sound) => {
                const song = document.getElementById(sound)
                song.pause()
                song.currrentTime = 0

            })
        }
    </script>







</body>

</html>

主要是考验的是 当前 生成 元素的语法 以及 audio 标签的使用 相关的播放 暂停的 方法

相关推荐
心情好的小球藻几秒前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜9 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己12 分钟前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
Y40900119 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB2422 分钟前
html复习
javascript·microsoft·html
汉得数字平台27 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹33 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
古月-一个C++方向的小白6 小时前
C++11之lambda表达式与包装器
开发语言·c++
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss