HTML大雪纷飞

图片

目录

写在前面

HTML简介

完整代码

代码分析

运行结果

系列文章

写在后面


写在前面

小编又又又出现啦!这次小编给大家带来大雪纷飞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的结合,开发者可以创建出各种丰富、灵活和具有交互性的网页。

完整代码

<!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') {//初始的leftres = Math.round(Math.random() * (screenWidth - 30 - 10)) + 10;Math.random() > 0.8 ? (res = -res) : null;//这句是为了让左边有雪,因为雪是往右飘的,把left设置为负值,就会有的出现在左侧} else if (type == 'top') {//初始的topres = -(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 = '&#10052';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表示每次落下的雪花数量。

2. Snow对象的初始化方法init()用于设置天空的宽度和高度,并创建雪花元素。

3. 创建雪花元素时,使用了getRandomThings()方法获取随机的left、top、增加的速度和大小。雪花元素是以div元素的形式创建的,使用绝对定位和设置left、top属性来确定雪花的位置,通过设置字体大小来确定雪花的大小,使用特殊字符来表示雪花。

4. start()方法用于开始动画,根据downSize的值来设置每次落下雪花的数量,并为每个雪花设置定时器来执行下落的动画。

5. doStart()方法是每个雪花的具体下落动画实现,根据随机生成的增加的速度和left、top的值来控制雪花的移动,当雪花接触到屏幕的右边界或底部时,重新设置雪花的位置和速度,实现连续下落的效果。

6. getStyle()方法用于获取元素的CSS属性值。

这段代码通过使用HTML、CSS和JavaScript实现了一个下雪效果的动画,通过设置雪花的数量、大小和速度等参数,可以根据实际需要进行调整。

运行结果

图片

系列文章

序号目录直达链接
1HTML实现3D相册HTML实现3D相册-CSDN博客
2HTML元素周期表HTML元素周期表-CSDN博客
3HTML黑客帝国字母雨HTML黑客帝国字母雨_字母雨html-CSDN博客
4HTML五彩缤纷的爱心HTML五彩缤纷的爱心-CSDN博客
5HTML飘落的花瓣HTML飘落的花瓣-CSDN博客
6HTML哆啦A梦HTML哆啦A梦_html哆啦a梦代码-CSDN博客
7HTML爱情树HTML爱情树-CSDN博客
8HTML新春烟花盛宴HTML新春烟花盛宴-CSDN博客
9HTML想见你HTML想见你-CSDN博客
10HTML蓝色爱心HTML蓝色爱心-CSDN博客
11HTML跳动的爱心HTML跳动的爱心-CSDN博客
12HTML橙色爱心HTML橙色爱心-CSDN博客
13HTML大雪纷飞https://want595.blog.csdn.net/article/details/139136829
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写在后面

我是一只有趣的兔子,感谢你的喜欢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/843013.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Diffusion Model, Stable Diffusion, Stable Diffusion XL 详解

文章目录 Diffusion Model生成模型DDPM概述向前扩散过程前向扩散的逐步过程前向扩散的整体过程 反向去噪过程网络结构训练和推理过程训练过程推理过程优化目标 详细数学推导数学基础向前扩散过程反向去噪过程 Stable Diffusion组成结构运行流程网络结构变分自编码器 (VAE)文本编…

富港银行 邀请码 兑换码 优惠码 分享

首次记得一定要扫码注册&#xff0c;扫码注册开户费50美金&#xff0c;每笔26美金手续费&#xff0c;目前能接收CBI银行资金的有&#xff1a;工行、交通、中行&#xff0c;请知悉 cbi帐户管理费&#xff1a;10美元/月&#xff0c;余额>500美元&#xff0c;1美元/月/&#x…

在vue中实现下载文件功能

实际操作为&#xff0c;在表格中 我们可以获取到文件的id&#xff0c;通过插槽就可以实现 <template #default"scope"><el-button type"text" click"handleDown(scope.row)"><span>下载</span></el-button> </…

数组基础-笔记

数组是非常基础的数据结构&#xff0c;实现运用和理解是两回事 数组是存放在连续内存空间上的相同类型的数据的集合 可以方便的通过下表索引的方式获取到下标下对应的数据。 举一个字符数组的例子&#xff1a; 注意两点&#xff1a; 数组下标从0开始 数组内存空间的地址是连…

Python的selenium爬取

1.selenium 1.1.前言 使用python的requests模块还是存在很大的局限性&#xff0c;例如&#xff1a;只发一次请求&#xff1b;针对ajax动态加载的网页则无法获取数据等等问题。特此&#xff0c;本章节将通过selenium模拟浏览器来完成更高级的爬虫抓取任务。 1.2.什么是seleniu…

Redhat7.4部署MySQL-5.7.17搭建双主互为主从

一、准备工作 需要先准备已经搭建好的两台数据库&#xff0c;并且保证服务器之间网络是通的&#xff0c;3306端口可以相互访问。 二、修改两台数据库my.cnf 配置文件&#xff0c;将下列内容添加进去&#xff0c;放在 [mysqld] 下 我们暂定两台服务器为A服务和B服务&#xff…

【音视频基础概念】颜色与图像

文章目录 前言一、三原色不同三原色的概念三原色的作用 二、颜色空间颜色空间是什么颜色空间的作用常见颜色空间示例灰度图像是什么灰度图像的作用灰度图像的技术细节示例 总结 前言 在当今数字媒体时代&#xff0c;音视频技术在我们的日常生活中占据了重要位置。无论是观看电…

线代与图形学的暧昧二三事

A Swift and Brutal Introduction to Linear Algebra 计算机图形学依赖于线性代数、微积分、统计...物理方面涉及到光学&#xff08;波动光学&#xff1a;不再假设光是直线传播&#xff0c;作为一种光波与物体表面材质进行作用接触&#xff0c;如何生成不同的外观&#xff09;…

STM32硬件接口I2C应用(基于BH1750)

目录 概述 1 STM32Cube控制配置I2C 1.1 I2C参数配置 1.2 使用STM32Cube产生工程 2 HAL库函数介绍 2.1 初始化函数 2.2 写数据函数 2.3 读数据函数 3 光照传感器BH1750 3.1 认识BH1750 3.2 BH1750寄存器 3.3 采集数据流程 4 BH1750驱动实现 4.1 接口函数实现 4.2…

vite+js配置

vite js 配置路径 npm install types/node --save-dev vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue //需要引入 import path from path// https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],resolve: {a…

港口与航运3D三维虚拟仿真展区让更多人了解到海洋知识

在短短20天内&#xff0c;搭建起200多家线上3D展厅&#xff0c;听起来似乎是一项艰巨的任务。然而&#xff0c;对于我们的3d云展平台而言&#xff0c;这早已成为常态。连续三年&#xff0c;我们已成功为众多会展公司在短时间内构建出几百家甚至上千家的线上3D展会&#xff0c;见…

简单的利用有限脉冲响应(FIR)滤波器对心电信号进行降噪(Python)

代码很简单。 import numpy as np import matplotlib.pyplot as plt#------------------------Bandstop Filter Function------------------------ def bandstop(M,low,high,Fs):#50Hz removalk1 int( (low/Fs)*M) # index 22k2 int( (high/Fs)*M) # index 27#DC removalk0 …

关于C++的IO流简单总结

基础IO流 C的IO以面向对象的形式实现, 同时兼容了C语言面向过程的IO方式 C 标准库提供了四个基本流对象&#xff1a; cin&#xff1a;用于从标准输入&#xff08;通常是键盘&#xff09;读取数据。 cout&#xff1a;用于向标准输出&#xff08;通常是控制台&#xff09;写入…

怎么使用Stable diffusion中的models

Stable diffusion中的models Stable diffusion model也可以叫做checkpoint model&#xff0c;是预先训练好的Stable diffusion权重&#xff0c;用于生成特定风格的图像。模型生成的图像类型取决于训练图像。 如果训练数据中从未出现过猫的图像&#xff0c;模型就无法生成猫的…

面试八-存泄漏是什么,有哪几种,怎么解决?

一、内存泄漏几种情况 当使用基类指针指向派生类对象时&#xff0c;如果基类的析构函数不是虚函数&#xff0c;那么在使用基类指针来删除这个对象时&#xff0c;只会调用基类的析构函数&#xff0c;而不会调用派生类的析构函数。这就导致了派生类中的资源无法正确释放&#xff…

22公司斩获亚洲品牌经济峰会“亚洲数字化服务领军企业奖”

5月25日&#xff0c;以“亚洲新势力&#xff1a;创新、融合与可持续发展”为主题的亚洲品牌经济峰会2024深圳会议在深圳益田威斯汀酒店举办&#xff0c;本次活动由中国亚洲经济发展协会指导&#xff0c;由亚洲国际品牌研究院主办&#xff0c;旨在搭建品牌创新与经济发展交流平台…

B站pink老师CSS学习(一)

文章目录 一、CSS基础选择器1.标签选择器2.类选择器3. id选择器4.通配符选择器 二、字体属性1.字体2.字体大小3.字体粗细4.文字样式5.复合属性 三、文本属性1.文本颜色2.对齐文本3.装饰文本4.文本缩进5.行间距 四、CSS引入方式1. 内部样式表2.行内样式表3.外部样式表 一、CSS基…

CTF流量分析之wireshark使用

01.基本介绍 在CTF比赛中&#xff0c;对于流量包的分析取证是一种十分重要的题型。通常这类题目都是会提供一个包含流量数据的pcap文件&#xff0c;参赛选手通过该文件筛选和过滤其中无关的流量信息&#xff0c;根据关键流量信息找出flag或者相关线索。 pcap流量包的分析通常…

响应式页面布局处理-一篇打尽

纯pc端响应式 pc端平常用到的响应式布局 大致就如下三种&#xff0c;当然也会有其他方法&#xff0c;欢迎评论区补充 将div height、width设置成100% flex布局 flex布局主要是将flex-wrap: wrap&#xff0c; 最后&#xff0c;你可以通过给子元素设置 flex 属性来控制它们的…

布隆过滤器-详解及使用

一、什么是布隆过滤器 1、简介 布隆过滤器是一个很长的二进制向量和一系列随机映射函数。可以用于检索一个元素是否在一个集合中。。理解为SET集合。 布隆过滤器其内部维护了一个全为 0 的 bit 数组&#xff0c;需要说明的是&#xff0c;布隆过滤器有一个误判的概念&#xf…