仿手机QQ的Javascript简易点赞功能

 var trigger = document.getElementById("trigger");
    var min = 100000;
    var max = 999999,count = 0;
    trigger.onclick = function () {
        var rect = document.createElement("div");
        var rad = Math.floor(Math.random() * (max - min) + min);
        /*产生随机颜色赋予div背景*/
        rect.id = "rect";
        rect.style.backgroundColor = "#" + rad;
        document.body.appendChild(rect);
        /*设置定时器，两秒后移除div节点*/
        setTimeout(function () {
            document.body.removeChild(rect);
        },2000);
        count++;
        if(count >=10){
            alert("today is enough...")
        }
    }

 

 

  #trigger{
            width: 25px;
            height: 25px;
            background-color: #008000;
            position: absolute;
            left: 500px;
            top: 300px;
        }
        #rect{
            width: 25px;
            height: 25px;
            background-color: #ed592c;
            position: absolute;
            left: 500px;
            top: 300px;
            animation: fly 2s ease-out;
        }
        @keyframes fly{
            70%{transform: translate(-20px,-150px) rotate(360deg); opacity:0.8;width: 40px;height: 40px}
            100%{transform: translate(-10px,-180px) rotate(540deg);opacity: 0;width: 50px;height: 50px}
        }

很简单的一段代码，html是一个id为trigger的div,效果是点击出现10个颜色不同的方块产生动画到消失，但是没有实现方块随机向上的哪个方向移动

来源：https://www.cnblogs.com/weidapao/p/6131575.html