day41 CD播放（案例学习）

最新推荐文章于 2024-09-29 23:30:47 发布

亦昭昭

最新推荐文章于 2024-09-29 23:30:47 发布

阅读量858

点赞数 27

分类专栏：记录前端学习文章标签：学习 javascript

本文链接：https://blog.csdn.net/z240113765/article/details/136116770

版权

记录前端学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

示例

该示例是一个简单的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);
}