单击音乐图标，实现音乐的暂停与播放。

最新推荐文章于 2023-06-10 16:27:22 发布

做个乖小孩i

最新推荐文章于 2023-06-10 16:27:22 发布

阅读量3.9k

点赞数 10

文章标签： css3 动画 javascript

本文链接：https://blog.csdn.net/qq_46337964/article/details/121135766

版权

今天训练H5大赛的时候学习到了一个新的内容，就是以上的题目。
一共三部曲。
废话不多说，上代码。
1、创建一个.html页面，并且引入音乐和图标，用来实现网页的显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单击音乐图标实现暂停与播放。</title>
		
		<!-- 音乐css样式 -->
		<link rel="stylesheet" type="text/css" href="css/css.css"/>
		
	</head>
	<body style="background-color: cornflowerblue;">
		
		<!-- 导入音乐，并且给音乐设置id，后面要用到。 -->
		<audio id="music" autoplay="autoplay" loop="loop" src="media/BGM.mp3" ></audio>
		
		<!-- 导入音乐图标，并且给音乐图标设置id，后面还是要用到。 -->
		<img id="musicico" onclick="musiccc()" src="img/音乐ico.png" width="200px" >
		
	</body>
	<!-- 引入script逻辑代码。 -->
	<script type="text/javascript" src="js/js.js"></script>
</html>

2、创建一个.js页面，用来实现逻辑代码。

// 动画旋转
var music = document.getElementById('music')    //获取音乐
var musicico = document.getElementById('musicico')   //获取音乐图标
var tem = true  //设置一个变量，用来控制音乐是否在播放。

//定义一个函数，当用户单击的时候触发这个函数，从而实现音乐的暂停与播放。
function musiccc(){
	//tem用来控制音乐当前是否在播放。true代表音乐正在播放，false代表音乐当前正在处于暂停的状态。
	if(tem == false){
		music.play()  //播放音乐
		tem = true  
		document.getElementById('musicico').style.animationPlayState = 'running'  //播放音乐图标
	}else{
		music.pause()  //暂停音乐
		tem = false
		document.getElementById('musicico').style.animationPlayState = 'paused'  //暂停音乐图标
	}
}

3、创建一个.css页面，用来实现动画旋转的功能。

/* 音乐播放和暂停 */
img#musicico{
	animation-name: music; //这个名称是下方的动画名称
	animation-timing-function: linear;  //linear代表均速旋转
	animation-duration: 3s;  //3秒旋转完一圈
	animation-iteration-count: infinite; //旋转无数次
}

/* 实现动画的旋转 */
@keyframes music{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(180deg);
	}
	100%{
		transform: rotate(365deg);
	}
}