目录
写在前面
小编又又又出现啦！这次小编给大家带来大雪纷飞HTML版，不需要任何的环境，只要有一个浏览器，就可以随时随地下一场大雪哦！
HTML简介
简单来说就是：浏览器看得懂的语言
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它使用一系列标签来描述页面的结构和内容，以便浏览器能够正确地解析和显示网页。
HTML最早于1990年由蒂姆·伯纳斯-李发明，他同时还发明了第一个Web浏览器。HTML的设计初衷是使文档之间能够互相链接，形成一个被称为"超文本"的新形式。超文本通过超链接将文档之间的关系连接起来，使用户能够轻松地浏览和导航网页。
HTML的基本单位是元素（element）。元素由一个开始标签和一个结束标签组成，中间是元素的内容。开始标签和结束标签之间还可以包含一些属性，这些属性可以提供有关元素的额外信息。例如，一个常见的元素是`<p>`，用于表示段落。它的使用方式是`<p>这是一段文本。</p>`，其中`<p>`是开始标签，`</p>`是结束标签，`这是一段文本。`是段落的内容。
HTML中有许多不同类型的元素，用于表示文字、图像、链接、表格、表单等。这些元素可以根据需要组合在一起，以创建具有不同功能和样式的网页。例如，可以使用`<h1>`到`<h6>`元素表示不同级别的标题，使用`<img>`元素插入图像，使用`<a>`元素创建链接等。
除了基本的元素之外，HTML还支持CSS（Cascading Style Sheets）用于控制网页的样式和布局，以及JavaScript用于实现动态和交互式效果。CSS和JavaScript可以与HTML配合使用，通过引用外部样式表和脚本文件来扩展和增强网页的功能。
HTML的发展不断推动着互联网的发展。随着技术的进步和用户需求的变化，HTML也在不断演进和更新。最新的HTML版本是HTML5，它引入了许多新的特性和功能，如多媒体支持、语义化标签、本地存储等，使网页更加丰富、灵活和易于开发。
总结来说，HTML是一种用于创建网页的标记语言，它使用一系列标签来描述页面的结构和内容。通过使用不同类型的元素，以及与CSS和JavaScript的结合，开发者可以创建出各种丰富、灵活和具有交互性的网页。
完整代码
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 100vw;
height: 100vh;
padding: 3px;
position: absolute;
background: black;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script>
(function () {
var screenWidth = screen.availWidth;//设定天空宽度
var screenHeight = screen.availHeight;//设定天空高度
var speed = 1;
function Snow(size, downSize) {
this.box = document.getElementById("box");
this.size = size;
this.downSize = downSize || 10;
this.item = [];
this.init();
this.start();
}
// 获取相关随机数据的方法
Snow.prototype.getRandomThings = function (type) {
var res;
if (type == 'left') {//初始的left
res = Math.round(Math.random() * (screenWidth - 30 - 10)) + 10;
Math.random() > 0.8 ? (res = -res) : null;//这句是为了让左边有雪，因为雪是往右飘的，把left设置为负值，就会有的出现在左侧
} else if (type == 'top') {//初始的top
res = -(Math.round(Math.random() * (50 - 40)) + 40);
} else if (type == 'incre') {//向下的速度
res = Math.random() * (4 - 1) + 1;
} else if (type == 'increLeft') {//向右的速度
res = Math.random() * (0.8 - 0.5) + 0.5;
} else {//雪花的大小
res = Math.round(Math.random() * (30 - 10)) + 10;
}
return res;
}
Snow.prototype.init = function () {
this.box.style.width = screenWidth + 'px';
this.box.style.height = screenHeight + 'px';
var fragment = document.createDocumentFragment();
for (var i = 0; i < this.size; i++) {//创建好雪花
var left = this.getRandomThings('left');
var top = this.getRandomThings('top');
var snowSize = this.getRandomThings('size');
var snow = document.createElement("div");
snow.style.cssText = 'position:absolute;color:#FFFFFF;';
snow.style['font-size'] = snowSize + 'px';
snow.style.left = left + 'px';
snow.style.top = top + 'px';
snow.innerHTML = '❄';
this.item.push(snow);
fragment.appendChild(snow);
}
box.appendChild(fragment);
}
Snow.prototype.start = function () {
var that = this;
var num = 0;
for (var i = 0; i < this.size; i++) {
var snow = this.item[i];
if ((i + 1) % this.downSize == 0) {//这样处理的话，就可以指定每次落下多少雪花，不然刚开始是一股脑的下来
num++;
}
(function (s, n) {//用闭包的方式
setTimeout(function () {
that.doStart(s);
}, 1000 * n)
})(snow, num)
}
}
//针对每个雪花的定时处理
Snow.prototype.doStart = function (snow) {
var that = this;
(function (s) {
var increTop = that.getRandomThings('incre');
var increLeft = that.getRandomThings('increLeft');
var x = parseInt(getStyle(s, 'left')), y = parseInt(getStyle(s, 'top'));
if (s.timmer) return;
s.timmer = setInterval(function () {
//超过右边或者底部重新开始
if (y > (screenHeight - 5) || x > (screenWidth - 30)) {
//重新回到天上开始往下
increTop = that.getRandomThings('incre');
increLeft = that.getRandomThings('increLeft');
//重新随机属性
var left = that.getRandomThings('left');
var top = that.getRandomThings('top');
var snowSize = that.getRandomThings('size');
s.style.left = left + 'px';
s.style.top = top + 'px';
s.style['font-size'] = snowSize + 'px';
y = top;
x = left;
n = 0;
return;
}
//加上系数，当随大于0.5 速度加快，小于0.5 速度减慢，看起来飘的感觉
x += Math.random() > 0.5 ? increLeft * 1.1 : increLeft * 0.9;
y += Math.random() > 0.5 ? increTop * 1.1 : increTop * 0.9;
//设定left top让雪动起来
s.style.left = x + 'px';
s.style.top = y + 'px';
}, speed);
})(snow)
}
//获取属性值
function getStyle(obj, prop) {
var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle(obj, null) : obj.currentStyle;
return prevComputedStyle[prop];
}
new Snow(300, 30);
})()
</script>
</html>代码分析
这段代码使用HTML和JavaScript实现了一个下雪效果的动画。以下是对代码的具体分析：
1.首先定义了一个Snow对象，该对象接受两个参数：size表示雪花的数量，downSize表示每次落下的雪花数量。
-
Snow对象的初始化方法init()用于设置天空的宽度和高度，并创建雪花元素。
-
创建雪花元素时，使用了getRandomThings()方法获取随机的left、top、增加的速度和大小。雪花元素是以div元素的形式创建的，使用绝对定位和设置left、top属性来确定雪花的位置，通过设置字体大小来确定雪花的大小，使用特殊字符来表示雪花。
-
start()方法用于开始动画，根据downSize的值来设置每次落下雪花的数量，并为每个雪花设置定时器来执行下落的动画。
-
doStart()方法是每个雪花的具体下落动画实现，根据随机生成的增加的速度和left、top的值来控制雪花的移动，当雪花接触到屏幕的右边界或底部时，重新设置雪花的位置和速度，实现连续下落的效果。
-
getStyle()方法用于获取元素的CSS属性值。
这段代码通过使用HTML、CSS和JavaScript实现了一个下雪效果的动画，通过设置雪花的数量、大小和速度等参数，可以根据实际需要进行调整。
运行结果
系列文章
|----|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 序号 | 目录 | 直达链接 |
| 1 | HTML实现3D相册 | HTML实现3D相册-CSDN博客 |
| 2 | HTML元素周期表 | HTML元素周期表-CSDN博客 |
| 3 | HTML黑客帝国字母雨 | HTML黑客帝国字母雨_字母雨html-CSDN博客 |
| 4 | HTML五彩缤纷的爱心 | HTML五彩缤纷的爱心-CSDN博客 |
| 5 | HTML飘落的花瓣 | HTML飘落的花瓣-CSDN博客 |
| 6 | HTML哆啦A梦 | HTML哆啦A梦_html哆啦a梦代码-CSDN博客 |
| 7 | HTML爱情树 | HTML爱情树-CSDN博客 |
| 8 | HTML新春烟花盛宴 | HTML新春烟花盛宴-CSDN博客 |
| 9 | HTML想见你 | HTML想见你-CSDN博客 |
| 10 | HTML蓝色爱心 | HTML蓝色爱心-CSDN博客 |
| 11 | HTML跳动的爱心 | HTML跳动的爱心-CSDN博客 |
| 12 | HTML橙色爱心 | HTML橙色爱心-CSDN博客 |
| 13 | HTML大雪纷飞 | https://want595.blog.csdn.net/article/details/139136829 |
| 14 | | |
| 15 | | |
| 16 | | |
| 17 | | |
| 18 | | |
| 19 | | |
| 20 | | |
| 21 | | |
| 22 | | |
| 23 | | |
| 24 | | |
| 25 | | |
| 26 | | |
| 27 | | |
写在后面
我是一只有趣的兔子，感谢你的喜欢！