【凡哥教程第二十四讲作业】追加音频（学一点点JS（四）动态追加元素）

花简静 · 发表于 2024-8-13 11:23

本帖最后由花简静于 2024-8-13 11:24 编辑

凡哥教程24讲作业

花简静 · 发表于 2024-8-13 11:25

本帖最后由花简静于 2024-8-13 11:27 编辑

凡哥教程二十四讲作业：

假设有一个自设宽高尺寸的元素，它里面有一行h2标题、一张小图片，现在，请给该元素追加一个 audio 标签。

要求：

① 图片另起一行，以确保布局整齐有序；

② audio 播放器以追加的方式放在既有子元素之后，给它指定音频地址并令其自动播放、循环播放

<style>

#qsfg24 {

margin: 30px auto;

width: 640px;

height: 320px;

border: 1px solid gray;

position: relative;

}

</style>

</div>

var aud = document.createElement('audio');

aud.style.position = 'absolute';

aud.title = '我是追加的';

aud.style.right = '30px';

aud.style.top = '20px';

aud.src = 'https://music.163.com/song/media/outer/url?id=231455';

aud.autoplay = true;

aud.loop = true;

aud.controls = true;

qsfg24.appendChild(aud);

</script>

花简静 · 发表于 2024-8-13 11:29

@凡哥请凡老师来批改一下今天的作业

凡哥 · 发表于 2024-8-13 13:00

audio界面我们过去做音画帖一直不让它出现，讲义中也提到UI的丑。不过英雄不问出处，帅哥不分美丑，既然亮相了，如果需要随心所欲安排座位给它，就需要定位设置，这是CSS属性，所以元素标识需要 style 才能设置CSS样式。这是楼主作业的亮点之一。

100√

花简静 · 发表于 2024-8-13 13:05

凡哥发表于 2024-8-13 13:00
audio界面我们过去做音画帖一直不让它出现，讲义中也提到UI的丑。不过英雄不问出处，帅哥不分美丑，既然亮 ...

哈哈，现在我明白老师作业里为什么要求有这句：/* audio标签各属性不是CSS属性，是HTML属性，注意以下属性不能出现 style */原来是它不出现的情况下，自然不需要CSS属性。。
误打误撞也算作业成功了。

柒玥 · 发表于 2024-8-13 15:42

水墨画吗，静静太棒啦，欣赏静静的精彩作业

柒玥 · 发表于 2024-8-13 15:42

问好静静，谢谢你的精彩分享，赞

花简静 · 发表于 2024-8-13 15:53

柒玥发表于 2024-8-13 15:42
水墨画吗，静静太棒啦，欣赏静静的精彩作业

柒玥来了，过来抱个。那是一个动图，看着比较好看就用上了

花简静 · 发表于 2024-8-13 15:54

柒玥发表于 2024-8-13 15:42
问好静静，谢谢你的精彩分享，赞

抱个柒玥

柒玥 · 发表于 2024-8-13 16:21

花简静发表于 2024-8-13 15:53
柒玥来了，过来抱个。那是一个动图，看着比较好看就用上了

这图图好好看，喜欢呢