50projects50days知识点-29-double-click-heart

示例网址：

https://50projects50days.com/projects/github-profiles/
http://50projects.tc.cluski.top/50projects50days/github-profiles/

效果：

思路：

布局什么不难，做鼠标双击的处理的时候，可以给这个元素加上一个click事件，当前后两次点击的时间差在800ms之内的话，就是双击。然后创建一个div元素，加上对应class之后，加入到父元素下。

整体的js代码如下：

const loveMe = document.querySelector('.loveMe')
const times = document.querySelector('#times')

let clickTime = 0
let timesClicked = 0

loveMe.addEventListener('click', (e) => {
    if(clickTime === 0) {
        clickTime = new Date().getTime()
    } else {
        // 如果两次点击相隔在800ms之内的话，就算是双击
        if((new Date().getTime() - clickTime) < 800) {
            createHeart(e)
            clickTime = 0
        } else {
            // 否则，记录下当前的点击时间爱
            clickTime = new Date().getTime()
        }
    }
})

const createHeart = (e) => {
    const heart = document.createElement('i')
    // 给新创建的元素加上对应的class
    heart.classList.add('fas')
    heart.classList.add('fa-heart')

    const x = e.clientX
    const y = e.clientY

    const leftOffset = e.target.offsetLeft
    const topOffset = e.target.offsetTop

    // 获取元素在父元素内的位置坐标
    const xInside = x - leftOffset
    const yInside = y - topOffset

    heart.style.top = `${yInside}px`
    heart.style.left = `${xInside}px`

    loveMe.appendChild(heart)

    times.innerHTML = ++timesClicked

    // 1000ms之后删除此元素
    setTimeout(() => heart.remove(), 1000)
}

📌 js中获取当前时间的时间戳：new Date().getTime()