单击音乐图标，实现音乐的暂停与播放。 |
您所在的位置：网站首页 › qq音乐播放页面怎么设置背景图片 › 单击音乐图标，实现音乐的暂停与播放。 |
单击音乐图标，实现音乐的暂停与播放。
|
今天训练H5大赛的时候学习到了一个新的内容， 就是以上的题目。 一共三部曲。 废话不多说，上代码。 1、创建一个.html页面，并且引入音乐和图标，用来实现网页的显示。 DOCTYPE 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); } }到这里就完成了，让我们看一下效果吧。 由于.gif动画播放没有声音，所以效果图上的体验不是很好。 但是我们想要的效果是实现了。 |
刚看没用，快快打开你的开发软件练习起来吧。【本文地址】
今日新闻 |
推荐新闻 |