JS realizes the case of eliminating stars

This article example shares the specific code of JS to eliminate stars for your reference. The specific content is as follows

The effect of destroying stars:

Functional requirements:

1. Click on the star and it disappears.
2. Automatically generate a star every second
3. The size and position of the stars are random

Case code and analysis:

HTML and CSS code:

 * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
 
    div {
        position: relative;
        width: 1000px;
        height: 500px;
        margin: 100px auto;
        background-color: black;
    }
</style>
 
<body>
    <div>
 
    </div>

In the body we only need a div to hold our randomly generated stars
The div box needs to have a position (the random position of the stars is based on the left and top values of the position)

JS code:

var div = document.querySelector('div');//Get the div box function creatImg(num) {
            for (var i = 0; i < num; i++) { //Randomly generate num stars var imgs = document.createElement('img'); //Create img tag imgs.style.position = 'absolute'; //Add absolute positioning to the star image var width = Math.floor(Math.random() * (50 - 10 + 1) + 10);
                var height = width; //Randomly generate width and height, the width and height of the stars are consistent var top = Math.floor(Math.random() * (450 - 0 + 1) + 0);
                var left = Math.floor(Math.random() * (950 - 0 + 1) + 0);
 
                //Change the width, height, left, and top values of the star to randomly generated imgs.style.width = width + 'px';
                imgs.style.height = height + 'px';
                imgs.style.left = left + 'px';
                imgs.style.top = top + 'px';
 
                //Add the link of the star image to the img tag imgs.src = 'images/xingxing.gif';
            
                //Add the created img tag to the div box div.appendChild(imgs);
            }
        }

Note: When modifying properties with units such as width and left, be sure to add the units.

creatImg(5); //Call the function and generate five stars setInterval(function () { //Execute the code every 1s var img = document.querySelectorAll('img'); //Get the star image //Add a click event to each star for (var i = 0; i < img.length; i++) {
                img[i].addEventListener('click', function () {
                    //Delete the clicked img after clicking
                    div.removeChild(this);
                })
            }
            creatImg(1);
        }, 1000);

When getting the picture, you get all the star pictures in the div box, not just a single one

After the pictures are acquired, they exist in the form of a pseudo-array, so you can bind click events one by one by traversing them.

JS knowledge points used in the case: (the ones with color are used in the case)

Node Operation

Create Node

document.createElement()
document.createTextNode()
document.createTextNode()

Add Node

node.appendCild(child) (append element)
node.insertBefore (new child element, position element to be inserted)

Delete Node

node.removeChild(child) Delete a child node in the parent element

Style attribute operations

element.style

1.element.style.backgroundColor = 'red';
2. The styles in JS use camel case naming
3. JS modifies the style operation, which generates inline styles, and the CSS weight is relatively high

element.className

1. Applicable to situations with many styles or complex functions
2. className will directly change the class name of the element, overwriting the original class name
3. You can use multiple class name selectors

Timer

window.setTimeout(call function, [number of milliseconds to delay]);

1. We also call the calling function of setTimeout() as callback function
2. Window can be omitted
3. This calling function can directly write the function or function name or take the string 'character name'
4. The default value of delay in milliseconds is 0 if omitted. The unit must be milliseconds.
5. There may be many timers, and an identifier is often assigned to the timer
6. Execute only once

window.setInterval (call function, [number of milliseconds to delay]);

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: