day41 CD播放（案例学习）

本文主要是介绍day41 CD播放（案例学习），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

示例

该示例是一个简单的CD播放器，通过点击不同的按钮来控制CD的旋转和音乐的播放/暂停。

JavaScript部分的功能分析如下：

rota数组用于描述每个CD的旋转角度，初始值为[0, 0]。
result数组用于表示每个CD的状态，初始值为[false, false]，代表两个CD都是静止不动的状态。
setInter数组存储了定时器的引用，用于控制CD的旋转。
playOrStop函数是点击按钮时的事件处理函数，根据点击的CD当前的状态执行相应的操作。
- 如果CD当前是静止状态，将CD的定时器启动，每隔20毫秒调用move函数旋转CD，并将CD的状态设置为运行。
- 同时播放对应CD的音乐，并暂停其他CD的音乐。
- 如果CD当前是运行状态，清除CD的定时器，暂停CD的音乐，并将CD的状态设置为静止。
move函数是CD旋转的方法，通过修改CD的transform属性实现旋转效果。

HTML部分主要是一个简单的表格布局，包含两个CD的图像和按钮，点击按钮时调用playOrStop函数。

CSS部分定义了一些样式，包括设置CD的大小、边框、旋转等样式。

总体来说，该示例通过JavaScript控制了CD的旋转和音乐的播放/暂停，通过HTML和CSS实现了简单的界面展示和样式设置。
在这里插入图片描述


var rota = [0, 0];//描述角度
var result = [false, false];//默认两个CD都是静止不动
var setInter = [null, null];
function playOrStop(index) {//判断点击的cd的状态if (result[index] == false) {//证明点击的这个CD目前的状态是静止setInter[index] = setInterval("move(" + index + ");", 20);//每隔20毫秒进行方法的调用result[index] = true;//改变这个cd的状态为运行//对音乐进行操作(音乐要开始播放了)//------------------------------------------------------var audio = document.getElementById("audio" + index);if (audio && audio.paused) {audio.play();}//其余的CD停止for (var i = 0; i < rota.length; i++) {if (i != index) {clearInterval(setInter[i]);var audio = document.getElementById("audio" + i);if (audio) {audio.pause();}result[i] = false;}}} else {//证明该我点击的这个CD目前是运行状态clearInterval(setInter[index]);document.getElementById("audio" + index).pause();result[index] = false;}
}//运行的方法
function move(index) {var box = document.getElementById("td" + index).style.transform = "rotate(" + rota[index] + "deg)";rota[index]++;
}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="cd.js"></script><link rel="stylesheet" href="cd.css"></head><body><div id="all"><table><tr><td id="td0"><img src="/images/qiji.jpg"></td><td id="td1"><img src="/images/yuai.jpg"></td></tr><tr><td><input type="button" value="play/stop" onclick="playOrStop(0);"></td><td><input type="button" value="play/stop" onclick="playOrStop(1);"></td></tr></table></div><div id="music" style="display: none;"><audio src="mp3/wind.mp3" id="audio0" autoplay></audio><audio src="mp3/wind.mp3" id="audio1" autoplay></audio></div></body></html>

#all {border: 1px solid red;width: 1238px;height: 1223px;margin: 0 auto;
}table td {border: 1px solid black;width: 610px;height: 600px;
}table tr {text-align: center;
}table tr input {width: 400px;height: 200px;font-size: 40px;
}table img {width: 610px;height: 600px;object-fit: cover;
}#td0 {transform: rotate(0deg);
}#td1 {transform: rotate(0deg);
}