项目结构:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lucky draw</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/music.css">
</head>
<body>
<!-- 输入框区域 -->
<div style="text-align: center; margin-top: 1rem;">
<label class="label-3" for="remain"></label><input id="remain" type="text" readonly/>
</div>
<div style="text-align: center; margin-top: 1rem;">
<label class="label-1" for="input-awards"></label><input id="input-awards" type="text" />
<label class="label-2" for="num"></label><input id="num" min="1" value="1" type="number" />
</div>
<!-- 牌堆 -->
<i id="pukedui" class="puke pukedui origin" style="position: fixed;right: 0;top: calc(50% - 10rem);z-index: 1000;">
<div class="start-text">Start</div>
</i>
<!-- 发牌区域 -->
<div class="wrap"></div>
<!-- 播放器 -->
<div class="player-wrap">
<div class="circle" id="outBtn"><span id="spanImg">open</span></div>
<div class="player">
<div class="controler">
<audio src="./music/xiangshui.mp3" id="audioObj"></audio>
<a href="javascript:" class="btn prev" id="prev"><span>prev</span></a>
<div class="play-wrap">
<div class="picture"></div>
<a href="##" class="play" id="play">播放</a>
</div>
<a href="##" class="btn next" id="next">