撩妹专用：照片点击生成小心心

#涉及的知识点：

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;
    }
    
   
    // 通过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);