3.5 KiB
3.5 KiB
id | challengeType | forumTopicId | title |
---|---|---|---|
587d7dbc367417b2b2512bae | 3 | 301370 | 构建一台鼓式机器 |
Description
id="drum-machine"
属性的外层容器,该容器包含了其他所有元素。
需求 2:在具有#drum-machine
属性的元素内,我应该能看到一个具有 id="display"
属性的元素。
需求 3:在具有#drum-machine
属性的元素内,我应该能看到 9 个可以点击的鼓垫元素,且每个鼓垫元素都应该有一个值为drum-pad
的 class 属性。一个用于描述触发鼓垫音频片段的特殊 id,以及以下键值之一的文本内容:Q、W、E、A、S、D、Z、X、C。这些鼓垫必须按照以上顺序排列。
需求 4:在每一个具有.drum-pad
属性的元素内,应该有一个具有指向音频片段地址的src
属性的 HTML5audio
元素,一个值为clip
的 class 属性,以及一个 id 属性,它的值应该是其父元素.drum-pad
的文本内容(例如id="Q"
、id="W"
、id="E"
等等)。
需求 5:当我点击一个具有.drum-pad
属性的元素时,应该触发它的子元素audio
包含的音频片段。
需求 6:当我按下每一个.drum-pad
元素的关联键时,应该触发其子元素audio
包含的音频片段(例如:按下 Q 键应该触发包含字符串 "Q" 的鼓垫,按下 W 键应该触发包含字符串 "W" 的鼓垫等等)。
需求 7:当触发一个具有.drum-pad
属性的元素时,#display
元素内应该展示这个触发元素关联音频片段的描述字符串(每一个字符串都应该是独一无二的)。
你可以 fork 这个 CodePen pen 项目 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试:https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js
。
一旦你完成了本项目并且该项目所有测试运行通过,请提交项目的 URL。
Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required