撩妹專用：照片點選生成小心心

前端小鐵人發表於2019-10-15

#涉及的知識點：

1.原生DOM的操作.
2.DOM0事件.
3.clientX...
4.setInterval【間隔函式】
複製程式碼
    //取到游標點選時候的位置
    var html = document.querySelector('html');
    var x,y;
    html.onmousedown = function(evt) {
        x = evt.clientX;
        y = evt.clientY;
    }
    //建立小心心
    var div;
    var a;
    html.onclick = function() {
        div = document.createElement('div');
        div.style.left = x + 'px';
        div.style.top = y + 'px';
        設定小心心的隨機顏色
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        div.style.background = 'rgb(' + r + ',' + g + ',' + b + ')'
        //【有關隨機Div顏色的詳解請看本人上一張的[隨機Div顏色介紹]】
        div.className = 'heart';
        document.body.appendChild(div);
        var body = document.querySelector('body');
        html.appendChild(body);
        
        //取到小心心的縱座標，一會我們好讓它上天。
        a = div.offsetTop;
    }
    
    //讓小心心向上飛，然後漸漸消失，但是我們注意，要利用for迴圈遍歷所有的小心心，否則在建立第二顆小心心的時候，上一顆小心心將停止移動。
    //我們通過setInterval改變小心心的縱座標來讓其進行移動
    setInterval(function() {
        var love = document.querySelectorAll('div');
        var currentTop;
        for(var i=0; i < love.length; i++) {
            currentTop = love[i].offsetTop;
            //為了避免生成過多的小心心，造成卡頓的現象，我們將飛出螢幕外的小心心刪除，降低對瀏覽器的負擔。
            if(currentTop < 0) {
                love[i].remove();
            }else{
                love[i].style.top = currentTop - 2 + 'px';
            }
        }
    },16);
複製程式碼

相關文章