HTML的雪花特效代碼
在網頁中加入雪花特效可以為網頁增色不少，下面是一個簡單的HTML雪花特效代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML的雪花特效代碼</title>
</head>
<body>
<script>
var snowflakes = [];//存儲雪花的數組
var NUM_FLAKES = 100;//雪花總數
function setup() {
for (var i = 0; i < NUM_FLAKES; i++) {
snowflakes.push(new snowflake());//創建雪花對象并添加到數組中
}
}
function draw() {
for (var i = 0; i < NUM_FLAKES; i++) {
snowflakes[i].move();//讓雪花對象移動
snowflakes[i].display();//在頁面上顯示雪花
}
}
function snowflake() {
//定義雪花的屬性
this.x = random(0, window.innerWidth);//雪花的橫坐標
this.y = random(0, window.innerHeight);//雪花的縱坐標
this.radius = random(1, 5);//雪花的半徑
this.speed = random(1, 5);//雪花的下落速度
//讓雪花對象移動
this.move = function () {
this.y += this.speed;
if (this.y > window.innerHeight) {
this.y = 0;
}
}
//在頁面上顯示雪花
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);
}
}
//生成范圍內的隨機數
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//設置頁面完成后執行的操作
window.onload = function () {
setup();//初始化創建雪花對象
setInterval(draw, 30);//每隔30毫秒更新雪花的位置
}
</script>
</body>
</html>以上代碼通過創建雪花對象并將其存儲在數組中，然后使用setInterval方法每隔30毫秒更新雪花的位置，最后在頁面上顯示雪花。
下一篇vue的后端部署