<!DOCTYPE html> <html> <head> <title>黑客帝国效果</title> </head> <body> <canvas id="canvas"></canvas> <style type="text/css"> body{margin: 0; padding: 0; overflow: hidden;} </style> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.height = window.innerHeight; canvas.width = window.innerWidth; var texts = '0123456789'.split(''); var fontSize = 16; var columns = canvas.width/fontSize; // 用于计算输出文字时坐标，所以长度即为列数 var drops = []; //初始值 for(var x = 0; x < columns; x++){ drops[x] = 1; } function draw(){ //让背景逐渐由透明到不透明 ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); //文字颜色 ctx.fillStyle = '#0F0'; ctx.font = fontSize + 'px arial'; //逐行输出文字 for(var i = 0; i < drops.length; i++){ var text = texts[Math.floor(Math.random()*texts.length)]; ctx.fillText(text, i*fontSize, drops[i]*fontSize); if(drops[i]*fontSize > canvas.height || Math.random() > 0.95){ drops[i] = 0; } drops[i]++; } } setInterval(draw, 33); </script> </body>
带交互功能的HTML5+JS黑客帝国
2023-06-15
67
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
带交互功能的HTML5+JS黑客帝国
目录
相关文章
|
1月前
|
JavaScript
前端开发
|
11天前
|
16天前
|
设计模式
前端开发
JavaScript
揭秘！前端大牛们如何巧妙利用JavaScript，打造智能交互体验！
【10月更文挑战第30天】前端开发领域充满了无限可能与创意，JavaScript作为核心语言，凭借强大的功能和灵活性，成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果，展示了JavaScript的多样性和强大能力。
32
4
4
|
15天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能，界面简洁实用，是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
23
2
2
|
1月前
|
存储
JavaScript
前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式（行内、内部、外部）和基础语法，包括变量、数据类型、运算符、数组、函数和对象等内容。同时，文章还详细讲解了 jQuery 的基本语法和常用方法，如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等，以及如何插入和删除元素。通过示例代码和图解，帮助读者更好地理解和应用这些知识。
16
1
1
|
1月前
|
人工智能
JavaScript
网络安全
ToB项目身份认证AD集成（三完）：利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互，包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类，提供了与 AD 服务器通信的完整解决方案，同时解决了中文字段在 LDAP 操作中被转义的问题。
40
1
1
|
1月前
|
JavaScript
前端开发
API
|
1月前
|
JavaScript
API
UED
|
1月前
|
资源调度
JavaScript
UED
|
1月前
|
JavaScript
搜索推荐
热门文章
最新文章
1
开发者最容易犯的13个JavaScript错误
2
js正则表达式语法
3
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
4
JS代码位置
5
JavaScript 图片切割效果
6
js: 删除node的所有child
7
【javascript】Promise/A+ 规范简单实现 异步流程控制思想
8
高性能Javascript--脚本的无阻塞加载策略
9
javascript，检测对象中是否存在某个属性
10
JavaScript 操作 Cookie
1
【CSDN创作优化1】个人简介优化 html font属性
58
2
一种pug与html相互转换的工具
89
3
android TextView HTML 的效果
41
4
BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
107
5
HTML5/CSS3粒子效果进度条代码
62
6
HTML5 Canvas发光Loading源码
46
7
通过html页面方式访问www.iximo.com的方式(原创)
50
8
HTML5作业(一)-----电子日历
98
9
HTML5作业(二)-----扑克牌拖放小游戏
141
10
HTML5作业(三)-----问卷调查表设计
74