背景音乐开关的控制

r囧r小猫 2022-03-21 02:47 251阅读 0赞

开发工具与关键技术：DW JavaScript  
作者：Mr\_肖先生  
撰写时间：2019年1月30日

首先我们在html里嵌套好盒子，然后插入一首背景音乐，插入背景音乐的代码（audio），代码如下

接着我们写一些炒鸡简单的css样式

#music{
    	position: absolute;
    	top: 10px;
    	right: 10px;
    	width: 44px;
    	height: 44px;
    	background-size: 100% 100%;
    	animation: rotating 1.5s linear infinite;
    }
    #music_on{
    	position: absolute;
    	top: 0px;
    	right: 0px;
    	width: 44px;
    	height: 44px;
    	background: url(../images/music_on.png) no-repeat 0 0;
    }
    #music_off{
    	position: absolute;
    	top: 0px;
    	right: 0px;
    	width: 44px;
    	height: 44px;
    	background: url(../images/music_off.png) no-repeat 0 0;
    }
    @keyframes rotating{
    	0%{
    		transform: rotate(0deg);
    	}
    	100%{
    		transform: rotate(360deg);
    	}
    }

这里面我给了它两张背景图片，并且让它定位到我想要的位置，还给它设置了一个动画效果，让它旋转起来，背景图片见下面截图  
![在这里插入图片描述][20190130094909761.GIF]  
然后就是我们的核心部分了，JavaScript，我们都知道，想要实现控制功能的效果就需要用到js来实现这些操作，我们先上代码

看着是不是挺长的，其实也不长，我来简单解释一下哈  
首先我们获取到放控制音乐背景图片的那两个盒子的id，给它们加上点击事件  
接着封装好控制音乐播放、暂停的函数，media是我在插入音乐那里给它的一个id  
最后就是要进行判断了，其实这些判断在我不会之前弄的有点晕，先声明一个全局变量clicknum记录点击次数，每次点击都让它++，num=clicknum%2;num等于每次点击次数除于2的余数，如果num=0，就是页面加载完成时没点击或者点击到了偶数次，就让它暂停；num=1，就是页面加载完成时点击到了奇数次，就让它播放  
这里页面加载完成时我没有设置自动播放，所以需要点击一次才能播放，再点击一次就是暂停，再点又是播放；再点暂停，反复如此，就是这个判断的作用。

我的理解可能存在偏差，如有错误，欢迎留言评论指正，谢谢！！！

[20190130094909761.GIF]: /images/20220321/87d74f0e3e7948aeb4b2ee308d0b15c2.png