<!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
42
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
带交互功能的HTML5+JS黑客帝国
目录
相关文章
|
24天前
|
JavaScript
前端开发
|
24天前
|
前端开发
JavaScript
|
25天前
|
Web App开发
|
29天前
|
Java
测试技术
数据库
|
1天前
|
XML
前端开发
安全
【专栏：HTML 进阶篇】HTML 表单验证与 AJAX 交互
【4月更文挑战第30天】本文探讨了HTML表单验证和AJAX在现代网页开发中的重要性。HTML表单验证通过必填、数据格式和范围验证确保用户输入的准确性，而AJAX则实现异步通信，提供动态数据加载、局部更新和实时交互。两者的结合优化了表单处理，提高用户体验并减少服务器负担。实际应用包括在线注册、购物车系统和表单反馈。然而，开发者需注意浏览器兼容性、错误处理和安全性问题。掌握这些技术，能打造更智能、高效的网页应用，为用户提供更好的体验。在数字化时代，HTML表单验证和AJAX是网页创新与进步的关键。
5
0
0
|
7天前
|
JavaScript
前端开发
BI
|
10天前
|
移动开发
JavaScript
HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
13
0
0
|
15天前
|
JavaScript
前端开发
|
20天前
|
JavaScript
前端开发
多功能成语查询工具HTML源码
采用本地HTML，JavaScript，js代码编写，自适应端，源码全部开源可二开优化！
功能包含；成语接龙查询、以某个字开头的成语查询、包含某字的成语查询、
第二个字是某字的成语查询上传源码解压缩即可访问，支持上传二级目录访问，
或者是浏览器直接打开html本地访问
17
0
0
|
24天前
|
JSON
JavaScript
前端开发
热门文章
最新文章
1
HTML深度解析：更改文本颜色
2
基于SpringBoot+HTML实现登录注册功能模块
3
uni-app使用v-html输出富文本图片溢出解决
4
《HTML 简易速速上手小册》第4章：HTML 的表单与输入（2024 最新版）
5
黑色个人主页HTML源码
6
《HTML 简易速速上手小册》第5章：HTML 高级布局技巧（2024 最新版）
7
《HTML 简易速速上手小册》第8章：HTML 表单高级技术（2024 最新版）
8
如何使用HTML5的语义化标签来提高网站的可访问性？
9
【HTML/CSS】入门导学篇
10
web简易开发——通过php与HTML+css+mysql实现用户的登录，注册
1
JavaScript字符串检查：从基础到高级
26
2
使用 JavaScript 获取 URL 参数的详细指南
663
3
监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
120
4
Java Script 中的垃圾回收机制有哪些缺点
14
5
描述 JavaScript 中的垃圾回收机制。
20
6
如何使用 JavaScript 操作 DOM？
17
7
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
19
8
JavaScript 中的数组方法有哪些？
10
9
JS设置日期为0时0分0秒
30
10
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
26