点击页面出现爱心效果

时间：2020-12-17 12:28:02 阅读：2 评论：0 收藏：0 [点我收藏+]

标签：width javascrip chart radius type nim ORC second rip

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
        <style type="text/css">
            #love {
                width: 30px;
                height: 30px;
                /*border: 1px solid red;*/
                position: absolute;
            }
            
            #first {
                width: 15px;
                height: 26px;
                background-color: red;
                position: absolute;
                right: 3.2px;
                bottom: 0;
                transform: rotate(45deg);
                border-radius: 10px 10px 1px 1px;
                opacity: 1;
            }
            
            #second {
                width: 15px;
                height: 26px;
                background-color: red;
                position: absolute;
                left: 3.2px;
                bottom: 0;
                transform: rotate(-45deg);
                border-radius: 10px 10px 1px 1px;
                opacity: 1;
            }
        </style>
    </head>

    <body></body>

    <script type="text/javascript">
        function random(lower, upper) {
            return Math.floor(Math.random() * (upper - lower)) + lower;
        }
        var body = document.getElementsByTagName("body")[0];
        document.onclick = function(e) {
            var num = random(0, 19);
            // 颜色数组
            var color = ["peru", "goldenrod", "yellow",
                "chartreuse", "palevioletred", "deeppink",
                "pink", "palegreen", "plum",
                "darkorange", "powderblue", "orangered",
                "orange", "orchid", "red",
                "aqua", "salmon", "gold", "lawngreen"
            ]

            var divmain = document.createElement("div");
            var first = document.createElement("div");
            var second = document.createElement("div");
            // 给div加属性
            divmain.setAttribute("id", "love");
            divmain.setAttribute("class", "love");
            first.setAttribute("id", "first");
            second.setAttribute("id", "second");
            // 向最外层内添加内层div
            divmain.appendChild(first);
            divmain.appendChild(second);
            // 根据鼠标位置来确定div的位置
            //divmain.style.top = e.pageY + "px";
            //divmain.style.left = e.pageX + "px";
            divmain.style.cssText = "top:" + e.pageY + "px;left:" + e.pageX + "px";

            // 给心形div加随机颜色
            first.style.backgroundColor = color[num];
            second.style.backgroundColor = color[num];
            body.appendChild(divmain);

            $(".love").animate({
                opacity: "0",
                top: "-=50px"
            }, 1500);

        }

        // 利用定时器来清除页面的垃圾
        setInterval(function() {
            var div = document.getElementsByClassName("love");
            var len = div.length;
            var num;
            for(var i = len - 1; i >= 0; i--) {
                num = parseInt(div[i].style.opacity);
                if(num <= 0) {
                    div[i].remove();
                }
            }

        }, 3500);
    </script>

</html>

点击页面出现爱心效果

标签：width javascrip chart radius type nim ORC second rip

原文地址：https://www.cnblogs.com/xiejn/p/14123513.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行