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

相关推荐
小磊哥er6 分钟前
【前端工程化】前端组件模版构建那些事
前端
尘浮7286 分钟前
60天python训练计划----day59
开发语言·python
前端 贾公子7 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆12 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山20 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45329 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^30 分钟前
条件渲染 v-show与v-if
前端
Chef_Chen35 分钟前
从0开始学习R语言--Day39--Spearman 秩相关
开发语言·学习·r语言
棉花糖超人38 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
不学会Ⅳ42 分钟前
Mac M芯片搭建jdk源码环境(jdk24)
java·开发语言·macos