妙笔生花js

what: 妙笔生花js
where: 网站
when: 2022.4.18
who: JRT
why: 记录
how:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空白点击出字</title>
    <style>
        span {
            position: absolute;
            user-select: none;
            font-size: 20px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            var fontAll = [
                '学不可以已',
                '君子博学而日参省乎己，则知明而行无过矣',
                '吾尝终日而思矣，不如须臾之所学也',
                '不积跬步，无以至千里',
                '锲而不舍，金石可镂',
                '尽信书，不如无书',
                '知彼知己，百战不殆',
                '言者无罪，闻者足戒',
                '吾生也有涯，而知也无涯',
                '敏而好学，不耻下问',
                '满招损，谦受益',
                '知之为知之，不知为不知，是知也',
            ];
            var colorAll = [
                'red',
                'pink',
                'yellow',
                'blue',
                'aqua',
                'green',
                'gold',
                'brown',
                'grey',
                'orange',
            ];
            $(document).click(function (e) {
                var $span = $('<span>' + fontAll[Math.floor(Math.random() * fontAll.length)] + '</span>');
                $('body').append($span);
                $span.css('color', colorAll[Math.floor(Math.random() * colorAll.length)])
                var width = $span.width()
                var height = $span.height()
                var init = e.pageY - height / 2;
                $span.css({
                    left: e.pageX - width / 2 + 'px',
                    top: init + 'px'
                });
                $span.animate({
                    fontsize: 10 + 'px',
                    top: init - 150 + 'px',
                    opacity: .2
                }, 1000, function () {
                    $span.css('display', 'none');
                })
            });
        });
    </script>
</head>
<body>
</body>
</html>