这是一个使用HTML、CSS和JavaScript编写的简单音乐播放器。通过绝对定位实现页面布局，包含歌曲列表、进度条、播放控制等功能。点击歌曲列表项可播放相应音乐，并在底部显示播放信息。样式使用CSS进行美化，包括滚动条样式。JavaScript负责动态生成歌曲列表并监听播放事件，实现了歌曲的播放、暂停、进度更新等操作。
运行后的样子
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 设置视图界面兼容不同的屏幕设置 -->
<meta name="viewport" content="width=device-width,initial-scale-1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>音乐播放器</title>
<link rel="stylesheet" type="text/css" href="css/music.css"/>
</head>
<body>
<!-- 整个页面的窗体 -->
<div class="wrapper" id="main">
<div class="header">音乐盒子</div>
<div class="list">
<!-- 歌曲列表项 -->
<div class="item">
<div class="item-name"></div><!-- 歌曲名称 -->
<div class="item-size"></div><!-- 歌曲大小 -->
</div>
</div>
<!-- 底部区域 -->
<div class="footer">
<!-- 歌曲播放进去显示区域 -->
<div class="progress">
<!-- 进度条背景 -->
<div class="progress-bar-bg">
<!-- 进度 -->
<div class="progress-bar"></div>
</div>
<!-- 显示时间 -->
<div class="time">
<div class="current-time">02:05</div>
<div class="total-time">03:10</div>
</div>
</div>
<
最低0.47元/天 解锁文章
扫一扫
4864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
