“代码雨”js+css+html实现

article/2025/9/2 3:09:10

先看看效果：

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/ok.css">
<title>code by-zhenyu.sha</title>
</head><body>
<canvas id="canvas"></canvas>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://neilcarpenter.com/demos/canvas/matrix/stats.min.js"></script>
<script type="text/javascript" src="js/ok.js"></script>
</html>

js代码：

(function() {var lastTime = 0;var vendors = ['ms', 'moz', 'webkit', 'o'];for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||window[vendors[x] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame)window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function() {callback(currTime + timeToCall);},timeToCall);lastTime = currTime + timeToCall;return id;};if (!window.cancelAnimationFrame)window.cancelAnimationFrame = function(id) {clearTimeout(id);};
}());
// stats
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
var M = {settings: {COL_WIDTH: 20,COL_HEIGHT: 25,VELOCITY_PARAMS: {min: 4,max: 8},CODE_LENGTH_PARAMS: {min: 20,max: 40}},animation: null,c: null,ctx: null,lineC: null,ctx2: null,WIDTH: window.innerWidth,HEIGHT: window.innerHeight,COLUMNS: null,canvii: [],font: '30px matrix-code',letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'],codes: [],createCodeLoop: null,codesCounter: 0,init: function() {M.c = document.getElementById('canvas');M.ctx = M.c.getContext('2d');M.c.width = M.WIDTH;M.c.height = M.HEIGHT;M.ctx.shadowBlur = 0;M.ctx.fillStyle = '#000';M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT);M.ctx.font = M.font;M.COLUMNS = Math.ceil(M.WIDTH / M.settings.COL_WIDTH);for (var i = 0; i < M.COLUMNS; i++) {M.codes[i] = [];M.codes[i][0] = {'open': true,'position': {'x': 0,'y': 0},'strength': 0};}M.loop();M.createLines();M.createCode();// not doing this, kills CPU// M.swapCharacters();window.onresize = function() {window.cancelAnimationFrame(M.animation);M.animation = null;M.ctx.clearRect(0, 0, M.WIDTH, M.HEIGHT);M.codesCounter = 0;M.ctx2.clearRect(0, 0, M.WIDTH, M.HEIGHT);M.WIDTH = window.innerWidth;M.HEIGHT = window.innerHeight;M.init();};},loop: function() {M.animation = requestAnimationFrame(function() {M.loop();});M.draw();stats.update();},draw: function() {var velocity, height, x, y, c, ctx;// slow fade BG colourM.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';M.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';M.ctx.fillRect(0, 0, M.WIDTH, M.HEIGHT);M.ctx.globalCompositeOperation = 'source-over';for (var i = 0; i < M.COLUMNS; i++) {// check member of array isn't undefined at this pointif (M.codes[i][0].canvas) {velocity = M.codes[i][0].velocity;height = M.codes[i][0].canvas.height;x = M.codes[i][0].position.x;y = M.codes[i][0].position.y - height;c = M.codes[i][0].canvas;ctx = c.getContext('2d');M.ctx.drawImage(c, x, y, M.settings.COL_WIDTH, height);if ((M.codes[i][0].position.y - height) < M.HEIGHT) {M.codes[i][0].position.y += velocity;} else {M.codes[i][0].position.y = 0;}}}},createCode: function() {if (M.codesCounter > M.COLUMNS) {clearTimeout(M.createCodeLoop);return;}var randomInterval = M.randomFromInterval(0, 100);var column = M.assignColumn();if (column) {var codeLength = M.randomFromInterval(M.settings.CODE_LENGTH_PARAMS.min, M.settings.CODE_LENGTH_PARAMS.max);var codeVelocity = (Math.random() * (M.settings.VELOCITY_PARAMS.max - M.settings.VELOCITY_PARAMS.min)) + M.settings.VELOCITY_PARAMS.min;var lettersLength = M.letters.length;M.codes[column][0].position = {'x': (column * M.settings.COL_WIDTH),'y': 0};M.codes[column][0].velocity = codeVelocity;M.codes[column][0].strength = M.codes[column][0].velocity / M.settings.VELOCITY_PARAMS.max;for (var i = 1; i <= codeLength; i++) {var newLetter = M.randomFromInterval(0, (lettersLength - 1));M.codes[column][i] = M.letters[newLetter];}M.createCanvii(column);M.codesCounter++;}M.createCodeLoop = setTimeout(M.createCode, randomInterval);},createCanvii: function(i) {var codeLen = M.codes[i].length - 1;var canvHeight = codeLen * M.settings.COL_HEIGHT;var velocity = M.codes[i][0].velocity;var strength = M.codes[i][0].strength;var text, fadeStrength;var newCanv = document.createElement('canvas');var newCtx = newCanv.getContext('2d');newCanv.width = M.settings.COL_WIDTH;newCanv.height = canvHeight;for (var j = 1; j < codeLen; j++) {text = M.codes[i][j];newCtx.globalCompositeOperation = 'source-over';newCtx.font = '30px matrix-code';if (j < 5) {newCtx.shadowColor = 'hsl(104, 79%, 74%)';newCtx.shadowOffsetX = 0;newCtx.shadowOffsetY = 0;newCtx.shadowBlur = 10;newCtx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';} else if (j > (codeLen - 4)) {fadeStrength = j / codeLen;fadeStrength = 1 - fadeStrength;newCtx.shadowOffsetX = 0;newCtx.shadowOffsetY = 0;newCtx.shadowBlur = 0;newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')';} else {newCtx.shadowOffsetX = 0;newCtx.shadowOffsetY = 0;newCtx.shadowBlur = 0;newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')';}newCtx.fillText(text, 0, (canvHeight - (j * M.settings.COL_HEIGHT)));}M.codes[i][0].canvas = newCanv;},swapCharacters: function() {var randomCodeIndex;var randomCode;var randomCodeLen;var randomCharIndex;var newRandomCharIndex;var newRandomChar;for (var i = 0; i < 20; i++) {randomCodeIndex = M.randomFromInterval(0, (M.codes.length - 1));randomCode = M.codes[randomCodeIndex];randomCodeLen = randomCode.length;randomCharIndex = M.randomFromInterval(2, (randomCodeLen - 1));newRandomCharIndex = M.randomFromInterval(0, (M.letters.length - 1));newRandomChar = M.letters[newRandomCharIndex];randomCode[randomCharIndex] = newRandomChar;}M.swapCharacters();},createLines: function() {M.linesC = document.createElement('canvas');M.linesC.width = M.WIDTH;M.linesC.height = M.HEIGHT;M.linesC.style.position = 'absolute';M.linesC.style.top = 0;M.linesC.style.left = 0;M.linesC.style.zIndex = 10;document.body.appendChild(M.linesC);var linesYBlack = 0;var linesYWhite = 0;M.ctx2 = M.linesC.getContext('2d');M.ctx2.beginPath();M.ctx2.lineWidth = 1;M.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)';while (linesYBlack < M.HEIGHT) {M.ctx2.moveTo(0, linesYBlack);M.ctx2.lineTo(M.WIDTH, linesYBlack);linesYBlack += 5;}M.ctx2.lineWidth = 0.15;M.ctx2.strokeStyle = 'rgba(255, 255, 255, 0.7)';while (linesYWhite < M.HEIGHT) {M.ctx2.moveTo(0, linesYWhite + 1);M.ctx2.lineTo(M.WIDTH, linesYWhite + 1);linesYWhite += 5;}M.ctx2.stroke();},assignColumn: function() {var randomColumn = M.randomFromInterval(0, (M.COLUMNS - 1));if (M.codes[randomColumn][0].open) {M.codes[randomColumn][0].open = false;} else {return false;}return randomColumn;},randomFromInterval: function(from, to) {return Math.floor(Math.random() * (to - from + 1) + from);},snapshot: function() {window.open(M.c.toDataURL());}
};
function eventListenerz() {var controlToggles = document.getElementsByClassName('toggle-info');var controls = document.getElementById('info');var snapshotBtn = document.getElementById('snapshot');function toggleControls(e) {e.preventDefault();controls.className = controls.className === 'closed' ? '' : 'closed';}for (var j = 0; j < 2; j++) {controlToggles[j].addEventListener('click', toggleControls, false);}snapshotBtn.addEventListener('click', M.snapshot, false);
}
window.onload = function() {M.init();eventListenerz();
};

css代码：

@import url("http://fonts.googleapis.com/css?family=Carrois+Gothic");
@font-face {font-family: 'matrix-code';src: url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgFontName') format('svg');
}
html,
body {-webkit-font-smoothing: antialiased;font: normal 12px/14px "Carrois Gothic", sans-serif;width: 100%;height: 100%;margin: 0;overflow: hidden;color: #fff;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
body {background: black;
}
#stats {z-index: 100;
}
#info {background: rgba(0, 0, 0, 0.7);position: fixed;bottom: 0;left: 0px;width: 250px;padding: 10px 20px 20px;z-index: 100;-webkit-transform-origin: bottom center;-moz-transform-origin: bottom center;-o-transform-origin: bottom center;transform-origin: bottom center;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: -webkit-transform .5s ease-in-out;-moz-transition: -moz-transform .5s ease-in-out;-o-transition: -o-transform .5s ease-in-out;transition: transform .5s ease-in-out;
}
#info.closed {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);
}
.toggle-info {position: absolute;display: block;height: 10px;background: rgba(0, 0, 0, 0.8);width: 290px;left: 0;text-align: center;padding: 3px 0 7px;text-decoration: none;color: white;text-shadow: none;
}
.toggle-info:hover {background: rgb(0, 0, 0);
}
#close {top: -20px;
}
#open {bottom: -20px;-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);-o-transform: rotate(-180deg);transform: rotate(-180deg);
}
button {background: rgba(255, 255, 255, 0.2);color: #fff;border: 0;border-radius: 2px;padding: 7px 10px;box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.3);cursor: pointer;
}
button:hover {background: rgba(255, 255, 255, 0.1);
}
pa {color: #fff;
}
pa:hover {color: #EFFDEB;text-shadow: 0px 0px 5px #75AD61;
}

更多代码雨的文章，请参考我的其它文章：

“代码雨”纯HTML源码实现及效果：https://blog.csdn.net/u014597198/article/details/71412881


http://chatgpt.dhexx.cn/article/mNb0iUq8.shtml

相关文章

炫酷的代码雨

炫酷的代码雨

相信大家都看过《黑客帝国》吧&#xff0c;里面的代码雨是不是非常炫酷 &#xff1f;今天带大家做出代码雨。 bat文件 bat1 echo off :: Code by hxuan999 2006-11-12 CMDXP :: http://www.cn-dos.net/forum/viewthread.php?tid24418 setlocal ENABLEDELAYEDEXPANSION colo…
阅读更多...
“代码雨”纯HTML源码实现及效果

“代码雨”纯HTML源码实现及效果

先看看效果 1、绿色&#xff1a; 2、彩色&#xff1a; 3、背景色&#xff1a; 4、绿色逐渐变浅&#xff1a; 源代码&#xff1a; <!DOCTYPE html> <html><head> <meta http-equiv"Content-Type" content"text/html;charsetutf-8"…
阅读更多...
代码雨大全（装逼或学习）--KuaiLe推荐

代码雨大全（装逼或学习）--KuaiLe推荐

这种&#xff1b;注&#xff1a;后面还有。 代码&#xff1a; echo off title digitalrain color 0a &#xff1a;<-----修改颜色 setlocal ENABLEDELAYEDEXPANSION for /l %%i in (0) do ( set "line" for /l %%j in (1,1,80) do ( set /a Down%%j-2 set…
阅读更多...
代码雨怎么编写

代码雨怎么编写

百度经验:jingyan.baidu.com Windows编程语言技巧。DOS命令编程。如何使用DOS命令编写一个代码雨小程序&#xff1f; 百度经验:jingyan.baidu.com 工具/原料 电脑 记事本 百度经验:jingyan.baidu.com 方法/步骤 1 很多人都觉得黑客帝国里&#xff0c;电脑屏幕上的绿色代码雨非常…
阅读更多...
代码雨教程

代码雨教程

可以用电脑自带的文本文档打&#xff0c;很简单的。 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <style type"text/css"> html,body{width: 100%;height: 100%;} body{ background: #000; overflow: hidden; m…
阅读更多...
用最简单的方法生成代码雨，效果相当的哇塞。

用最简单的方法生成代码雨，效果相当的哇塞。

生成黑客帝国中的代码雨&#xff0c;效果相当的哇塞&#xff0c;过程相当的简单&#xff0c;不需要电脑额外的安装工具。 文章目录 前言一、使用步骤1.在桌面新建一个txt文本2.代码3.最重要的步骤4.运行代码 总结 前言 提示&#xff1a; 有时候需要装X&#xff0c;高一些看起…
阅读更多...
多种代码生成炫酷代码雨（推荐）

多种代码生成炫酷代码雨（推荐）

学习目标 1、一周掌握 JAVA入门到进阶知识 2、掌握基础C#l窗体知识 3、手把手教你vbs脚本制作 4、强大的 IDEA编程利器 5、经典少见的 面试题目技巧 本人主页 多种代码生成代码雨 文章目录 学习目标多种代码生成代码雨一、html代码雨效果图&#xff1a;代码块 二、vb代码雨效…
阅读更多...
三分钟教你实现“代码雨”

三分钟教你实现“代码雨”

本篇文章介绍一下如何实现“代码雨”。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。 先看看效果 1、绿色&#xff1a; 2、彩色&#xff1a; 3、背景色&#xff1a; 4、绿色逐渐变浅&#xff1a; 源代码&#xff1a; <!DOCTYPE …
阅读更多...
30行python代码实现“代码雨”

30行python代码实现“代码雨”

介绍 上手 python&#xff0c;很多人最先接触的就是 pygame 包了&#xff0c;能在有一定趣味性的同时&#xff0c;建立起对 python 的基本认识。 提到编程&#xff0c;我想很多人的第一印象就是影片中的黑客形象&#xff0c;在黑色背景下敲击键盘&#xff0c;打出闪烁着绿光的…
阅读更多...
云服务器和传统服务器的区别，企业选哪个比较合适

云服务器和传统服务器的区别，企业选哪个比较合适

随着云计算的发展&#xff0c;更多的个人和企业都会了解到云服务器&#xff0c;那么云服务器和传统服务器哪个更好&#xff0c;选择云服务器还是传统服务器&#xff1f;还是跟着赞奇云工作站一起来看看文章就明白了。 服务器一般分为云服务器和传统物理服务器。服务器具有高速…
阅读更多...
腾讯云服务器地域有什么区别？怎么选比较好

腾讯云服务器地域有什么区别？怎么选比较好

腾讯云服务器地域有什么区别&#xff1f;云服务器地域怎么选择&#xff1f;地域是指云服务器所在机房的地理位置&#xff0c;用户距离地域越近网络延迟越低&#xff0c;速度越快&#xff0c;所以地域就近选择即可。广州上海北京等地域网站域名需要备案&#xff0c;中国香港或其…
阅读更多...
阿里云服务器选择什么操作系统比较好？

阿里云服务器选择什么操作系统比较好？

阿里云服务器操作系统分为Linux和Windows两大类&#xff0c;Linux可以选择Alibaba Cloud Linux&#xff0c;Windows可以选择Windows Server 2022 数据中心版 64位中文版&#xff0c;阿里云百科来详细说下阿里云服务器操作系统有哪些&#xff1f;以及选择哪个操作系统比较好&…
阅读更多...
在这个云时代，如何选择性价比更高的云服务器

在这个云时代，如何选择性价比更高的云服务器

目录 前言 1. 解决方法 2. 为什么不继续局域网 3. 云服务器部署的优点 4. 如何选择云服务器 5. 京东云售后服务 6. 产品云链接 7. 如何购买 结语 前言 上学期呢&#xff0c;我室友眼看着我天天学习Python&#xff0c;自己也坐不住了&#xff0c;然后也就跟着我学Pytho…
阅读更多...
本地服务器与云服务器哪个好？

本地服务器与云服务器哪个好？

本地服务器和云服务器是企业可以使用的两种不同的服务器设置。主要区别在于本地服务器托管&#xff0c;第三方提供商托管云服务器。那么&#xff0c;本地服务器和云服务器哪个更好呢&#xff1f; 接下来&#xff0c;将带大家讨论本地服务器和云服务器的优缺点&#xff0c;并帮…
阅读更多...
云平台和买服务器对比

云平台和买服务器对比

单模态模型配置以及花费时间 Second模型 GPU&#xff1a;8 Nvidia V100 GPUs块数&#xff1a;8训练时间&#xff1a;大约24小时使用4块3090跑的时间&#xff1a;大约28-30小时 PV-RCNN模型 GPU&#xff1a;8 Nvidia V100 GPUs块数&#xff1a;8训练时间&#xff1a;大约2-3…
阅读更多...
阿里云和腾讯云这两家对比哪个比较好一些？

阿里云和腾讯云这两家对比哪个比较好一些？

因工作关系&#xff0c;两家都有接触&#xff0c;也推荐过客户用过两家的服务器及其他云资源&#xff0c;今天从市场、性能、服务、价格等几个方面简单聊聊&#xff1a; 阿里云&#xff1a;成立于2009年&#xff0c;国内第一家云计算平台&#xff0c;也是目前国内最大、全球第…
阅读更多...
深度数据对比分析：阿里云服务器和腾讯云服务器那家好？

深度数据对比分析：阿里云服务器和腾讯云服务器那家好？

云服务器具有维护成本低&#xff0c;安全稳定&#xff0c;高可扩展性和 7 X 24 小时的售后支持的优势&#xff0c;因此云服务器成为中小企业建站的首要选择。国内的云服务器竞争也进入了跑马圈地的时代&#xff0c;以阿里云、腾讯云、百度云三大BAT为首&#xff0c;不断推出优惠…
阅读更多...
国内云服务器全面对比

国内云服务器全面对比

想要领取优惠券购买云服务可以前往我的云服务器领券购买。 经过疫情三年&#xff0c;大多行业开始复苏&#xff0c;企业开始布局以后得发展&#xff0c;云服务器作为企业发展几乎是必须的&#xff0c;一个企业从无到有&#xff0c;要经历很多&#xff0c;比如企业官网搭建&…
阅读更多...
哪个品牌云服务器性价比高，比较好用？

哪个品牌云服务器性价比高，比较好用？

博主在这里只推荐国内的云服务器&#xff0c;为什么不推荐国外的呢&#xff1f;没别的&#xff0c;就是支持国产&#xff01;&#xff01;&#xff01; 也希望大家都能支持我们国产的品牌&#xff0c;少用外国货&#xff0c;哈哈~ 当然了&#xff0c;还有其它方面的原因。 一…
阅读更多...
云服务器哪家好？云服务器评测对比

云服务器哪家好？云服务器评测对比

云服务器是所有云计算服务商提供的最基础产品&#xff0c;国内云服务器就属BAT(阿里云、腾讯云、百度云)三家企业了&#xff0c;其实厂商一般会根据分配的资源划分云服务器的级别和规格。但是由于采用的基础硬件、架构和调优技术存在差别&#xff0c;类似配置的云服务器之间也可…
阅读更多...
推荐文章

Copyright @ 2022~2023