利用JS打造黑客代码雨效果
作者:肥学 时间:2024-05-03 15:05:16
演示
技术栈
js实战我们也写过很多了,其中每次几乎都用到画布,大家知道它的重要性了吧。今天依旧用到它了。不过我们讲过它的用法就不多说了。 这次我们说一下window.onload
window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。
window.onload() 通常用于 元素,在页面完全载入后(包括图片、css文件等等)执行脚本代码。
只有一个要执行的函数语法:
window.onload = funcRef;
因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用,如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。
所以对于一些函数功能要用window.onload
window.onload 与 jQuery ready() 区别
window.onload = function () {}; // JavaScript
$(document).ready(function () {}); // jQuery
源码
画布
<canvas id="mom" style="background:#111"></canvas>
js样式设置
window.onload = function(){
//获取画布对象
var canvas = document.getElementById("mom");
//获取画布的上下文
//getContext() 方法返回一个用于在画布上绘图的环境。
var context =canvas.getContext("2d");
//获取浏览器屏幕的宽度和高度
var W = window.innerWidth;
var H = window.innerHeight;
//设置canvas的宽度和高度
canvas.width = W;
canvas.height = H;
//每个文字的字体大小
var fontSize = 16;
//计算列
var colunms = Math.floor(W /fontSize);
//记录每列文字的y轴坐标
var drops = [];
//给每一个文字初始化一个起始点的位置
//计算每一个文字所谓坐标 存储y轴的坐标
for(var i=0;i<colunms;i++){
drops.push(0);
}
//运动的文字
var str ="JavaScript function(){}";
//4:fillText(str,x,y);原理就是去更改y的坐标位置
//绘画的函数
function draw(){
context.fillStyle = "rgba(0,0,0,0.05)";
//fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
context.fillRect(0,0,W,H);
//给字体设置样式
context.font = "700 "+fontSize+"px 微软雅黑";
//给字体添加颜色
context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色,十六进制颜色
//写入画布中
for(var i=0;i<colunms;i++){
var index = Math.floor(Math.random() * str.length);//设置文字出发时间随机 Math.floor(Math.random()*str.length)让数组里面的文字索引随机出现
var x = i*fontSize;
var y = drops[i] *fontSize;//也让y轴方向也向下掉一个文字的距离
context.fillText(str[index],x,y);
// //如果要改变时间,肯定就是改变每次他的起点
if(y >= canvas.height && Math.random()>0.99){
drops[i] = 0;
}
drops[i]++;//让数组里面的值每次加一,用于上面的y轴下掉
}
};
//随机颜色
function randColor(){
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
}
draw();
setInterval(draw,20);
};
来源:https://juejin.cn/post/7109669056906526756
标签:JS,黑客,代码雨
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
js返回顶部代码
2011-04-25 19:21:00
Golang汇编之控制流深入分析讲解
2024-05-08 10:15:11
Python UI自动化测试Web frame及多窗口切换
2023-05-29 01:18:55
如何使用Python读取xml文件
2022-09-16 16:37:51
Django中session登录验证操作指南
2023-12-12 03:34:43
Python中的With语句的使用及原理
2023-03-16 01:01:23
Vue+Element+Springboot图片上传的实现示例
2024-06-07 15:19:39
Python利用prettytable实现格式化输出内容
2023-10-17 11:02:32
![](https://img.aspxhome.com/file/2023/5/114505_0s.png)
Bottle部署web服务及postman接口的方法
2022-06-14 23:38:53
![](https://img.aspxhome.com/file/2023/7/112057_0s.png)
基于Python实现快递信息提取
2022-05-02 13:41:11
![](https://img.aspxhome.com/file/2023/0/126970_0s.jpg)
基于python-pptx库中文文档及使用详解
2023-11-30 12:06:13
![](https://img.aspxhome.com/file/2023/9/81639_0s.jpg)
centos6.7 安装python2.7、pip2.7、easy_install-2.7的方法
2021-02-06 09:20:35
![](https://img.aspxhome.com/file/2023/8/101388_0s.png)
Python3之外部文件调用Django程序操作model等文件实现方式
2023-07-19 01:17:29
程序员的八种境界,你在哪一境?
2022-07-19 11:22:19
![](https://img.aspxhome.com/file/2023/8/112068_0s.jpg)
用python爬取分析淘宝商品信息详解技术篇
2022-09-12 23:40:54
![](https://img.aspxhome.com/file/2023/3/90933_0s.jpg)
Mootools 1.2教程(18)——Class 类(第一部分)
2008-12-19 12:45:00
对Django中内置的User模型实例详解
2022-10-31 05:03:10
javascript 45种缓动效果(二)
2009-09-19 18:53:00
![](https://img.aspxhome.com/file/UploadPic/up/2009091919271644.gif)
go Cobra命令行工具入门教程
2023-06-24 18:27:12
![](https://img.aspxhome.com/file/2023/6/81566_0s.jpg)
go面向对象方式操作JSON库实现四则运算
2024-05-22 10:12:47
![](https://img.aspxhome.com/file/2023/2/124002_0s.jpg)