撩妹專用：照片點擊生成當心心

#涉及的知識點：

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);
複製代碼