电子雨html代码

废话不多说下面是代码:

<!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.mzph.cn/news/630674.shtml

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

相关文章

mybatis分页、延迟加载、立即加载、一级缓存、二级缓存

mybatis分页、延迟加载、立即加载、一级缓存、二级缓存 分页延迟加载和立即加载缓存一级缓存二级缓存 分页 分类&#xff1a; 使用Limit&#xff0c;来进行分页&#xff1b;物理分页使用RowBounds集合来保存分页需要数据&#xff0c;来进行分页;逻辑分页&#xff1b;本质是全…

Linux/Networked

Enumeration nmap 网站更新之后有了一个引导模式&#xff0c;更利于学习了&#xff0c;之前看ippsec的视频&#xff0c;要不总是没有思路&#xff0c;现在出现的问题多了提示也更多了&#xff0c;还没有使用&#xff0c;一会用用再说 首先&#xff0c;第一个问题是“目标上正…

大数据毕业设计:基于python美食推荐系统+爬虫+Echarts可视化+协同过滤推荐算法+Django框架(源码)✅

毕业设计&#xff1a;2023-2024年计算机专业毕业设计选题汇总&#xff08;建议收藏&#xff09; 毕业设计&#xff1a;2023-2024年最新最全计算机专业毕设选题推荐汇总 &#x1f345;感兴趣的可以先收藏起来&#xff0c;点赞、关注不迷路&#xff0c;大家在毕设选题&#xff…

数据结构和算法的部分例题(力扣)

1.数组 1.1 合并一个数组的两个有序区间 public class MargTwo {public static void main(String[] args) {int[] arr1{1,5,6,2,4,10,11};int[] arr2new int[arr1.length];marg2(arr1,0,2,3,6,arr2);}private static void marg2(int[]arr1,int iStar,int iEnd,int jStar,int j…

嵌入式-Stm32-江科大基于标准库的GPIO4个小实验

文章目录 一 、硬件介绍二 、实验&#xff1a;LED闪烁、LED流水灯、蜂鸣器提示2.1 需求1&#xff1a;面包板上的LED以1s为周期进行闪烁。亮0.5s,灭0.5s.....2.2 需求2: 8个LED实现流水灯 三、硬件介绍-按键开关、光敏电阻四、 实验 按键控制LED、光敏传感器控制蜂鸣器4.1 需求1…

【MYSQL】存储引擎MyISAM和InnoDB

MYSQL 存储引擎 查看MySQL提供所有的存储引擎 mysql> show engines; mysql常用引擎包括&#xff1a;MYISAM、Innodb、Memory、MERGE 1、MYISAM&#xff1a;全表锁&#xff0c;拥有较高的执行速度&#xff0c;不支持事务&#xff0c;不支持外键&#xff0c;并发性能差&#x…

ubuntu18.04 安装mysql(命令)

1.安装MySQL #命令1 sudo apt-get update #命令2 sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 2.2 检查mysql服务状态 systemctl status mysql.service 3.配置远程访问 在Ubuntu下MySQL缺省是只允许本地访问的 3.1 首先用根用户进入…

深度学习记录--梯度检验

数值逼近 为了对梯度进行检验&#xff0c;需要计算近似误差值来接近梯度 对于单边误差和双边误差公式&#xff0c;其中双边误差与真实梯度相差更小&#xff0c;故一般采用双边误差公式 双边误差 公式&#xff1a; 梯度检验(gradient checking) 对于成本函数&#xff0c;求出…

2018年认证杯SPSSPRO杯数学建模A题(第一阶段)海豚与沙丁鱼全过程文档及程序

2018年认证杯SPSSPRO杯数学建模 探究海豚猎捕时沙丁鱼群的躲避运动模型 A题 海豚与沙丁鱼 原题再现&#xff1a; 沙丁鱼以聚成大群的方式来对抗海豚的捕食。由于水下光线很暗&#xff0c;所以在距离较远时&#xff0c;海豚只能使用回声定位方法来判断鱼群的整体位置&#xf…

旅游平台day02

1. 用户注册 概述&#xff1a; 常见的注册方式&#xff1a;邮箱注册、手机号注册、昵称注册、或者以上几种同时支持 本项目仅仅支持手机号注册 需求&#xff1a; 项目启动后&#xff0c;访问regist.html进入注册页面 手机号校验 前后台都需要对手机号进行校验 前端校验&am…

iOS上h5长按识别图片二维码,图片会默认放大,禁用这一默认行为

iOS上h5长按识别图片二维码&#xff0c;图片会默认放大&#xff0c;禁用这一默认行为 测试代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-widt…

ES可视化工具--ElasticHD

说明 ElasticHD 是 github 上的一个开源的项目&#xff0c;所以他没有官方网站&#xff0c;但 github 上的项目界面也可称为是它的官方界面了。 在 github 上直接搜索 ElasticHD 即可找到它&#xff0c;下面我将留下它的直接跳转链接。ElasticHD 下载 在 github 上搜索到之后…

[Error]连接iPhone调试时提示Failed to prepare the device for development.

环境&#xff1a; iPhone 7 Plus iOS 15.8 Xcode14.2 问题&#xff1a; 连接iPhone设备运行时&#xff0c;设备旁提示如下文案。 Failed to prepare the device for development. 这时强行点击运行按钮&#xff0c;会弹窗提示如下文案。 The run destination ZDMiPhone is n…

Apache Doris (六十四): Flink Doris Connector - (1)-源码编译

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. Flink与Doris版本兼容

CTF CRYPTO 密码学-3

题目名称&#xff1a;反编译 题目描述&#xff1a; 分析 题目给出一个pyc后缀的文件&#xff0c;需要使用uncompyle6模块去还原成py文件 uncompyle6简介 uncompyle6 是一个 Python 反编译器&#xff0c;它能够将 Python 字节码&#xff08;.pyc 文件&#xff09;转换回源代码&…

【征服redis7】谈谈Redis的RDB持久化方式

从现在开始&#xff0c;我们来探讨redis的一个非常重要的问题——集群&#xff0c;要讨论集群&#xff0c;我们需要先理解redis持久化数据的方法&#xff0c;因为集群本质上就是将一个集群的数据同步到其他机器上。 Redis 6的持久化机制主要有两种&#xff1a;RDB&#xff08;…

springboot开启HTTPS

目录 一、前言 HTTP和HTTPS的含义以及区别 二、域名映射 三、添加SSL证书 四、Http转Https 五、内网穿透 一、前言 我们平常写完一个接口&#xff0c;其访问一般都是使用http协议 我们最终想要的结果是使用安全的HTTPS来访问 在我们开始实现之前&#xff0c;我们要先搞明…

烟火识别视频分析系统的应用-河北消防机器人项目

在当前的智能化、信息化时代背景下&#xff0c;河北省消防部门采纳了一项革命性的技术方案 —— 烟火识别视频分析系统&#xff0c;结合消防机器人的使用&#xff0c;大幅提升了火灾预防与应急处理能力。该项目的核心在于通过高精度的视频监控&#xff0c;实时分析识别潜在的火…

【笔记】Helm-3 主题-6 Chart仓库指南

Chart仓库指南 本节介绍如何创建和使用chart仓库。在高层级中&#xff0c;chart仓库是打包的chart存储和分享的位置。 社区的Helm chart仓位于 Artifact Hub &#xff0c;欢迎加入。不过Helm也可以创建并运行您自己的chart仓库。该指南将介绍如何操作。 Artifact Hub 先决条…

Microsoft Word 设置底纹

Microsoft Word 设置底纹 References 打开文档页面&#xff0c;选中特定段落或全部文档 在“段落”中单击“边框”下三角按钮 在列表中选择“边框和底纹”选项 在“边框和底纹”对话框中单击“底纹”选项卡 在图案样式和图案颜色列表中设置合适颜色的底纹&#xff0c;单击“确…