<!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
73
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
带交互功能的HTML5+JS黑客帝国
目录
相关文章
|
3天前
|
5天前
|
数据采集
人工智能
自然语言处理
Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架，通过自然语言交互简化测试流程，支持动作执行、数据查询和页面断言，提供可视化报告，适用于多种应用场景。
79
1
1
|
11天前
|
JavaScript
容器
|
23天前
|
Web App开发
移动开发
HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿，其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
69
2
2
|
1月前
|
JavaScript
前端开发
容器
|
1月前
|
缓存
JavaScript
前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
51
5
5
|
1月前
|
JSON
前端开发
JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
54
4
4
|
1月前
|
前端开发
JavaScript
|
1月前
|
前端开发
JavaScript
安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
48
3
3
|
1月前
|
JavaScript
热门文章
最新文章
1
Python 爬虫必备杀器，xpath 解析 HTML
2
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
3
HTML（HyperText Markup Language，超文本标记语言）
4
太便利了 ！通义灵码方便生成html页面
5
HTML5 新的 Input 类型2
6
HTML（HyperText Markup Language）和XML（Extensible Markup Language）
7
HTML5 元素2
8
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
9
HTML与CSS在Web组件化中的核心作用及前端技术趋势
10
html5 canvas五彩碎纸屑飘落动画特效
1
JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
57
2
js设计模式-观察者模式与发布/订阅模式
75
3
js设计模式-策略模式与代理模式的应用
76
4
深入理解JavaScript中的闭包机制
64
5
使用Vue.js构建交互式前端的技术探索
92
6
使用Node.js构建实时聊天应用的技术指南
138
7
深入理解JavaScript中的事件循环机制
93
8
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
124
9
JavaScript 数组方法概览
39
10
在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
71