JavaScript【一个简单的音乐播放器】点击图片自动旋转并且
作者:
by依白 | 来源:发表于
2023-09-29 01:47 被阅读0次<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes dt {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
#musicImg {
animation: dt 0s linear infinite;
}
</style>
</head>
<body>
<div>
<audio id="mui" src="media/BGM.mp3">
</audio>
<img id="musicImg" src="img/nu1/yytb.png" alt="">
</div>
<script>
let musicImg = document.getElementById("musicImg");
let mui = document.getElementById("mui");
let zt = true;
musicImg.onclick = function() {
if (zt) {
musicImg.style.animation = "dt 2s linear infinite forwards";
mui.play();
zt = false;
} else {
musicImg.style.animation = "dt 0s linear infinite forwards";
mui.pause();
zt = true;
}
}
</script>
</body>
</html>
本文标题：JavaScript【一个简单的音乐播放器】点击图片自动旋转并且
本文链接：https://www.haomeiwen.com/subject/bvkrbdtx.html
网友评论