JS and JQuery implement snowflake falling effect, and jsjquery snowflake falling

JS and JQuery implement snowflake falling effect, and jsjquery snowflake falling

Many friends need to use the snowflake falling effect when doing special effect web pages. Here we have sorted out the methods to achieve this effect using JS and JQuery Code respectively.

Let's first look at the snowflake effect to be achieved:

The implementation of the snowflake falling effect is very simple, mainly to practice the timer, setTimeout and setInterval in JavaScript.

Explanation

SetTimeout ()

The setTimeout function is used to specify the number of milliseconds after a function or code segment. It returns an integer indicating the timer number, which can be used to cancel the timer later.

var timerId = setTimeout(func|code, delay)

In the code above, the setTimeout function accepts two parameters. The first parameter func | code is the name of the function to be postponed or a piece of code, and the second parameter delay is the number of milliseconds to postpone execution.

SetInterval ()

The setInterval function is used exactly the same as setTimeout. The difference is that setInterval specifies that a task is executed at intervals, that is, an infinite number of scheduled executions.

ClearTimeout (), clearInterval ()

The setTimeout and setInterval functions return an integer that represents the counter number. When the integer is passed into the clearTimeout and clearInterval functions, the corresponding timer can be canceled.

var id1 = setTimeout(f,1000);var id2 = setInterval(f,1000);clearTimeout(id1);clearInterval(id2);

Note:

SetTimeout and setInterval must wait until the synchronization tasks of the current script and the existing events in the "task queue" are fully processed before the tasks specified by setTimeout are executed.

Let's continue to talk about the effect of falling snow.

The main steps are as follows:

1. Define a snowflake template;
2. Set the first timer and periodic timer to generate a snowflake at intervals;
3. Set the second timer and one-time timer. When the first timer generates a snowflake and renders it on the page, modify the snowflake style to make the snowflake move;
4. Set the third timer. When the snowflake falls, delete the snowflake.

The above is the idea of implementation. The specific code below is written. The code below is the JS native code, and the Code implemented by JQuery will be attached, with the same idea.

<! DOCTYPE html> 
Note:

Because the Event added by the timer will be executed in the next Event Loop, the second timer is used to splice the generated snowflake into the page for rendering and then modify its style, in this way, the browser will render the page after all JS code is executed without this timer. In this way, the subsequent style will directly overwrite the previous style, snow cannot be moved, which is related to the browser thread.
Simply put, this timer is used to separate and execute the code for the two modified styles. You can first render the first modified styles and then perform the second modification, snow will change.
JQuery
<! DOCTYPE html>