成都北方汽车学校成都北方汽车学校成都北方汽车学校

jQuery之黑客帝国-代码雨

在电视剧中,大家经常看见黑客对着电脑一顿操作后,电脑屏幕就如同下雨一般地出现了绿色的代码雨,今天小编就为大家使用web前端jQuery为大家模拟一下。


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>代码雨</title>

<script src="http://www.bf-chengdu.com/template/pc/static/home/js/jquery-1.10.1.min.js"></script>

<style>

body {

  margin: 0;

  overflow: hidden;

}</style>

</head>

<body>

<canvas id=q>


<script>

const s = window.screen;

const w = (q.width = s.width);

const h = (q.height = s.height);

const ctx = q.getContext("2d");


const p = Array(Math.floor(w / 10) + 1).fill(0);


const random = (items) => items[Math.floor(Math.random() * items.length)];


const hex = "0123456789ABCDEF".split("");


setInterval(() => {

  ctx.fillStyle = "rgba(0,0,0,.05)";

  ctx.fillRect(0, 0, w, h);

  ctx.fillStyle = "#0f0";

  p.map((v, i) => {

    ctx.fillText(random(hex), i * 10, v);

    p[i] = v >= h || v > 50 + 10000 * Math.random() ? 0 : v + 10;

  });

}, 1000 / 30);

</script>


</body>

</html>


演示效果如下:

jQuery之黑客帝国-代码雨(图1)

以上就是整个代码雨的整个演示啦,喜欢的朋友记得向好友分享哟!


未经允许不得转载:成都北方汽车学校 » jQuery之黑客帝国-代码雨