HTML的雪花特效代碼
在網(wǎng)頁(yè)中加入雪花特效可以為網(wǎng)頁(yè)增色不少，下面是一個(gè)簡(jiǎn)單的HTML雪花特效代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML的雪花特效代碼</title>
</head>
<body>
<script>
var snowflakes = [];//存儲(chǔ)雪花的數(shù)組
var NUM_FLAKES = 100;//雪花總數(shù)
function setup() {
for (var i = 0; i < NUM_FLAKES; i++) {
snowflakes.push(new snowflake());//創(chuàng)建雪花對(duì)象并添加到數(shù)組中
}
}
function draw() {
for (var i = 0; i < NUM_FLAKES; i++) {
snowflakes[i].move();//讓雪花對(duì)象移動(dòng)
snowflakes[i].display();//在頁(yè)面上顯示雪花
}
}
function snowflake() {
//定義雪花的屬性
this.x = random(0, window.innerWidth);//雪花的橫坐標(biāo)
this.y = random(0, window.innerHeight);//雪花的縱坐標(biāo)
this.radius = random(1, 5);//雪花的半徑
this.speed = random(1, 5);//雪花的下落速度
//讓雪花對(duì)象移動(dòng)
this.move = function () {
this.y += this.speed;
if (this.y > window.innerHeight) {
this.y = 0;
}
}
//在頁(yè)面上顯示雪花
this.display = function () {
var snowflakeDiv = document.createElement("div");
snowflakeDiv.innerHTML = ".";
snowflakeDiv.style.position = "absolute";
snowflakeDiv.style.left = this.x + "px";
snowflakeDiv.style.top = this.y + "px";
snowflakeDiv.style.fontSize = this.radius + "px";
snowflakeDiv.style.color = "#FFFFFF";
document.body.appendChild(snowflakeDiv);
}
}
//生成范圍內(nèi)的隨機(jī)數(shù)
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//設(shè)置頁(yè)面完成后執(zhí)行的操作
window.onload = function () {
setup();//初始化創(chuàng)建雪花對(duì)象
setInterval(draw, 30);//每隔30毫秒更新雪花的位置
}
</script>
</body>
</html>以上代碼通過(guò)創(chuàng)建雪花對(duì)象并將其存儲(chǔ)在數(shù)組中，然后使用setInterval方法每隔30毫秒更新雪花的位置，最后在頁(yè)面上顯示雪花。
下一篇vue的后端部署