- 学长说了，首页加载不要用ajax,用了swig模板使得页面简洁一些
<div class="row" id="musicList">
{% for val in datas %}
<div class='col-md-3'>
<a href='/api/play?hash={{val.Hash}}'>
<img src='{{val.img}}'/>
<p>{{val.songname}} - {{val.author}}</p>
</a>
</div>
{% endfor %}
</div>
在数据传输的时候需要传递参数过来，但是要注意要以json格式
main.js
render函数可以传参
router.get('/',function (req,res,next) {
User.find(
{Status:{$lt:2}}
).then(function (info) {
if(info){
console.log(info);
res.render('index',{datas:info});//渲染的是index,html页面，datas是我们传输的参数
}else{
console.log('不存在');
}
});
});
- 让播放页的图片旋转起来
#imga{
position: absolute;
width: 54%;
/*height: 50%;*/
top:21%;
left:23%;
animation: spin 12s linear infinite;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
- 但是我希望可以播放的时候在旋转，暂停的时候停止旋转
增加一个动画类
.ani{
animation: spin 12s linear infinite;
}
js部分
audio.addEventListener("playing", function(){
$('#imga').toggleClass('ani');
});
audio.addEventListener("pause", function(){
$('#imga').toggleClass('ani');
});
toggleClass：
有这个类就会移除，没有就会添加这个类
playing audio播放状态
pause audio暂停状态
- 可是这样的话又会有一个问题出现，在停止动画的时候会很急促的停止
因此又增加了一个pause类
.pause {
animation-play-state: paused;
}
js部分改成这样
v.addEventListener("playing", function(){
$('#imga').removeClass('pause');
});
v.addEventListener("pause", function(){
$('#imga').addClass('pause');
});
js操作只是暂停动画，而不是移除动画类
