黑客帝国 文字矩阵（随机颜色）

Html

Css

Js

var str = []; str = "010101010101"; //定制要打印的文字数组 <!--var str=[]; str = prompt("请输入你要显示的文字矩阵,默认为01：", ""); if (str != null && str != "") { str = str; } else { str = "01"; //如果用户未输入就让文字为此数组 } --> var canvas = document.getElementById("tie"); var ctx = canvas.getContext("2d"); var s = window.screen; var w = s.width; var h = s.height; canvas.width = w; canvas.height = h; var fontSize = 18; var clos = Math.floor(w / fontSize); ctx.font = "600 " + fontSize + "px 微软雅黑"; //申明一个数组 var s = []; for (var i = 0; i < clos; i++) { s.push(0); } function getRandomColor() { var c = '#'; var cArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']; for (var i = 0; i < 6; i++) { var cIndex = Math.round(Math.random() * 15); c += cArray[cIndex]; } return c; } function draw() { ctx.fillStyle = "rgba(0,0,0,0.05)"; ctx.fillRect(0, 0, w, h); ctx.fillStyle = getRandomColor(); for (var i = 0; i < clos; i++) { var y = s[i] * fontSize; ctx.fillText(str[Math.floor(Math.random() * str.length)], i * fontSize, y); if (y >= canvas.height && Math.random() > 0.99) { s[i] = 0; } s[i]++; } } setInterval(draw, 50);

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

//定制要打印的文字数组

var str = [];
str = prompt("请输入你要显示的文字矩阵,默认为01：", "");
if (str != null && str != "") {
    str = str;
} else {
    str = "默认内容"; //如果用户未输入就让文字为此数组
}

打开页面的同时可以通过输入内容确定页面的文字矩阵的内容