JavaScript（18）：点赞功能的实现

示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞功能的实现</title>
    <style>
        .container{
            padding: 50px;
            height: 200px;
        }
        .praise{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="praise">赞</span>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.praise').click(function () {
            addPraise(this);
        });

        function addPraise(self) {
            var fontsize = 15;
            var left = 15;
            var bottom = 0;
//            left、bottom都是指标签内容到左边框和下边框之间的像素距离
            var opacity = 1;
            var s = document.createElement('span');
            $(s).text('+1');
            $(s).css('position','relative');
//            相对定位，相对于原本位置的定位
            $(s).css('color','red');
            $(s).css('fontSize',fontsize+'px');
            $(s).css('left',left+'px');
            $(s).css('bottom',bottom+'px');
            $(s).css('opacity',opacity);
            $('.container').append(s);

            var val = setInterval(function () {
                fontsize += 3;
                left += 2;
                bottom += 5;
                opacity -= 0.1;
                $(s).css('fontSize',fontsize+'px');
                $(s).css('left',left+'px');
                $(s).css('bottom',bottom+'px');
                $(s).css('opacity',opacity);
                if (opacity<0){
                    clearInterval(val);
                    $('.praise').siblings().remove();
                }
            },40)
        }
    </script>
</body>
</html>