Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use JS to destroy stars". In daily operation, I believe many people have doubts about how to use JS to destroy stars. The editor consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to use JS to destroy stars". Next, please follow the editor to study!

The effect of destroying the stars:

Functional requirements:

Click on the star and the star disappears

2. Automatically generate a star every other second

3. The size and location of stars are random.

Case code and analysis:

Html and css codes:

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

In body, all we need is a div to hold our randomly generated stars.

The div box needs to have a location (the random position of the stars is based on the left and top values of the location)

JS Code:

Var div = document.querySelector ('div'); / / get the div box function creatImg (num) {for (var I = 0; I < num; iTunes +) {/ / randomly generate num stars var imgs = document.createElement (' img'); / / create the img tag imgs.style.position = 'absolute' / / add absolute positioning var width = Math.floor (Math.random () * (50-10 + 1) + 10) to the star picture; var height = width; / / randomly generate width and height, and the width and height of the star are the same var top = Math.floor (Math.random () * (450-0 + 1) + 0) Var left = Math.floor (Math.random () * (950-0 + 1) + 0); / / modify 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 to the star picture to the img tag imgs.src =' images/xingxing.gif'; / / add the created img tag to the div box div.appendChild (imgs);}}

Note: units must be added when using attributes with units such as width, left, etc.

CreatImg (5); / / call the function and generate five stars setInterval (function () {/ / execute the code var img = document.querySelectorAll ('img') every other second; / / get the star picture / / add a click event for (var I = 0; I < img.length) to each star This +) {img [I] .addEventListener ('click', function () {/ / delete the clicked img div.removeChild (this);})} creatImg (1);}, 1000)

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

After the image is obtained, it exists in the form of a pseudo array, so you can bind click events one by one by traversing.

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

Node operation

Create a node

Document.createElement ()

Document.createTextNode ()

Document.createTextNode ()

Add Node

Node.appendCild (child) (append element)

Node.insertBefore (new child element, location element to insert)

Delete a node

Node.removeChild (child) deletes a child node in the parent element

Style attribute operation

Element.style

1. Element.style.backgroundColor = 'red'

2. The style in JS is named by hump.

3. JS modifies style style operation, resulting in inline style, with high css weight.

Element.className

1. It is suitable for 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 the multi-class name selector

Timer

Window.setTimeout (calling function, [milliseconds of delay])

1. The calling function setTimeout () is also called the callback function callback.

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 number of milliseconds of delay is omitted. By default, 0 units must be milliseconds.

5. There may be many timers. Always assign an identifier to the timer.

6. Execute only once

Window.setInterval (calling function, [milliseconds of delay])

1. The calling function setTimeout () is also called the callback function callback.

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 number of milliseconds of delay is omitted. By default, 0 units must be milliseconds.

5. There may be many timers. Always assign an identifier to the timer.

6. Repeat execution

At this point, the study on "how to use JS to destroy stars" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.