本文實例為大家分享了JavaScript實現雪花飄落效果的具體代碼，供大家參考，具體內容如下
一、實現功能
（1）添加一個背景圖片；
（2）用js語言實現雪花飄落效果；
（3）使用setInterval定時器每800毫秒創建一個雪花；
（4）把每一個雪花作為參數傳進動態下落的方法中即可。
二、展示
1.代碼展示
代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #000; /*防止出現向下滾動條*/ overflow: hidden; } </style></head><body> <img src="1.jpg" style="height: 800px; width:1500px;"> <script> function snow() { // 1、定義一片雪花模板 var flake = document.createElement('div'); // 雪花字符 ??????????? flake.innerHTML = '?'; flake.style.cssText = 'position:absolute;color:#fff;'; //獲取頁面的高度 相當于雪花下落結束時Y軸的位置 var documentHieght = window.innerHeight; //獲取頁面的寬度，利用這個數來算出，雪花開始時left的值 var documentWidth = window.innerWidth; //定義生成一片雪花的毫秒數 var millisec =10; //2、設置第一個定時器，周期性定時器，每隔一段時間（millisec）生成一片雪花； setInterval(function() { //頁面加載之后，定時器就開始工作 //隨機生成雪花下落 開始 時left的值，相當于開始時X軸的位置 var startLeft = Math.random() * documentWidth; //隨機生成雪花下落 結束 時left的值，相當于結束時X軸的位置 var endLeft = Math.random() * documentWidth; //隨機生成雪花大小 var flakeSize = 3 + 20 * Math.random(); //隨機生成雪花下落持續時間 var durationTime = 4000 + 7000 * Math.random(); //隨機生成雪花下落 開始 時的透明度 var startOpacity = 0.7 + 0.3 * Math.random(); //隨機生成雪花下落 結束 時的透明度 var endOpacity = 0.2 + 0.2 * Math.random(); //克隆一個雪花模板 var cloneFlake = flake.cloneNode(true); //第一次修改樣式，定義克隆出來的雪花的樣式 cloneFlake.style.cssText += ` left: ${startLeft}px; opacity: ${startOpacity}; font-size:${flakeSize}px; top:-25px; transition:${durationTime}ms;`; //拼接到頁面中 document.body.appendChild(cloneFlake); //設置第二個定時器，一次性定時器， //當第一個定時器生成雪花，并在頁面上渲染出來后，修改雪花的樣式，讓雪花動起來； setTimeout(function() { //第二次修改樣式 cloneFlake.style.cssText += ` left: ${endLeft}px; top:${documentHieght}px; opacity:${endOpacity};`; //4、設置第三個定時器，當雪花落下后，刪除雪花。 setTimeout(function() { cloneFlake.remove(); }, durationTime); }, 0); }, millisec); } snow(); </script></body></html> |
2.效果展示
代碼如下（示例）：
總結
學會了使用JS語言實現雪花飄落特效效果；運用了定時器控制雪花出現的速度；
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_45876462/article/details/111745705
