今天来写个好玩的,使用高阶函数的连续攻击小动画
如图
快速点击10次,停下来,攻击会自己继续执行
我们来看一下是如何具体实现的
html部分:
<div id="main">
<button id="btn">Hit</button>
<span id="count">+0</span>
</div>
css部分:
#main {
padding-top: 20px;
font-size: 26px;
}
#btn {
font-size: 30px;
border-radius: 15px;
border: solid 3px #fa0;
}
#count {
position: absolute;
margin-left: 6px;
opacity: 1.0;
transform: translate(0, 10px);
}
#count.hit {
opacity: 0.1;
transform: translate(0, -20px);
transition: all .5s;
}
当点击hit时,count设置了个小动画,上移和透明度
Javascript部分:
function consumer(fn, time){
let tasks = [],
timer;
return function(...args){
tasks.push(fn.bind(this, ...args));
if(timer == null){
timer = setInterval(() => {
tasks.shift().call(this)
if(tasks.length <= 0){
clearInterval(timer);
timer = null;
}
}, time)
}
}
}
btn.onclick = consumer((evt)=>{
let t = parseInt(count.innerHTML.slice(1)) + 1;
count.innerHTML = `+${t}`;
count.className = 'hit';
let r = t * 7 % 256,
g = t * 17 % 128,
b = t * 31 % 128;
count.style.color = `rgb(${r},${g},${b})`.trim();
setTimeout(()=>{
count.className = 'hide';
}, 500);
}, 800)