背景音乐开关的控制

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

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

 <div id="music">
     <audio src="music/GENERATIONS from EXILE TRIBE (放浪新世代 from 放浪一族) - Hard Knock Days.mp3" loop id="media" preload="preload"></audio>
     <div id="music_on"></div>
     <div id="music_off" style="display: none"></div>
  </div>

接着我们写一些炒鸡简单的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);
	}
}

这里面我给了它两张背景图片，并且让它定位到我想要的位置，还给它设置了一个动画效果，让它旋转起来，背景图片见下面截图

然后就是我们的核心部分了，JavaScript，我们都知道，想要实现控制功能的效果就需要用到js来实现这些操作，我们先上代码

window.function(){
	var music_on=document.getElementById("music_on");
	var music_off=document.getElementById("music_off");
	var clicknum=0;
	//控制音乐开关
	music_on.onclick=function(){
		clicknum++;
		var num=clicknum%2;
		if(num==0){
			music_off.style.display="block";
			stop();
		}
		else if(num==1){
			play();
		}	
	};
	music_off.onclick=function(){
		clicknum++;
		var num=clicknum%2;
		if(num==1){
			music_off.style.display="none";
			play();
		}
		else if(num==0){
			stop();
		}
	};
	//音乐播放
	function play(){
		document.getElementById('media').play();
	}
	//音乐暂停
	function stop(){
		document.getElementById('media').pause();
	}	

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

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