AI 助理
备案控制台
开发者社区 云计算 文章 正文

带交互功能的HTML5+JS黑客帝国

2023-06-15 67
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 带交互功能的HTML5+JS黑客帝国 


<!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>


关键词：
HTML js
html5 JavaScript
JavaScript交互
功能HTML
HTML交互
火爆的后槽牙儿
目录
相关文章
游客g5tp3lgf24cqc
|
7天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
游客g5tp3lgf24cqc
28 11
温轻舟
|
3天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
27 1
蓝易云
|
8天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
19 3
疯狂的猿
|
11天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果，可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素，向下拖拽可实现删除效果，简单实用，欢迎下载
疯狂的猿
24 4
疯狂的猿
|
11天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能，界面简洁实用，是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
疯狂的猿
20 2
疯狂的猿
|
10天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码，在公路上开车网页小游戏源代码。
疯狂的猿
32 0
html5+three.js公路开车小游戏源码
疯狂的猿
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
69 6
想飞的雪糕
|
28天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成（三完）：利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互，包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类，提供了与 AD 服务器通信的完整解决方案，同时解决了中文字段在 LDAP 操作中被转义的问题。
想飞的雪糕
25 1
代码bug生产队
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶：从HTML到React.js
【10月更文挑战第9天】前端开发进阶：从HTML到React.js
代码bug生产队
34 1
技术小胖子
|
SQL BI 关系型数据库
利用SQL*PLUS导出成EXCEL和html的功能实现报表统计:
技术小胖子
1154 0