js construct an object to achieve the effect of floating-click on the text

Name really hard to take, I do not know how to express. Directly on the code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .list {
            position: fixed;
            font-size: 14px;
            font-weight: bold;
            color: seagreen;
        }
    </style>
</head>

<body>

    <script>varCreate an array to place the content that appears when you click the mouse//
        
        myArr = [ "Leilei", "you do not have the image of a pig," "but you have the temperament pig", "you are alive wasting air", "dead waste of land," "half-dead waste of human life money", "you left look like idiot "," right look like a fool, "" I want to emigrate to Mars, "" it is to leave you, "" ah bah " ]; 

        // get the array length 
        var len = myArr.length; 

        // define the variable 
        var NUM = 0 ; 

        function the mouseEvent (Top, left) {
             the this .top = Top;
             the this .left = left;
             the this .timer = null ;
             // define an initialization method of 
            the this .init = function () {
                 the this .oList = Document.createElement("div");
                the this .oList.classList.add ( "list"); // create a list of named div class 
                document.body.appendChild ( the this .oList); // the class name list of div added to the page 
                the this .oList = .style.top the this .top + "PX" ;
                 the this .oList.style.left = the this .left + "PX" ;
                 the this .oList.innerHTML = myArr with [NUM% len]; 
            }; 

            // setting method, so that move the contents of the array, i.e., top value changes 
            this .topChange = function () {
                 // backup this, because this timer is then entered into the window 
                var Self = this;
                 // with variable initial value of the most accepted top 
                var initTop = self.top;
                 // start a timer 
                the this .timer = the setInterval ( function () { 
                    self.top - ;
                     IF (== self.top (initTop - 150 )) self.die (); 
                    self.oList.style.top = self.top + "PX" ; 
                }, 10 ); 
            } 

            the this .die = function () {
                 // cleanup timer 
                the clearInterval ( the this.timer);
                 // Clear div 
                document.body.removeChild ( the this .oList); 
            } 

            the this .init ();
             the this .topChange (); 
        } 

        // the page click 
        window.onclick = function (EV) {
             var EV = event || EV; // event listener 
            new new mouseEvent (ev.clientY, ev.clientX); // get the location of the top of the page and click on the left when 
            NUM ++ ; 
        }
     </ Script> 
</ body> 

</ HTML>

After the opening page click, the effect will be friends. I am more optimistic about the blog or personal Web site has this effect on their own to achieve a feeling of good

FIG effect as

Inside the array content will appear with the mouse click, automatically clean up after floating for some time. It is not very good play with! ! ! !

js construct an object to achieve the effect of floating-click on the text

Guess you like