先看效果：
圖不會動啊。。。
·http://www.liziguo.cn/liziguo/rzdx/index.html
·http://www.liziguo.cn
↑這裏的會動
·點擊下載雪花圖片
效果可以吧
如果對屏幕下雪感興趣的話可以去看看我另一篇博客
https://blog.csdn.net/u010756046/article/details/80552722
今天是聖誕節，我依舊孤獨的躲在宿舍角落裏，聽着陳奕迅的聖誕結，一邊寫着這些無聊到蛋疼的程序還要一邊教你們如何寫這些無聊到蛋疼的程序，念及此不覺潸然淚下。。。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>認真的雪</title>
<style type="text/css">
.xue{
position: absolute;
background: url(img/xue.png);
background-size: 100% 100%;
margin: auto;
/* 雪的樣式 */
}
#bj{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
/* 背景 全黑的背景 */
}
#hua{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 畫布 所有的雪花都花在這裏 */
}
</style>
<script type="text/javascript">
var list = new Array();//用來裝雪花的集合
//網頁加載好之後會自動執行這個方法
window.onload = function() {
setInterval("run()", 10);//執行這個方法之後開始下雪
//參數1:方法名 參數2:間隔時間單位ms
//意思是每隔10ms執行一次run()方法
}
function newXue() { //創建一個雪花
var v = new Object();//創建一個對象
v.wh = Math.random() * 20 + 15;//wh代表雪花的寬高
var gailv = window.innerWidth / (window.innerWidth + window.innerHeight);
//gailv=概率的拼音;概率=瀏覽器寬度/(瀏覽器寬度+瀏覽器高度)
//假設你瀏覽器是1920*1080的那gailv就是0.64
//然後 雪花出現的位置有64%是在屏幕上邊,36%是在屏幕右邊
if (Math.random() < gailv) {
//在屏幕上方創建雪花 設置xy座標
v.x = Math.random() * window.innerWidth;
v.y = -v.wh;
} else {
//在屏幕右方創建雪花 設置xy座標
v.x = window.innerWidth;
v.y = Math.random() * window.innerHeight;
}
v.sdx = Math.random() + 0.3;//雪花的x軸移動速度
v.sdy = Math.random() + 1;//雪花的y軸移動速度
v.div = document.createElement("div");//創建一個div,每個雪花都有一個div,這個div是用來顯示雪花的
v.div.className = "xue";//設置div的類
//設置div的位置
v.div.style.width = v.wh + "px";
v.div.style.height = v.wh + "px";
document.getElementById("hua").appendChild(v.div);//把這個div添加到畫布（hua）裏
list.push(v);//把雪花添加到集合
}
var loadxue = 10;
var load = 0;
function run() {
load++;//讓load自增
if (load == loadxue) {
//每當load == loadxue時 創建一個雪花
//這個方法每10ms執行一次,每執行10次這個方法就創建一個雪花
newXue();
load = 0;
}
//雪花的移動,遍歷list集合
for (var i = 0; i < list.length; i++) {
var v = list[i];
//一些簡單的座標計算
v.x -= v.sdx;
v.y += v.sdy;
v.div.style.left = v.x + "px";
v.div.style.top = v.y + "px";
//雪花飄出可視範圍之後刪除雪花
if (v.x + v.wh < 0 || v.y > window.innerHeight) {
list.splice(i, 1);//從list刪除雪花
document.getElementById("hua").removeChild(v.div);//刪除div
}
}
}
</script>
</head>
<body>
<div id="bj"></div>
<div id="hua"></div>
</body>
</html>