JS realizes the case of eliminating stars

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]);

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. Repeat

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:
  • js to eliminate stars (web simplified version)
  • JavaScript to achieve the simple version of the star elimination game
  • JS realizes the game of destroying stars

<<:  Design Theory: Textual Expression and Usability

>>:  Analysis of the difference between absolute path and relative path in HTML

Recommend

Teach you how to insert 1 million records into MySQL in 6 seconds

1. Idea It only took 6 seconds to insert 1,000,00...

Teach you how to deploy Vue project with Docker

1.Write in front: As a lightweight virtualization...

A brief summary of basic web page performance optimization rules

Some optimization rules for browser web pages Pag...

Linux Dig command usage

Dig Introduction: Dig is a tool that queries DNS ...

Detailed explanation of how to use Vue+element to implement the tag at the top of the page

Table of contents 1. Page Rendering 2. Switch tag...

Detailed explanation of efficient MySQL paging

Preface Usually, a "paging" strategy is...

Examples of common operations on MySQL foreign key constraints [view, add, modify, delete]

This article uses examples to describe common ope...

Detailed tutorial on building a local idea activation server

Preface The blogger uses the idea IDE. Because th...

Web interview: The difference between MVC and MVVM and why Vue does not fully comply with MVVM

Table of contents Difference between MVC and MVVM...

How to make a centos base image

Preface Now the operating system used by my compa...

MySQL triggers: creating multiple triggers operation example analysis

This article uses an example to describe the crea...

A summary of some of the places where I spent time on TypeScript

Record some of the places where you spent time on...

JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

Overview: I drew lessons from several timetable s...

DIV and image horizontal and vertical centering compatible with multiple browsers

The first type: full CSS control, layer floating ...

MySQL uses frm files and ibd files to restore table data

Table of contents Introduction to frm files and i...