前端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 标签的使用 相关的播放 暂停的 方法

相关推荐
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
坐吃山猪3 小时前
SpringBoot01-配置文件
java·开发语言
晚风(●•σ )3 小时前
C++语言程序设计——06 字符串
开发语言·c++
我叫汪枫4 小时前
《Java餐厅的待客之道:BIO, NIO, AIO三种服务模式的进化》
java·开发语言·nio
Nicole-----4 小时前
Python - Union联合类型注解
开发语言·python
晚云与城4 小时前
今日分享:C++ -- list 容器
开发语言·c++
兰雪簪轩4 小时前
分布式通信平台测试报告
开发语言·网络·c++·网络协议·测试报告
FPGAI5 小时前
Qt编程之信号与槽
开发语言·qt
Swift社区5 小时前
从 JDK 1.8 切换到 JDK 21 时遇到 NoProviderFoundException 该如何解决?
java·开发语言
0wioiw06 小时前
Go基础(④指针)
开发语言·后端·golang