电子雨html代码

news2024/11/27 16:43:49

废话不多说下面是代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Code</title>

<style>

body{

margin: 0;

overflow: hidden;

}

</style>

</head>

<body>

<canvas id="myCanvas"></canvas>

<script>

const width = document.getElementById("myCanvas").width = screen.availWidth;

const height = document.getElementById("myCanvas").height = screen.availHeight;

const ctx = document.getElementById("myCanvas").getContext("2d");

const arr = Array(Math.ceil(width / 10)).fill(0);

const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");

function rain() {

ctx.fillStyle = "rgba(0,0,0,0.05)";

ctx.fillRect(0, 0, width, height);

ctx.fillStyle = "#0f0";

arr.forEach(function (value, index) {

ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);

arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;

});

}

setInterval(rain, 30);

</script>

</body>

</html>

下面是代码效果

代码可以直接复制

如果有啥问题可以问我看到一定会回复大家,如果大家喜欢可以作者点赞和关注

大家的支持是我创作下去的最大动力!

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

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

相关文章

Demo: 实现PDF加水印以及自定义水印样式

实现PDF加水印以及自定义水印样式 <template><div><button click"previewHandle">预览</button><button click"downFileHandle">下载</button><el-input v-model"watermarkText" /><el-input v-mo…

【Java 设计模式】创建型之原型模式

文章目录 1. 定义2. 应用场景3. 代码实现4. 应用示例结语 在软件开发中&#xff0c;原型模式是一种创建型设计模式&#xff0c;它允许通过复制现有对象来创建新对象&#xff0c;而无需知道其具体实现。原型模式通常包含一个原型接口和多个实现了该接口的具体原型类。在本文中&a…

从0开始python学习-48.pytest框架之断言

目录 1. 响应进行断言 1.1 在yaml用例中写入断言内容 1.2 封装断言方法 1.3 在执行流程中加入断言判断内容 2. 数据库数据断言 2.1 在yaml用例中写入断言内容 2.2 连接数据库并封装执行sql的方法 2.3 封装后校验方法是否可执行 2.4 使用之前封装的断言方法&#xff0c…

RT-Thread 15. list_timer与软定时器

1. 代码 void rt_thread_usr1_entry(void *parameter) {/* set LED2 pin mode to output */rt_pin_mode(LED2_PIN, PIN_MODE_OUTPUT);while (1){rt_pin_write(LED2_PIN, PIN_HIGH);rt_thread_mdelay(2000);rt_pin_write(LED2_PIN, PIN_LOW);rt_thread_mdelay(3000);} }int ma…

MFC编辑框追加文本换行

void CeditdemoDlg::OnBnClickedButton1() {// TODO: 在此添加控件通知处理程序代码CString str1;SetDlgItemText(IDC_EDIT1, _T(""));for (int i 0; i < 5; i){((CEdit*)GetDlgItem(IDC_EDIT1))->SetSel(GetDlgItem(IDC_EDIT1)->GetWindowTextLength(), G…

Nginx详细介绍(并从技术层面深度剖析)

nginx介绍 1.nginx 介绍2.nginx的优势3.Nginx VS Apache3.1.内核、语言、诞生时间比较3.2.功能比较3.3Nginx 相对 apache 的优点 4.Nginx为什么有这么多的优势&#xff1f;4.1.IO多路复用&#xff08;I/O multiplexing【多并发】&#xff09;4.2.nginx的驱动模型介绍4.3.nginx的…

大屏数据可视化的设计流程及原则

随着数字经济的快速发展和信息化在各行业各领域的深入推进&#xff0c;可视化大屏在各行各业得到越来越广泛的应用。可视化大屏不再只是电影里奇幻的画面&#xff0c;而是被实实在在地应用在政府、商业、金融、制造、交通、城市等各个行业的业务场景中&#xff0c;切切实实地实…

Net Core Ocelot+Consul实现网关、服务注册、服务发现

什么是Ocelot? Ocelot是一个开源的ASP.NET Core微服务网关&#xff0c;它提供了API网关所需的所有功能&#xff0c;如路由、认证、限流、监控等。 Ocelot是一个简单、灵活且功能强大的API网关&#xff0c;它可以与现有的服务集成&#xff0c;并帮助您保护、监控和扩展您的微…

人工智能 AI 如何让我们的生活更加便利

每个人都可以从新技术中获益&#xff0c;一想到工作或生活更为便利、简捷且拥有更多空余时间&#xff0c;谁会不为之高兴呢&#xff1f;借助人工智能&#xff0c;每天能够多一些空余时间&#xff0c;或丰富自己的业余生活&#xff0c;为培养日常兴趣爱好增添一点便利。从电子阅…

小程序 常用组件

文章目录 常见组件viewtextimageswipernavigatorrich-textnodes属性 buttoniconfromradiocheckbox 常见组件 重点讲解⼩程序中常⽤的布局组件 view,text,rich–text,button,image,navigator,icon,swiper,radio,checkbox。 等 view 代替 原来的 div 标签 <view hover-clas…

【C语言基础考研向】05 scanf读取标准输入超详解

文章目录 一.scanf函数的原理 样例问题原因解决方法 二.多种数据类型混合输入 错误样例正确样例 一.scanf函数的原理 C语言未提供输入/输出关键字&#xff0c;其输入和输出是通过标准函数库来实现的。C语言通过scanf函数读取键盘输入&#xff0c;键盘输入又被称为标准输入。…

Qt绘画的使用

1. 绘图 绘图组件&#xff1a; 1、绘画对象 2、绘画位置 3、绘画工具 4、绘画时机 绘画时机&#xff1a; 当整个窗口或窗口的一部分需要重新绘制时&#xff0c;会调用绘制事件处理函数 void QWidget::paintEvent(QPaintEvent *event) 绘画对象&#xff1a; QPainter类&#xff…

java基础:求数组的最值

方法一&#xff1a;顺序查找 先假设数组第一个元素为最值&#xff0c;然后和数组里的数按顺序进行比较得出最值&#xff0c;所以叫顺序查找。 代码如下 package idea;public class arr_int {public static void main(String[] args) { // 初始化一个数组int[] arr {12…

【MYSQL】事务隔离级别

脏读、幻读、不可重复读 脏读 一个事务正在对一条记录做修改&#xff0c;在这个事务完成并提交前&#xff0c;另一个事务也来读取同一条记录&#xff0c;读取了这些未提交的“脏”数据&#xff0c;并据此做进一步的处理&#xff0c;就会产生未提交的数据依赖关系。这种现象被形…

渗透测试之Mimikatz2.2 如何抓取Win11登录明文密码

环境: 1.攻击者IP:192.168.1.35 系统: KALI2022(vmware 16.0) 2.靶机IP:192.168.1.16 系统: Windows11 3.USB无线网卡 4.Mimikatz 2.2 (win版) 问题描述: Mimikatz2.2 如何抓取Win11登录明文密码 解决方案: Wdigest WDigest协议是在WindowsXP中被引入的,旨在与H…

Kafka 消息不能正常消费问题排查

订单宽表数据不同步 事情的起因是专员在 ze app 上查不到订单了&#xff0c;而订单数据是从 mysql 的 order_search_info 查询的&#xff0c;order_search_info 表的数据是从 oracel 的 BZ_ORDER_INFO 表同步过来的&#xff0c;查不到说明同步有问题 首先重启&#xff0c;同步…

如何快速打造属于自己的接口自动化测试框架

1 接口测试 接口测试是对系统或组件之间的接口进行测试&#xff0c;主要是校验数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及相互逻辑依赖关系。 接口自动化相对于UI自动化来说&#xff0c;属于更底层的测试&#xff0c;这样带来的好处就是测试收益更大&#xff…

系统配置dns主从服务器

一、准备两台主机&#xff0c;区分主从 二、完全区域传送 1、主DNS服务器配置 #安装相关的包 [rootoula1 ~]# yum install bind -y#关闭防火墙 [rootoula1 ~]# systemctl stop firewalld [rootoula1 ~]# setenforce 0#修改配置主文件 [rootoula1 ~]# vim /etc/named.conf opt…

oop面向对象编程python

1.定义一个圆类&#xff08;Circle&#xff09;,求圆的面积和周长 import mathclass Circle():def __init__(self, R ,name):self.radius Rself.name namedef girth(self):return 2 * self.radius * math.pidef area(self):return self.radius ** 2 * math.pic1 Circle(10,&q…

全球移动通信市场,正在经历哪些新变化?

2023年已经结束了。回顾这一年的全球移动通信市场&#xff0c;如果让我用一个词来总结&#xff0c;那就是——“厚积薄发”。 从表面上来看&#xff0c;似乎并没有什么大事情发生。但实际上&#xff0c;平静的湖面之下&#xff0c;却是一片波涛汹涌、风云激荡。 无论是消费互联…